微信小程序学习（mpvue框架）

# 介绍

mpvue （github 地址请参见 ）是一个使用 Vue.js 开发小程序的前端框架。 框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现， 使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验

# 名称由来

• mp：mini program 的缩写
• mpvue：Vue.js in mini program

# 主要特性

使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

• 彻底的组件化开发能力：提高代码复用性
• 完整的 Vue.js 开发体验
• 方便的 Vuex 数据管理方案：方便构建复杂应用
• 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
• 支持使用 npm 外部依赖
• 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
• H5 代码转换编译成小程序目标代码的能力

其它特性正在等着你去探索，详细文档 。

# 初始化一个 mpvue 项目

现代前端开发框架和环境都是需要 Node.js 的，如果没有的话，请先下载 nodejs 并安装。

然后打开命令行工具：

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli@2.9

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

复制

随着运行成功的回显之后，可以看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。

# 基于mpvue框架的微信小程序

# 页面需要文件介绍

# .vue文件

1. <template> => 原生小程序的 .wxml
2. <script> => 原生小程序的 .js
3. <style> => 原生小程序的 .wxss 其中style中加入lang="stylus" rel="stylesheet/stylus"，需要下载安装stylus：

npm install stylus stylus-loader

1

复制

示例：

<template>
  <div>
  
  </div>
</template>

