大团结

微信小程序（天使童装）

移动端 （每时每课）

PC端（后台管理系统）

为期近俩月学习锻炼了这三个项目 从零碎到完整，有懵逼也有欣慰，更多的是收获 这里做个总结：

1. 微信小程序全程挠头，（微信小程序专用开发工具 :微信开发者工具 ）BUG套BUG ，因为是第一次学习，开发的时候一直很小心翼翼，说白了就是让BUG给整怕了。好在它的语言思路和Vue差不多，一路虽然是磕磕绊绊但也是顶住压力走了下来 。这里贴一下微信小程序官方api说明文档：https://developers.weixin.qq.com/miniprogram/dev/api/

虽然菜的一匹但还是要在这里把小程序常用的语法总结总结o…O

微信小程序的生命周期[函数]

• ① 全局生命周期函数
  本质就是事件, 微信小程序某个阶段自动触发的事件
  onLaunch: 小程序初始化结束调用(一次)
  onShow: 启动, 后者从后台进入前台
  onHide: 当小程序从前台进入后台时
  onError: 当小程序发生脚本错误或api调用失败时
• ② 局部生命周期函数(各个组件都有)
  onLoad : 页面加载
  onReady: 初次渲染完成
  onShow: 页面显示
  onHide: 页面隐藏
  onUnload: 页面卸载
  onPullDownRefresh: 下拉动作
  onReachBottom: 上拉触底[加载更多数据]

微信小程序指令
1.数据绑定: {{}}
注意:
① 花括号
② 不能直接 checked=“false” -> checked="{{false}}"
2.列表渲染: wx:for
< view wx:for="{{array}}">{{item}}< /view>
注意:
① 小程序中for中数组每个默认关键字 item
② wx:key 主要功能: 提高渲染排序效率
< view wx:for="{{array}}" wx:key=“id”>{{item}}< /view>
#id 是item中的一个属性
#index 是item的下标
3.判断语句
< view wx:if="{{msg === 0}}">优秀< /view>
微信数据请求
wx.request({
url: ‘http://127.0.0.1:3000/list’, //请求地址
data: {id: 1}, // 请求参数
method: “GET”, // 请求方式
dataType: “json”, // 返回数据类型
success: function (res) { // 成功后执行
this.datas = res.data
},
fail: function (err) { //失败后执行
},
complete: function (res) { // 成功失败都执行
}
})

在请求返回时如何保存 data
(1) 不能直接保存
(2) 小城提供其他方法[更新数据]

微信小程序的ajax请求
通过ajax获取图片数据不能正常显示
给图片添加属性: lazy - onLoad

微信小程序的事件(重点)
什么是事件

1. 事件是视图层到逻辑层的通讯方式。
2. 事件可以将用户的行为反馈到逻辑层进行处理。
3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
4. 事件对象可以携带额外信息，如 id, dataset, touches。
   使用:
   (1) 冒泡事件
   < view bindtap=“show” data-index=“10”>点击< /view> // 按下操作
   参数不能加括号不能加参数
   function show(event) {
   event.target.dataset.index
   }
   (2) 阻止冒泡事件
   < view catchtap=“show”>点击< /view>
   (3) 冒泡事件列表:
   touchstart 手指触摸动作开始
   touchmove 手指触摸后移动
   touchcancel 手指触摸动作被打断，如来电提醒，弹窗
   touchend 手指触摸动作结束
   tap 手指触摸后马上离开
   longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
   longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
   transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
   animationstart 会在一个 WXSS animation 动画开始时触发
   animationiteration 会在一个 WXSS animation 一次迭代结束时触发
   animationend 会在一个 WXSS animation 动画完成时触发
   touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发
   非冒泡事件:
   除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件
   如< form/>的submit事件，< input/>的input事件，< scroll-view/>的scroll事件

