关于前端:前端学习总结经验分享项目经验分享过程

前言

来，和魔王哪吒总结一下，分享一下本人对 前端学习总结，教训分享，以及写过的我的项目教训分享过程。

如果感觉还不错的话，浏览的过程中，须要您：

• 点赞，分享，评论
• 有钱的捧个钱场，没钱的捧集体场

技术实际、读书笔记、编程技巧、随笔杂谈、原创翻译，漫谈本人人生感触

学习总结

hello，大家好，来给大家分享我的业余学习教训和日常学习教训。对于编码的学习，我认为基础知识和编程实际是最重要的。刚开始学习前端的时候，是将基础知识学习一遍，所用教材能够靠学校发的教材即可。根底学习过后，最重要的就是实际，能够一直做一些模拟网站，以及到最初本人设计网站等。

珍藏平时交换的信息：

• 技术学的再好，没有开发教训，和产品教训，是很难写出好的代码。因为写代码自身是带有目的性的，解决问题。
• 如果在校，学习程序很迷茫，是因为不晓得学这个用来干嘛，本身没有想做的货色，所以就很迷茫，不晓得学什么，为什么要学。
• 工作，要对一个产品理解到什么深度，代码就越强壮。
• 学习形式是有捷径的避开所有看不懂学习材料，找看的懂的，拿起一本材料或者网上找的材料，细度几分钟，看不懂间接找早别的材料
• 有可能能力未达到 所有看不懂 也有可能 材料自身形容 很难懂 更有可能 材料形容不适宜本人浏览习惯
• 优先 实现性能 再思考优化

那么你是否本人保持了呢？当你想要学习，拿起手机时，你会不会发现，你曾经人不知; 鬼不觉偏离了正规，从娱乐新闻到头版头条，微信 99+ 未读的音讯，你心里想的就是看一会儿，就看一会儿。后果人不知; 鬼不觉工夫过来了 10 分钟，半小时，1 小时溜走了。而后你开始烦躁，悔恨，自责，然而到了第二天，你又掉进了雷同的坑里。

你会不会也很纳闷，为什么我的自制力这么差，为什么有些货色让我骑虎难下，因为你曾经上瘾了，有个试验小白鼠遇到电流会规避，然而奇怪的景象产生了，小白鼠岂但没有规避，反而一次又一次的自我电击，通过发现，原来是试验中不小心把某地位弄错，刚好刺激了快感中枢的地位。所以，你兴许就像这小白鼠一样上了瘾。

一个假相是，科技巨头们在社交软件视频平台，网络游戏中精心安排了一个又一个沉迷的钩子，目标就是为了截取更多的用户，获取他们的更多工夫和金钱，咱们正在被一个算法和娱乐所包裹的电子海洛因中，但很多人却不自知，那么如何解脱上瘾的行为呢？

就是去理解让人沉迷于网络的钩子：

• 可望而不可即的迷人指标
• 无奈抵御无奈预知的踊跃反馈
• 渐进式的提高和改善的感觉
• 越来越艰难的工作须要解决，但暂未解决的紧张感

如，你公布了某音讯，你会去暗中察看，有没有人给我点赞，写文章，有没有人给我点赞，有没有人给我评论等等。（我很期待！！！）

其实你能够把这些钩子投入学习中，把学习当做趣味，降级打怪，一直晋升本人。

你的抉择

本人的人生本人抉择，你能够抉择一条简略的路，抉择沉迷在你的手机里，刷视频，打游戏，煲剧，毫不费力的播种大把大把的高兴，你也能够抉择一条更加艰巨的路，抉择自律，抉择提早慢走，抉择成长。

用你的右手做什么，由你本人决定

我的项目教训

上面钻研封装工具代码块：

权限管制等信息 auth.js

用来存储 localStorage 本地缓存的办法

// 操作用户 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);
 }
}

获取推荐人 id

export function setRecommend(value) {uni.setStorageSync('recommend', value);
 console.log('recommend', value);
}

export function getRecommend() {let recommend = uni.getStorageSync('recommend');
 return recommend;
}

如果你须要用来存储我的项目内应用的第三方 api key，能够创立 keys.js 文件：

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

export {txMapKey}

封装必不可少的领取性能：

创立文件 pay.js，代码如下：

微信公众号领取

// 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.js

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};

创立 util.js 文件：（工夫工具）

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};

store-index.js

创立 store-index.js

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

App.vue

vuex 治理登陆状态

<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>

main.js

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)
    })
}

app.vue

vuex 治理登录状态

<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>

main.js

import Vue from 'vue'
import App from './App'

// 引入 vuex
import store from './store'
import * as filters from './filters' // global filters
const msg = (title, duration=1500, mask=false, icon='none')=>{
    // 对立提醒不便全局批改
    if(Boolean(title) === false){return;}
    uni.showToast({
        title,
        duration,
        mask,
        icon
    });
}

// 把 vuex 定义成为全局组件
Vue.prototype.$store = store
Vue.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()

点餐零碎

成果动画：

main.js

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/>'
})

App.vue

<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>

router/index.js

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
    }
  ]
})

components 目录

components/detail.vue

<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>

components/home.vue

<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>

components/list.vue

<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>

components/pay.vue

<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>

js/store.js

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;}
    }
})

js/parabola.js

// JavaScript Document
var 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();}

// 引入依赖 jquery
import $ from "jquery";

// 输入 api
export default{parabola}

小程序

工夫 util.js

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}

权限治理 auth.js

// 获取指定权限

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;

举荐篇

浏览更多我本人写的文章内容：

1. 前端面试必备 ES6 全方位总结
2. 考前温习必备 MySQL 数据库（关系型数据库管理系统）
3. 长篇总结之 JavaScript，坚固前端根底
4. 学习总结之 HTML5 剑指前端（倡议珍藏，图文并茂）
5. 前端必学必会 - 多媒体 - 本地存储 - 浏览器与服务器的交互 - 通信性能
6. 【倡议????】记录一次 BAT 一线互联网公司前端 JavaScript 面试
7. Web 页面制作根底
8. 【思维导图】前端开发 - 坚固你的 JavaScript 常识体系
9. 【图文并茂，点赞珍藏哦！】重学坚固你的 Vuejs 常识体系
10. 【高能笔记】如何取得令人心动的前端 offer | 掘金技术征文
11. 11 期前端冲刺必备指南 - 执行上下文 / 作用域链 / 闭包 / 一等公民
12. 12 期前端冲刺必备指南 -HTTP/HTTPS/HTTP2/DNS/TCP/ 经典题
13. 13 期前端冲刺必备指南 -this/call/apply/bind（万字长文）
14. 14 期 - 连肝 7 个早晨，总结了计算机网络的知识点！（共 66 条）
15. 熬夜总结了“HTML5 画布”的知识点（共 10 条）
16. 16 期 - 熬夜 7 天，我总结了 JavaScript 与 ES 的 25 个重要知识点！
17. 17 期 - 什么是 MySQL 数据库？看这一篇干货文章就够了！
18. 18 期 - 后端逆袭，一份不可多得的 PHP 学习指南
19. 19 期 - 当你在百度搜寻关键字的时候，哪个网站会排在最后面？明天给大家科普一下“网站 SEO”

???? 掘金技术征文 | 双节特别篇

点关注，不迷路

好了各位，以上就是这篇文章的全部内容，能看到这里的人都是人才。我前面会不断更新技术相干的文章，如果感觉文章对你有用，欢送给个“赞”，也欢送分享，感激大家！！