<script>
  export default {

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

复制

# main.js文件

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

// 关闭Vue开发中的一些提示
Vue.prototype.productionTip = false

// 声明当前的组件为整个应用，只需写在注册整个小程序的文件中
App.mpType = 'app'

// 生成当前应用的实例
const app = new Vue(App)

// 挂载当前应用的实例
app.$mount()

1 2 3 4 5 6 7 8 9 10 11 12 13 14

复制

# .json文件

和原生小程序中的json文件一样

# src源文件

# 自动打包后的dist文件

# 注意事项

1. 在每个组件中都需要使用： 组件实例.$mount() 去挂载当前组件,否则对应的页面不能生效
2. npm run dev 每次会重新打包dist文件，测试只能在小程序工具上
3. mpvue中绑定小程序原生事件不能使用bind + 事件名，需要使用@事件名 且要定义在methods中否则不生效
4. 新创建的页面需要重新执行: npm run dev才能将新的页面打包到dist文件中

# vue实例声明周期 && 小程序声明周期

# vue实例声明周期

1. beforeCreate 实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
2. created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
3. beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
5. beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
6. updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
7. beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

# 小程序应用App实例声明周期

1. onLaunch: 小程序应用初始化
2. onShow: 小程序启动获取后台进入前台
3. onHide: 小程序应用从前台进入后台

# 小程序页面Page实例生命周期

1. onLoad: 监听页面加载
2. onShow: 页面显示
3. onReady: 监听页面初始化渲染完成
4. onHide: 监听页面隐藏，注意当前页面实例依然存活
5. onUnload: 监听页面卸载
6. onPullDownRefresh: 监听用户下载动作
7. onReachBottom: 监听用户上拉触底操作
8. onShareAppMessage: 用户点击右上角分享功能
9. onPageScroll: 页面滚动
10. onTabItemTap： 当前是 tab 页时，点击 tab 时触发

# 注意事项

除了 Vue 本身的生命周期外，mpvue 还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page， 除特殊情况外，不建议使用小程序的生命周期钩子。

# mpvue中使用vue-router && axios

# vue-router

1. 在mpvue中对vue-router的支持不好,问题较多
2. 进行页面跳转的是可使用小程序提供的API
   1. wx.navigateTo() 保留当前页面，可回退
   2. wx.redirectTo() 不保留，不能回退
   3. wx.switchTab() 使用于tabBar页面

# axios

1. 小程序中不支持使用axios，会报错：XMLHttpRequest is not a constructor
2. 原因: 小程序的环境和浏览器的环境不一样
3. 解决方法: 使用其他库: flyio

# fly使用教程

# gitHub地址

https://github.com/wendux/fly

# 使用步骤

1. 下载: npm install flyio
2. 引入: import Fly from ‘flyio/dist/npm/wx’ 注意flyio支持很多环境下使用
3. 生成实例: let fly = new Fly
4. 配置: Vue.prototype.$fly = fly
5. 使用: 组件中 this.$fly.get()

# mpvue VS 小程序 状态管理

# 原生小程序

1. 在data中初始化状态数据
2. 修改状态: this.setData({key: value})
3. 页面公共状态：
   • App程序实例的data中定义
   • 获取状态数据: let datas = getApp()
   • 修改状态数据: datas.data.xxx = value
4. 或者利用storage本地存储

# Mpvue

1. 在组件中通过getApp无法拿到对应的数据
2. mpvue中支持vuex，所以可以使用vuex集中管理状态
3. vuex几个重要的概念:
   • store对象
   • dispatch() 分发状态
   • actions 携带参与修改状态的数据，并触发mutations
   • mutations用于修改状态，并将状态交给store对象
   • getter 用于动态计算状态

# 原生小程序 VS mpvue 对比总结

1. 原生小程序运行更稳定些, 兼容性好，mpvue可能在某些方面存在兼容性问题（vue-router）
2. mpvue支持vue组件化开发. 效率更高，功能更强大(双向数据绑定, vuex)
3. mpvue可基于webpack组件化, 工程化开发
4. 原生不支持npm安装包，不支持css预处理
5. 支持 computed 计算属性和 watcher 监听器；模板语法中只支持简单的 js 表达式。可以直接写 div 、span 等标签 computed 的写法
6. 之前会vue的工程师上手mpvue框架的成本较低

# 有用的东西

# 封装ajax请求功能函数

封装：

//config.js:
//export default {
//  host: 'http://localhost:3000'
//}

import config from './config'

// 携带token的方式：
// 1. cookie（不推荐）
// 2. 作为参数放在url中（常用）
// 3. 放在请求头（最常用）

let token = wx.getStorageSync('token');//后面验证用户使用

export default function (url, data={}, method='GET') {
  return new Promise((resolve, reject) =>{
    wx.request({
      url: config.host + url,
      data,
      method,
      header:{
        authorization: token
      },
      success: (res) => {
        resolve(res.data)
      },
      fail: (error) => {
        reject(error)
      }
    })
  })
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

复制

调用示例：

async function(){
	let result = await request('/url', data)
}

1 2 3

复制

# 获取用户唯一标识openId

# 图解：

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

登录流程时序：

说明：

1. 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
2. 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

注意：

1. 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。 为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。
2. 临时登录凭证 code 只能使用一次

# 示例

App.vue:

async mounted(){
	wx.login({
	  success: async (res) => {
		 // 1. 获取用户登录的临时凭证，和用户是否授权没有直接关系，有效时长：5分钟
		 let code = res.code
		 // 2. 发送code给服务器端
		 let token = await request('/getOpenId', {code})
		 // 3. 将自定义登录状态缓存到storage中
		 wx.setStorageSync('token', token)
	  }
	})

	// 测试地址token
	let result = await request('/test')
	console.log('验证结果：', result)
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

复制

server.js:

// 获取用户openId的接口
router.get('/getOpenId', async (ctx, next) => {
  // 1.获取请求的参数
  let code = ctx.query.code;
  let appId = 'your appId';
  let appSecret = 'your appSecret';
  // 2.根据请求的地址和参数处理数据
  let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`;
  // 发送请求给微信接口，获取openId
  let result = await fly.get(url);
  let userInfo = JSON.parse(result.data);

  // 将用户的openId存入数据库，openId:{userName: 'xx', money: 'yyy'}

  // 自定义登录状态，就是根据用户的openId和sessionKey进行加密生成token，返回给前端
  // 对openId和sessionKey进行加密，自定义登录状态
  let token = jwt.sign(userInfo, 'swzj');
  // console.log(token);
  // 3.响应数据
  ctx.body = token;
});

// 测试验证身份token的接口
router.get('/test', (ctx, next) => {
  // 获取token的值
  // console.log(ctx.request.header.authorization);
  let token = ctx.request.header.authorization;

  //iat:加密时的时间

  let result;

  try {
    result = jwt.verify(token, 'swzj');
    ctx.body = '验证成功'
  }catch (e) {
    ctx.body = '验证失败'
  }
});

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

复制

其中服务器使用的是koa

基本配置server.js：

// 搭建服务器的核心文件

let Koa = require('koa');
let KoaRouter = require('koa-router');
let Fly = require("flyio/src/node");//异步请求
let jwt = require('jsonwebtoken');//跨域认证

let fly = new Fly;

// 1.生成应用及路由器实例
const app = new Koa();
const router = new KoaRouter();

// 核心代码
router.get('/', (ctx, next) => {
  // 1.获取请求的参数

  // 2.根据请求的地址和参数处理数据

  // 3.响应数据
  ctx.body = '服务器返回的数据';
});

// 2.使用路由器及路由
app
  .use(router.routes()) // 声明使用路由
  .use(router.allowedMethods()) // 允许使用路由的方法

// 3.监听端口
app.listen('3000', () => {
  console.log('服务器启动成功');
  console.log('服务器地址： http://localhost:3000');
})

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

复制

其中使用到了 JSON Web Token(JWT) 来验证用户信息