Vue2全家桶与微信商城开发全过程（1）

微信开发 Vue

项目背景

此项目本身有一个APP了，为了方便将APP和微信端数据打通，需要用户微信和APP用户绑定。
在开发的过程中单页面的模式在微信JS API的配置踩了很多坑，特别是IOS。由于本人表述能力和篇幅有限Orz，
这里只介绍关键的实现步骤和代码，有些安全的地方和路由地方处理当时比较暴力没有细化，还望交流指导。

阅读需知

• 默认您已经了解了微信授权登陆、微信JS API配置及微信支付的整体流程微信帮助文档
• Vue2.0（Vue、VueRouter、Vuex）全家桶基本知识，能熟悉70%以上的API
• Axios（Http请求组件）的基础知识（若不熟悉的可以看笔者的这2篇文章axios全攻略,Vuex2和Axios的配合）

技术选型

• 移动前端Vue组件库Vux
• Vue、VueRouter、VuexVue三件套
• 路由和Vuex同步组件Vuex-router-sync

VueRouter选用的是Hash模式，避免每次都需要去注册WxConfig

注意

1、有些页面比如下单页面是不能分享的，在JS API内要配置该页面分享的是一个可以通过访问的页面如系统首页
2、该系统主要是在微信中应用的，在授权登录时，授权登陆页面会判断是否是微信内核（不得不说这节省了我一大笔开发，没有权限的时候直接往这跳就好了。简单暴力）
3、每个关键点都能引申很多的知识，这里篇幅有限，不在详细介绍

实现过程

技术点

1. 用户授权登陆，服务端从授权页面获取到OpenId（加密处理过的）后打开一个特定的URL（前端提供功能保存OPENID，回跳）,此页面从URL上取到URL在保存在Store中。
2. 分享出去的页面最好都配授权页面登陆页面，在授权登陆页面的URL上可以配置自己需要回跳的页面，方便服务端有针对性的二次跳转。
3. 接口返回状态码若为401，则表示没有权限，在Axios内跳转到登陆页面
4. 若检测到系统内没有OpenId则跳转到授权登陆页面（防止有人把URL复制出去分享在微信中打开报错）

登陆逻辑流程图

关键技术点

授权登陆网址

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf565864b6a1a358d&
redirect_uri=http%3a%2f%2fpeifei.xxxx.com%2fnoa%2ftoken%3fpage%3dhttp%3a%2f%2fpeifei.xxx.com/index&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

网址需要实现的功能：
- 获得OPENID传给前端(后端实现)
- 授权登陆后能跳转到想去的页面（后端跳转后前端路由控制）

从URL上获取OPENID

vue-router和vuex的共同作用

import store from '../../store'     //从根目录中引入store
export default [
  {
    path: '/', 
    component:R_INDEX,
    children: [
      {
        path: 'index/',
        redirect:'/'
      }
    ]
  },
  {
    //服务端一律跳转到这个URL上
    path: '/home/:id/:redirectUrl/', redirect: to => {
      /**
      * 通过dispatch触发保存openid的action
      * 将URL上的OPENID保存到store中
      */
      store.dispatch({
        type: 'setOpenId',
        amount: to.params.id
      })
      //在回跳到需要来访的正确页面
      return `/${to.params.redirectUrl}/`
    }
  }
]

接口的处理

axios、vuex的使用结合
此部分需要Promise和Axios的知识，若不熟悉请参阅笔者这2篇文章
axios全攻略,Vuex2和Axios的配合

基本设置

/* 
*  1.超时处理
*  2.post设置
*  3.开发环境与正式环境的区别
*/
axios.defaults.timeout = 5000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.baseURL =  (process.env.NODE_ENV == 'development' ? 'http://192.168.1.15:8080/' : 'http://www.xxxx.com/')

全局请求处理

/* 
*  1.请求拦截，全局增加token
*  2.post设置
*/
axios.interceptors.request.use((config) => {
  if(config.method  === 'post' || config.method  === 'put' ){
    //这里使用了qs这个库去序列化数据
    config.data = qs.parse(config.data,{arrayFormat:'brackets'})
  }
  //全局追加openid
  config.params = (
      Object.assign((config.params ? config.params : {}),{"SESSION":store.state.common.openid})
  )
  return config
},(error) =>{
  Vue.$vux.toast.show({text: '非法输入',type:'text',time:1000})
  return Promise.reject(error)
})

全局接收处理

/* 
*  1.正确请求接口后，接口内返回的code若不为20000（前后端接口的规定），则表示是错误的参数
*  2.若接口报错，并且报错的http状态码为401（前后端接口的规定）则表示用户没有该接口的权限，
*  跳转到登陆页面
*/
axios.interceptors.response.use((res) =>{
  if(res.data.code != '20000'){
    Vue.$vux.toast.show({text:res.data.message,type:'text',time:1000})
    return Promise.reject(res)
  }
  return res;
}, (error) => {
  if(error.response){
    switch (error.response.status){
      case 401:
        window.location.href = `http://${window.document.location.host}/?#/login/`
        break
      default:
        Vue.$vux.toast.show({text:'网络异常',type:'text',time:1000})
    }
  }
  return Promise.reject(error)
})

页面合法性检查

因为整套环境都是由前端去控制页面路由，这里有很多地方需要我们去做权限的验证完善程序的健壮性，这对前端的考验很大。
虽然分享出去的页面处理比较暴力都是授权的链接，还是担心有人会复制URL出去在微信中打开所以需要做以下处理。

1. 验证是否在微信端
2. store中是否存在openid，是否授权登陆后的进来的
3. 无权限操作的页面应该能返回正确的地方

检测是否授权登陆

我将授权登陆后的openid存在了store中，所以每次进行路由跳转的时候我只要检测store中是否存在openid若不存在则直接跳转到授权登录页面，授权登陆后服务端判断此openid是否存在，若存在则跳转到来访页面，不存在则跳转到login页面。

router.beforeEach((to, from, next) => {
  if(store.state.common.openId){
    next();
  }else{
    window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf565864b6a1a358d&redirect_uri=http%3a%2f%2fpeifei.qmant.com%2fnoa%2ftoken%3fpage%3dhttp%3a%2f%2fpeifei.qmant.com/index&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect"
  }
})

是否在微信端

授权登陆页面会检测，若不在微信端会提示如下。

无权限页面

后端openid进行检测，若是无效的或者不对的openid会在请求接口的时候返回401，接口接收到401后，会跳转到登陆注册页面。

keep-alive的合理应用

这里真是踩了无数的坑，试过了很多方案总结了一套适合自己使用的方式
其实这个地方的应用可以写一篇文章介绍，先埋下伏笔吧，有空去完善。这里只介绍概要

keep-alive是什么

微信支付的坑