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

前言

来，和魔王哪吒总结一下，分享一下自己对前端学习总结，经验分享，以及写过的项目经验分享过程。

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

点赞，分享，评论
有钱的捧个钱场，没钱的捧个人场

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

学习总结

hello，大家好，来给大家分享我的专业学习经验和日常学习经验。对于编码的学习，我认为基础知识和编程实践是最重要的。刚开始学习前端的时候，是将基础知识学习一遍，所用教材可以靠学校发的教材即可。基础学习过后，最重要的就是实践，可以不断做一些模仿网站，以及到最后自己设计网站等。

收藏平时交流的信息：

技术学的再好，没有开发经验，和产品经验，是很难写出好的代码。因为写代码本身是带有目的性的，解决问题。
如果在校，学习程序很迷茫，是因为不知道学这个用来干嘛，自身没有想做的东西，所以就很迷茫，不知道学什么，为什么要学。
工作，要对一个产品了解到什么深度，代码就越健壮。
学习方式是有捷径的避开所有看不懂学习资料，找看的懂的，拿起一本资料或者网上找的资料，细度几分钟，看不懂直接找早别的资料
有可能能力未达到所有看不懂也有可能资料本身描述很难懂更有可能资料描述不适合自己阅读习惯
优先实现功能再考虑优化

那么你是否自己坚持了呢？当你想要学习，拿起手机时，你会不会发现，你已经不知不觉偏离了正轨，从娱乐新闻到头版头条，微信99+未读的消息，你心里想的就是看一会儿，就看一会儿。结果不知不觉时间过去了10分钟，半小时，1小时溜走了。然后你开始焦躁，后悔，自责，但是到了第二天，你又掉进了相同的坑里。

你会不会也很纳闷，为什么我的自制力这么差，为什么有些东西让我欲罢不能，因为你已经上瘾了，有个实验小白鼠遇到电流会躲避，但是奇怪的现象发生了，小白鼠不但没有躲避，反而一次又一次的自我电击，经过发现，原来是实验中不小心把某位置弄错，刚好刺激了快感中枢的位置。所以，你也许就像这小白鼠一样上了瘾。

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

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

可望而不可即的诱人目标
无法抵挡无法预知的积极反馈
渐进式的进步和改善的感觉
越来越困难的任务需要解决，但暂未解决的紧张感

如，你发布了某消息，你会去暗中观察，有没有人给我点赞，写文章，有没有人给我点赞，有没有人给我评论等等。（我很期待！！！）

其实你可以把这些钩子投入学习中，把学习当做兴趣，升级打怪，不断提升自己。

你的选择

自己的人生自己选择，你可以选择一条简单的路，选择沉迷在你的手机里，刷视频，打游戏，煲剧，毫不费力的收获大把大把的快乐，你也可以选择一条更加艰难的路，选择自律，选择延迟慢走，选择成长。

用你的右手做什么，由你自己决定

项目经验

下面研究封装工具代码块：

权限控制等信息auth.js

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

// 操作用户tokenexport 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' // 腾讯地图的keyexport {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 = falseObject.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，只能用jqueryimport $ 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.goodsthis.goods_cls = msg.data.goods_cls;//存入storethis.$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;//清空所有菜品checkedfor(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)//offsetif($(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 = [];},//购物车adds_add(item) {item.num++;},//购物车subs_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(''))； //空字符串 返回：0if(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() + 1const 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;