2. 每时每课 （vue/cli 4.5.3）, 虽说不能驾轻就熟但整体也能琢磨透，开发时碰到的问题也不少，大多都是请教同事和搜索引擎帮忙解决。难点在于看懂和理清 API 接口文档里面的 请求路径，请求方法，请求参数，响应参数，响应数据，还有登录验证接口。只要把这些整明白 相当于成功了一半。在一个就是登陆：这是块难啃的骨头，几乎每个vue项目里都会有登录鉴权功能，我整理一个通用的登录鉴权功能模板。
   通常一个vue项目中与登录鉴权功能有关的部分（文件）有：
   Login 组件（Login.vue）
   store（store.js）
   router（router.js）
   axios拦截（http-interceptors.js）
   Login 组件
   　　登录成功后做本地存储和store存储，并进行跳转。
   Login.vue关键代码：
   async handleLogin(e) {
   e.preventDefault();
   // 获取登录表单值
   let parmas = {
   username: this.model.username,
   passwold: this.model.passwold
   };
   // 发送登录异步请求，获取结果集
   const res = await this.$ http.get("/api/login", parmas);
   const { code, token, massage } = res.data;
   //code==‘0’表示登录成功，进行本地存储和store存储 并进行跳转。
   //else 弹出错误提示
   if (code == “0”) {
   this.$ store.commit(“setToken”, res.data.token);
   localStorage.setItem(“token”, token);
   //如果是由需要鉴权的页面跳转到登录页面 则redirect= this.$ route.query.redirect，如果是直接点击登录跳转到登录页面，则redirect= ‘/’
   const redirect = this.$ route.query.redirect || “/”;
   this.$ router.push(redirect);
   } else {
   const toast = this.$createToast({
   time: 2000,
   txt: massage || “登录失败”,
   type: “error”
   });
   toast.show();
   }
   }
   store
   　　在Login组件里登录时token做了数据持久化处理，防止页面刷新丢失token。给store里的token赋初值的时候要取localStorage里的token。
   store.js关键代码：
   import Vue from ‘vue’
   import Vuex from ‘vuex’
   Vue.use(Vuex)
   export default new Vuex.Store({
   state: {
   //token数据持久化，防止页面刷新丢失
   token: localStorage.getItem(‘token’) || ‘’
   },
   mutations: {
   setToken(state, token) {
   state.token = token
   }
   },
   actions: {
   },
   getters: {
   //根据token是否存在，设置计算属性isLogin
   isLogin(state) {
   return !!state.token
   }
   }
   })
   route
   　　routes[]里用 mate.auth来标识是否需要鉴权。router.beforeEach做个全局路由守卫，根据是否需要鉴权以及是否已经登录来进行不同操作。
   router.js代码：
   import Vue from ‘vue’
   import Router from ‘vue-router’
   import Home from ‘./views/Home.vue’
   import Login from ‘./views/Login.vue’;
   import About from ‘./views/About.vue’
   import store from ‘./store’;
   Vue.use(Router)
   const router = new Router({
   mode: ‘history’,
   base: process.env.BASE_URL,
   routes: [
   {
   path: ‘/’,
   name: ‘home’,
   component: Home
   },
   {
   path: ‘/login’,
   name: ‘login’,
   component: Login
   },
   {
   path: ‘/about’,
   name: ‘about’,
   meta: { auth: true },//about需要做登录鉴权
   component: () => import(’./views/About.vue’)
   }
   ]
   })
   axios拦截
   　　axios.interceptors.request.use拦截axios所有http请求，如果存在token，则放入请求头。axios.interceptors.response.use拦截的axios的响应，如果token以及失效，则清除本地缓存和store存储并跳转到登录页面。
   http-interceptors.js代码：
   // 拦截axios所有http请求，预先放入token请求头
   axios.interceptors.request.use(config => {
   if (store.state.token) {
   // 若存在token，则放入请求头
   config.headers.token = store.state.token;
   }
   return config;
   });
   // 响应拦截器，提前预处理响应
   axios.interceptors.response.use(
   response => {
   // 如果code是-1，说明用户已注销或者token已过期
   // 此时需要重新登录，并且还要清除本地缓存信息和store数据
   if (response.status == 200) {
   const data = response.data;
   if (data.code == -1) {
   logoutFun()
   }
   }
   return response;
   },
   err => {
   if (err.response.status === 401) { // 未授权
   logoutFun()
   }
   }
   );
   function logoutFun() {
   // 清空本地缓存的token和store里的token
   store.commit(“setToken”, “”);
   localStorage.removeItem(“token”);
   // 跳转至登录页，并携带用户退出时或token失效时的页面路由，方便登录后直接跳转到此页面。
   router.push({
   path: “/login”,
   query: {
   redirect: router.currentRoute.path
   }
   });
   }
   服务端中间件
   　　服务端也需要做请求处理的中间件。如果请求不是req.path不是’/api/login’并且没有携带token,则返回错误状态码401（错误状态码前后端约定好）。我们在vue.config.js里模拟后台接口’/api/login’
   vue.config.js关键代码：
   import axios from “axios”;
   import store from “./store”;
   import router from “./router”;
   app.use((req, res, next) => {
   //只对api开头的请求做拦截处理
   if (/^/api/.test(req.path)) {
   if (req.path == ‘/api/login’ || req.headers.token) {
   next();
   } else {
   //设置错误状态码为401
   res.sendStatus(‘401’)
   next();
   }
   } else {
   next();
   }
   })
   这里只是把登陆这块贴一下 其实开发的时候还碰到了其他问题还有关键常用技术 比如：搜索 收藏 视频 … 我其他博客都有写到 这里就不在重复了。

3. 后台管理（vue/cli 4.5.3）有了每时每课的开发经验 开发后台容易了很多 主要还是 对API文档要足够的了解，还有运用了很多插件比如：

• vue-table-with-tree-grid树形表格
• echarts图表
• 富文本编辑器vue-quill-editor
• 轻量级进度条NProgress
  …
  因为依赖 一款很人性化的第三方组件Element-ui开发所以要对他要足够熟悉，不然在开发的过程中会有很多不必要的坎要过。
  在这个项目中优化了很多地方：比如
  组件的封装，代码简洁，但是不易看懂，因为element-ui本身里面的代码就很复杂，要是封装了的话，串不到一块，要是对自己的代码不够熟悉，那就很头疼了，但是高端啊…哈哈
  处理时间戳过滤器
  路由懒加载
  封装接口
  顾客就是上帝

还有很多BUG等着我去解决，还有很多技术等着我去学习，加油！