前端学习总结，经验分享，项目经验分享过程

// 操作用户token
export function setToken(value) { uni.setStorageSync('token', value); console.log('存储用户信息成功');}export function getToken() { let token = uni.getStorageSync('token'); return token;}export function removeToken() { uni.removeStorageSync('token');}

export function setUserInfo(value) { try {  let newValue = JSON.stringify(value);  uni.setStorageSync('userInfo', newValue);  console.log('存储用户信息成功'); } catch (e) {  return; }}
export function getUserInfo() { let userInfo = uni.getStorageSync('userInfo'); console.log('userInfo获取用户信息成功', userInfo); if(userInfo) {  return JSON.parse(userInfo); }}

export function setConfig(value) { try {  let configColor = JSON.stringify(value);  uni.setStorageSync('configColor', configColor);  console.log('存储主题颜色成功'); }catch(e){  return; }}
export function getConfig() { let configColor = uni.getStorageSync('configColor'); if(configColor){  return JSON.parse(configColor); }}

export function setRecommend(value) { uni.setStorageSync('recommend', value); console.log('recommend', value);}
export function getRecommend() { let recommend = uni.getStorageSync('recommend'); return recommend;}

let txMapKey = 'xxxx' // 腾讯地图的key
export { txMapKey}

// description:微信公众号支付// data 微信支付请求成功之后返回的支付参数// payParams {object} 微信支付需要的参数
function onBridgeReady(data, payParams) { window.WeixinJSBridge.invoke('getBrandWCPayRequest', {  appId: data.appId,  timeStamp: data.timeStamp,  nonceStr: data.nonceStr,  package: data.package,  signType: data.signType,  paySign: data.paySign // 微信签名}, function(res) {  // console.log(res);  if(res.err_msg === 'get_brand_wcpay_request:ok') {   // 支付成功页面   if(payParams.type === 'SHYY') {    toastMsg('correct','支付成功');    setTimeout(()=>{     router.push('/home');    },500);  }else{   router.push({    path: '/success',    query: {     orderId: payParams.orderId,     totalFree: payParams.totalFree    }   });  } }else if(res.err_msg === 'get_brand_wcpay_request:fail') { // 支付失败  return alert(res.err_desc); }else{ // 跳转订单详情 toastMsg('warn', '支付取消'); }});}

/** * 支付宝支付 */function alipay(res) {	console.log('调起支付alipay',res);	uni.requestPayment({		provider: 'alipay',		orderInfo: {			"dealId": res.dealId,			"appKey": res.appKey,			"totalAmount": res.totalAmount,			"tpOrderId": res.tpOrderId,			"dealTitle": res.dealTitle,			"rsaSign": res.rsaSign,			"bizInfo": res.bizInfo		},         //订单数据		success: function(res) {			console.log('success:' + JSON.stringify(res));		},		fail: function(err) {			console.log('fail:' + JSON.stringify(err));		}	});}

function wxpay(ret, orderid) {  console.log('调起支付wxpay', ret);  let res = ret;  let status = false;  uni.requestPayment({    timeStamp: res.timeStamp,    nonceStr: res.nonceStr,    package: res.package,    signType: res.signType,    paySign: res.paySign,    appId: res.appId,    success: function (res) {      console.log('success:' + JSON.stringify(res), res);      uni.showToast({        title: '支付成功!'      });    },    fail: function (err) {      console.log('fail:' + JSON.stringify(err));    }  });}

request('接口名称', {key:value}, '请求方式(默认为GET)').then(res=>{console.log(res)})

import { getToken, removeToken } from './auth';let baseUrl = '';async function request(method,params,type,callBack){ // 创建一个名为request请求的方法函数 if (!type) {    type = 'GET'; }  let header = {    //设置请求头信息    'Authorization': getToken(),    'X-Requested-With': 'XMLHttpRequest',    "Accept": "application/json",    "Content-Type": "application/json; charset=UTF-8"  };  let http = {    url: baseUrl + mehtod,    data: params,    method: type,    header: header  }; let promise = new Promise((resolve, reject) => {    uni.request(http).then(res => {      let newdata = res[1].data; // if (newdata.code == 403) {      if (newdata == -1) {        uni.showToast({          title: res[1].data.msg,          icon: 'none'        });      }      resolve(res[1].data);    }).catch(err => {      reject(err);      console.log(err);    });  });  return promise;}export default {  request};

const formatTime = date => {  const year = date.getFullYear();  const month = date.getMonth() + 1;  const day = date.getDate();  const hour = date.getHours();  const minute = date.getMinutes();  const second = date.getSeconds();  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':');};
const formatNumber = n => {  n = n.toString();  return n[1] ? n : '0' + n;};
module.exports = {  formatTime: formatTime};

import Vue from 'vue'import Vuex from 'vuex'
Vue.use(Vuex)const store = new Vuex.Store({	state: {		hasLogin: false,		userInfo: {},	},	mutations: {		login(state, provider) {
			state.hasLogin = true;			state.userInfo = provider;			uni.setStorage({//缓存用户登陆状态			    key: 'userInfo',  			    data: provider  			}) 			console.log(state.userInfo);		},		logout(state) {			state.hasLogin = false;			state.userInfo = {};			uni.removeStorage({                  key: 'userInfo'              })		}	},	actions: {		}})
export default store

<script>	/**	 * vuex管理登陆状态	 */	import {		mapMutations	} from 'vuex';	export default {		methods: {			...mapMutations(['login'])		},		onLaunch: function() {			let userInfo = uni.getStorageSync('userInfo') || '';			if(userInfo.id){				//更新登陆状态				uni.getStorage({					key: 'userInfo',					success: (res) => {						this.login(res.data);					}				});			}					},		onShow: function() {			console.log('App Show')		},		onHide: function() {			console.log('App Hide')		},	}</script>

import Vue from 'vue'import store from './store'import App from './App'
const msg = (title, duration=1500, mask=false, icon='none')=>{	//统一提示方便全局修改	if(Boolean(title) === false){		return;	}	uni.showToast({		title,		duration,		mask,		icon	});}
const json = type=>{	//模拟异步请求数据	return new Promise(resolve=>{		setTimeout(()=>{			resolve(Json[type]);		}, 500)	})}

<script>	// vuex 管理登录状态	import {		mapMutations	} from 'vuex';	export default {		methods: {			...mapMutations(['login'])		},		onLaunch: function() {			let userInfo = uni.getStorageSync('userInfo') || '';			if (userInfo.id) {				// 更新登录状态				uni.getStorage({					key: 'userInfo',					success: (res) => {						this.login(res.data)					}				})			}		},		onShow: function() {			console.log('App Show')		},		onHide: function() {			console.log('App Hide')		}	}</script>

import Vue from 'vue'import App from './App'
//引入vueximport store from './store'import * as filters from './filters' // global filtersconst msg = (title, duration=1500, mask=false, icon='none')=>{	//统一提示方便全局修改	if(Boolean(title) === false){		return;	}	uni.showToast({		title,		duration,		mask,		icon	});}
//把vuex定义成为全局组件Vue.prototype.$store = storeVue.prototype.$api = {msg};
Vue.config.productionTip = false
Object.keys(filters).forEach(key => {	Vue.filter(key, filters[key])})
App.mpType = 'app'
const app = new Vue({    ...App,	// 挂载	store})app.$mount()

import Vue from 'vue'import App from './App'import router from './router'
Vue.config.productionTip = false;import store from './assets/js/store';
new Vue({ el: '#app', router, store, components: {App}, template: '<App/>'})

<template>  <div id="app">  	<!--首页的goods数据要缓存-->    <keep-alive>    	<router-view v-if="$route.meta.keepAlive"/>    </keep-alive>    <router-view v-if="!$route.meta.keepAlive"/>  </div></template><script>	//引入样式表	import "./assets/css/ico.css";	import "./assets/css/style.css";	import "./assets/css/animate.min.css";			export default {	  name: 'App'	}</script>

import Vue from 'vue'import Router from 'vue-router';import home from '@/components/home';import detail from '@/components/detail';import list from '@/components/list';import pay from '@/components/pay';
Vue.use(Router)
export default new Router({  routes: [    {      path: '/',      redirect:"/home"    },    {      path: '/home',      name: 'home',      meta:{keepAlive:true}, //缓存首页数据      component: home    },    {      path: '/detail',      name: 'detail',      component: detail    },    {      path: '/list',      name: 'list',      component: list    },    {      path: '/pay',      name: 'pay',      component: pay    }  ]})

<template>	<div class="detail">        <header>            <h1>详情</h1>            <a class="goback-btn icon-chevron-left" href="javascript:;" @click="goback">            </a>        </header>        <div class="cont">            <h4>{{$route.params.item.name}}             	<span class="price">￥{{$route.params.item.price}}</span>            </h4>            <button class="plus-btn icon-shopping-cart" :class="$route.params.item.checked?'ac':''" :disabled="$route.params.item.checked" @click="order"></button>                        <div class="swiper-container">                <div class="swiper-wrapper">                    <div class="swiper-slide" v-for="src in $route.params.item.slide"><img class="slide-img" :src="src"></div>                </div>                <div class="swiper-pagination"></div>            </div>            <div>            </div>            <div class="describe">                {{$route.params.item.describe}}            </div>        </div>    </div></template>
<script>	import swiper from "swiper";    import "swiper/dist/css/swiper.min.css";
    export default {        created() {            this.shopping_cart = this.$store.state.shopping_cart;        },        data:()=>({            shopping_cart:[]//购物车        }),        mounted() {        	//加载轮播图            var mySwiper = new swiper('.swiper-container', {                autoplay: {                    delay: 2500,                    disableOnInteraction: false,                },                pagination: {                    el: '.swiper-pagination',                },            })        },        methods:{        	//返回前页            goback(){              	this.$router.go(-1);              },            //点餐            order(){                var item=this.$route.params.item;                this.shopping_cart.push({                    id:item.id,                    name:item.name,                    price:item.price,                    num: 1                });                //item与goods[key]是同一个对象                item.checked=true;                //shopping_cart是个数组（引用数据类型），所以，可以不用commit，官方要求用commit                //放入store里                this.$store.commit("update_shopping_cart",{                    shopping_cart:this.shopping_cart,                });            }        }    }</script>
<style></style>

<template>	<div class="home">		<!--头部-->		<header>			<label><input type="search" v-model="keyword" :placeholder="search_ico"></label>			<button type="button" class="search-btn" @click="search">搜索</button>		</header>
		<!--侧边固定栏-->		<aside class="animated bounceInLeft">			<ul>				<li v-for="(menu,index) in goods_cls" :class="{'ac':cur_goods_cls==menu.id}" @click="changeMenu(index)">{{menu.name}}</li>			</ul>		</aside>
		<!--主菜谱 外层容器用于消除animate动画的bug-->		<div style="width:100%; overflow: hidden;">
			<div class="order-bar animated  bounceInRight">				<div class="order-class" v-for="item in goods_cls">					<h3>{{item.name}}</h3>					<ul class="good-list">						<li v-for="id in item.goods">							<router-link :to="{name:'detail',params:{item:goods[id]}}"><img :src="goods[id].img"></router-link>							<h4>{{goods[id].name}}</h4>							<p class="ellipsis">{{goods[id].describe}}</p>							<strong>￥{{goods[id].price}}</strong>							<button type="button" @click="order(goods[id],$event)" :class="['pointer-btn',goods[id].checked? 'ac':'']" :disabled="goods[id].checked"><b>点餐</b><i>已点</i></button>						</li>					</ul>				</div>			</div>		</div>		<!--底部-->		<footer>			<!--购物车-->			<div class="shoping-cart animated" :class="{'bounceInUp':showShoppingCart,'shoping-list-slide':showShoppingCart}">				<div class="empty">					<span class="icon-trash" @click="clearShopping"></span>				</div>				<ul v-if="shopping_cart.length>0">					<li v-for="(itm,index) in shopping_cart">{{itm.name}}						<em>￥{{itm.price}}</em>						<div>							<button class="shoping-sub icon-minus" type="button" @click="s_sub(itm,index)"></button>							<span>{{itm.num}}</span>							<button class="shoping-add icon-plus" type="button" @click="s_add(itm)"></button>						</div>					</li>				</ul>				<ul v-else>					<li style="text-align: center">还没有点菜哟！！</li>				</ul>
				<!--id给抛物线用-->				<button type="button" id="shoppingBtn" class="shopping-btn icon-shopping-cart" @click="showShoppingCart=!showShoppingCart"></button>				<span class="count" :class="{'hide':totalNum==0}">{{totalNum}}</span>			</div>
			<!--底部菜单-->			<div class="cont">				<div class="order-pointer-footer">					<div class="total"><em>￥{{totalPrice}}</em></div>					<a v-if="totalNum>0" href="javascript:;" class="pay-btn" @click="pay">去下单</a>				</div>			</div>		</footer>		<!--模态层-->		<div class="modal" :class="{'hide':!showShoppingCart}" @click="showShoppingCart=!showShoppingCart"></div>	</div></template>
<script>	import axios from "axios";	//zepto不支持commonJS，只能用jquery	import $ from "jquery";	//自定义抛物线 模块	import par from "../assets/js/parabola.js";
	export default {		name: 'home',		data: () => ({			//菜品			"goods": null,			//分类			goods_cls: null,			//购物车			shopping_cart: [				/*{				    "id":1,				    "name":"宫保鸡丁",				    "price":22,				    "num":1				},*/			],			cur_goods_cls: 1, //当前分类id			//总价格			totalPrice: 0,			//总数量			totalNum: 0,			//显示购物车			showShoppingCart: false,			//搜索关键字			keyword: "",			//vue只能用属性绑定方式定义placeholder图标			search_ico: "\ue903 请输入菜品名称"		}),
		created() {			//本模块被keepalive，created钩子只运行一次			axios.get("/static/data.json").then(				msg => {					this.goods = msg.data.goods					this.goods_cls = msg.data.goods_cls;					//存入store					this.$store.commit("update_goods", this.goods);				}, 				() => {					alert("连接失败");				}			);						//全局路由钩子			this.$router.beforeEach((to, from, next) => { //回调函数				//从搜索页回来，清除关键字				this.keyword = "",				//如果打开购物车，直接路由到下单页，再从下单页返回，不显示购物车				this.showShoppingCart = false;				next() //一定要记着执行，不然路由不能跳转了			})		},		watch: {			//监听购物车变化			shopping_cart: {				handler(curval, oldval) {					//清空所有数据					this.totalNum = this.totalPrice = 0;
					//清空所有菜品checked					for(var key in this.goods) {						this.goods[key].checked = false;					}										curval.forEach(item => {						//重新计算总额 总数						this.totalNum += item.num;						this.totalPrice += item.num * item.price;												//禁用已选菜品按钮						this.goods[item.id].checked = true;					});					//向vuex的store存储数据					this.$store.commit("update_shopping_cart", this.shopping_cart);				},				deep: true //对象内部的属性监听，也叫深度监听  			},		},		mounted() {			//监听window滚动			window.addEventListener('scroll', this.winScroll)		},		methods: {			//滚动			winScroll() {				var _this = this;				var scrollTop = $(window).scrollTop();				var oItem = $('.order-class');				oItem.each(function(i, elm) {					//此处不能使用箭头函数，因为$(this)					//offset					if($(this).offset().top < scrollTop + 200) {						_this.cur_goods_cls = i + 1;					}				})			},			//搜索			search() {				if(this.keyword == "") {					alert("请输入搜索关键字！！");				} else {					//搜索页面的菜品，也可以进入详情页，所以，所有数据都要放在store内					this.$store.commit("update_keyword", this.keyword);					this.$router.push("list")				}			},			//点餐			order(item, ev) {				this.shopping_cart.push({					id: item.id,					name: item.name,					price: item.price,					num: 1				});
				//加入购物车抛物线				var el = $('<div class="parabola-el"></div>');				$(document.body).append(el);				new par.parabola({					origin: ev.target,					target: '#shoppingBtn',					element: el,					time: 500,					a: 0.01,					callback(el) {						el.remove();					}				}).move()			},
			//左侧切换			changeMenu(i) {				var aUl = $('.order-class');				//使用position判断的ul				$(window).scrollTop(aUl.eq(i).position().top);			},
			//清空购物车			clearShopping() {				this.showShoppingCart = !this.showShoppingCart;				this.shopping_cart = [];			},
			//购物车add			s_add(item) {				item.num++;			},
			//购物车sub			s_sub(item, i) {				item.num--;				if(item.num == 0) {					this.shopping_cart.splice(i, 1);				};			},			//去下单			pay() {				this.$router.push({					name: "pay",					params: {						totalPrice: this.totalPrice					}				})			},		},	}</script><style scoped>
</style>

<template>    <div class="list">        <header>            <h1>搜索结果</h1>            <router-link to="/home" class="goback-btn icon-chevron-left">            </router-link>            <span class="total">共{{search_list.length}}条</span>        </header>                <ul id="scrollMenu" class="good-list">            <li v-for="item in search_list">                <img :src="item.img" @click="show_detail(item)">                <h4>{{item.name}}</h4>                <p>{{item.describe}}</p>                <strong>￥{{item.price}}</strong>                <button type="button" @click="point(item)" :class="['pointer-btn',item.checked? 'ac':'']" :disabled="item.checked"><b>点餐</b><i>已点</i></button>            </li>        </ul>       <div style="text-align: center;" v-if="search_list.length==0"> 没有搜索结果！</div>    </div></template>
<script>    export default {        created() {            //搜索页面的菜品，也可以进入详情页，所以，所有数据都要放在store内            let keyword=this.$store.state.keyword;            let goods=this.$store.state.goods;            this.shopping_cart = this.$store.state.shopping_cart;                    	for(var key in goods){                //ES6 字符串新增方法 includes：判断是否存在某个字符                //注意 ：                //console.log(str.includes('')); //空字符串 返回:true                //console.log(str.indexOf(''))； //空字符串 返回：0                if(goods[key].name.includes(keyword) && keyword!=""){                    this.search_list.push(goods[key]);                }            }        },        data:()=>({            search_list:[],            shopping_cart:[]        }),        methods:{        	//点餐            point(item){                this.shopping_cart.push({                    id: item.id,                    name: item.name,                    price: item.price,                    num: 1                });                item.checked=true;                //放入store里                this.$store.commit("update_shopping_cart",this.shopping_cart);            },            //显示详情页            show_detail(item){            	this.$router.push({name:"detail",params:{item}});            }        },    }</script>
<style scoped>    </style>

<template>    <div class="pay bounceInDown animated">        <h2>订单提交成功</h2>        <p>订单总额：<em style="color: red; font-size:.3rem;">{{$route.params.totalPrice}}</em> 元</p>        <br>        <h3>您的订单编号是：</h3>        <p class="order-num">123456789</p>        <p><button class="pay-btn">去付款</button></p>        <p><button class="goback-btn" @click="goback">返回菜单</button></p>    </div></template>
<script>    export default{        methods: {            goback() {                this.$router.push("home");            }        }    }</script>
<style></style>

import Vue from "vue";import Vuex from "vuex";
//应用插件Vue.use(Vuex);
//定义vuex状态export default new Vuex.Store({	state:{		shopping_cart:[],  //购物车		goods:{},		keyword:"",	},		mutations:{		update_shopping_cart(state,paylod){//			console.log(paylod);			this.state.shopping_cart=paylod;		},				update_goods(state,paylod){			state.goods=paylod;		},				update_keyword(state,paylod){			state.keyword=paylod;		}	}})

// JavaScript Documentvar parabola = function(config){    var b = 0,        INTERVAL = 15,        timer = null,        x1,y1,x2,y2,originx,originy,diffx,diffy,speedx;
    this.config = config || {};    // 起点    this.origin = $(this.config.origin)||null;    // 终点    this.target = $(this.config.target)||null;    // 运动的元素    this.element = $(this.config.element)||null;    // 曲线弧度    this.a = this.config.a || 0.001;    // 运动时间(ms)    this.time = this.config.time || 1000;
    this.init = function(){        x1 = this.origin.offset().left;        y1 = this.origin.offset().top;        x2 = this.target.offset().left;        y2 = this.target.offset().top;        originx = x1;        originy = y1;        diffx = x2-x1;        diffy = y2-y1;        speedx = diffx/this.time;        b = (diffy - this.a*diffx*diffx)/diffx;        this.element.css({            left: x1,            top: y1        })        return this;    }
    // 确定动画方式    this.moveStyle = function(){        var moveStyle = 'position',            testDiv = document.createElement('div');        if('placeholder' in testDiv){            ['','ms','moz','webkit'].forEach(function(pre){                var transform = pre + (pre ? 'T' : 't') + 'ransform';                if(transform in testDiv.style){                    moveStyle = transform;                }            })        }        return moveStyle;    }
    this.move = function(){        var start = new Date().getTime(),        moveStyle = this.moveStyle(),        _this = this;        timer = setInterval(function(){            if(new Date().getTime() - start > _this.time){                clearInterval(timer);                _this.element.css({                    left: x2,                    top: y2                })                typeof _this.config.callback === 'function' && _this.config.callback(_this.element);                return;            }            var x = speedx * (new Date().getTime() - start);            var y = _this.a*x*x + b*x;            if(moveStyle === 'position'){                _this.element.css({                    left: x+originx,                    top: y+originy                })            }else{                if(window.requestAnimationFrame){                    window.requestAnimationFrame(_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)');                }else{                    _this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)';                }            }        },INTERVAL)        return this;    }    this.init();}
//引入依赖jqueryimport $ from "jquery";
//输出apiexport default{	parabola}

const formatTime = date => {  const year = date.getFullYear()  const month = date.getMonth() + 1  const day = date.getDate()  const hour = date.getHours()  const minute = date.getMinutes()  const second = date.getSeconds()
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')}
const formatNumber = n => {  n = n.toString()  return n[1] ? n : '0' + n}
module.exports = {  formatTime: formatTime}

// 获取指定权限
function getAuth(param) {    wx.getSetting({        success(res) {            if (res.authSetting[param.auth] == undefined || res.authSetting[param.auth] == true) {                param.success();            } else {                // 没有权限就提示去打开                wx.showModal({                    title: '提示',                    content: '需要手动打开' + param.text + '的权限',                    confirmText: '去打开',                    cancelText: '放弃',                    success(res) {                        if (res.confirm) {                            wx.openSetting({                                success(res) {                                    if (res.authSetting[param.auth] == true) {                                        param.success();                                    } else {                                        param.fail();                                    }                                }                            })                        } else if (res.cancel) {                            param.fail();                        }                    }                })            }        },        fail() {            param.fail();        },    })}module.exports = getAuth;