Vue2 全家桶与微信开发

标签： dev | 发表时间：2017-03-15 08:00 | 作者：
出处：http://itindex.net/admin/pagedetail

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

Vue2全家桶与微信开发

阅读需知

技术选型

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

注意

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

实现过程

技术点

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

登陆逻辑流程图

此处输入图片的描述

关键技术点

授权登陆网址

      
1
      
2
 
      
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的共同作用

      
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
 
      
importstorefrom'../../store'//从根目录中引入store
      
      
exportdefault[
      
{
      
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篇文章

  1. axios全攻略
  2. Vuex2和Axios的配合

基本设置

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
 
      
/*
      
*  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
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9
      
10
      
11
      
12
      
13
      
14
      
15
      
16
      
17
      
18
 
      
/*
      
*  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})
      
)
      
returnconfig
      
},(error) =>{
      
Vue.$vux.toast.show({text:'非法输入',type:'text',time:1000})
      
returnPromise.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
 
      
/*
      
*  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})
      
returnPromise.reject(res)
      
}
      
returnres;
      
}, (error) => {
      
if(error.response){
      
switch(error.response.status){
      
case401:
      
window.location.href =`http://${window.document.location.host}/?#/login/`
      
break
      
default:
      
Vue.$vux.toast.show({text:'网络异常',type:'text',time:1000})
      
}
      
}
      
returnPromise.reject(error)
      
})

页面合法性检查

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

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

检测是否授权登陆

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

      
1
      
2
      
3
      
4
      
5
      
6
      
7
 
      
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后，会跳转到登陆注册页面。

微信支付的坑

在遇到这个问题时困扰了好久，然后这篇博文 开发单页应用(SPA)时候遇到的微信支付授权目录的坑给了我指导，在此感谢作者

路由模式

前端技术选型用的vuejs+vue-router，vue-router使用hashbang模式（使用hashbang也是为了避免微信jssdk的wx.config签名的坑）。在调用微信支付的时候(IOS)遇到提示”URL未注册”，这通常是因为没有在微信支付后台正确配置授权目录的问题，但是我遇到并不是这个。
我在调试的时候发现唤起微信支付时，IOS内打印日志中的URL和实际中的URL不一样安卓却是好的，我不知道是不是微信的BUG。后来在网上搜寻答案，发现是下面这个问题：

问题原因

首先把当前页面叫做 Current Page。当我们从微信别的地方点击链接呼出微信浏览器时所落在的页面、或者点击微信浏览器的刷新按钮时所刷新的页面，我们叫做 Landing Page。
举个例子，我们从任何地方点击链接进入页面A，然后依次浏览到B、C、D，那么Current Page就是D，而Landing Page是A，如果此时我们在D页面点击一下浏览器的刷新按钮，那么Landing Page就变成了D（以上均是在单页应用的环境下，即以hashbang模式通过js更改浏览器路径，直接href跳转的不算）。

问题来了，在iOS和安卓下呼出微信支付的时候，微信支付判断当前路径的规则分别是：

IOS：Landing Page
安卓：Current Page

这就意味着，在ios环境下，任何一个页面都有可能成为支付页面（因为我无法预知和控制用户在哪个页面点微信浏览器的刷新按钮，或是用户通过哪个连接从外部进入到系统）。

解决

      
1
      
2
      
3
      
4
 
      
3个页面用到微信支付：
      
http://example.com/#/cart/index
      
http://example.com/#/order/orderlist
      
http://example.com/#/order/orderinfo

上述的3个链接根本不行啊，因为微信授权目录必须配置到最后一级目录，配置在根目录不行。

将所有的路由#前加了一个？，于是微信浏览器妥妥的把井号“#”后面的内容给去掉了 

       
1
       
2
       
3
       
4
 
       
原来路由链接：
       
http://example.com/#/cart/index
       
现在路由链接：
       
http://example.com/?#/cart/index

我们只要将授权目录设置到根目录 http://example.com/即可

结尾

相关 [vue2 全家 微信] 推荐：

Vue2 全家桶与微信开发

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

GitHub - bailicangdu/vue2-elm: 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

- -
初学vue时曾在网上搜索vue的实战项目源码，无奈大部分都是简单的demo，对于深究vue没有太大的帮助，剩下的一些大部分都是像音乐播放器之类的展示型项目，交互没有预期那么复杂. 但我们实际在工作中，经常会遇到有购物车的项目，这类项目因为涉及到money，所以对逻辑严谨度要求高，页面之间交互复杂，又会伴随着登录、注册、用户信息等等，常常会让我们很头疼.

Vue2.x 的双向绑定原理及实现

- - SegmentFault 最新的文章
Vue 是利用的 Object.defineProperty()方法进行的数据劫持，利用 set、get 来检测数据的读写. MVVM 框架主要包含两个方面，数据变化更新视图，视图变化更新数据. 视图变化更新数据，如果是像 input 这种标签，可以使用 oninput 事件... 数据变化更新视图可以使用 Object.definProperty()的 set 方法可以检测数据变化，当数据改变就会触发这个函数，然后更新视图.

微信的价值

- - 钛媒体TMTpost—把脉科技资本论
昨天，微信正式发布了4.5版. 在我看来，这个新版本释放出了两个关键的信号，第一个是微信只做底层的平台，具体的应用会开放给第三方来做，第二个是微信公众账号未来的形态，一定不是简单的对话，而是类似app的形态. 首先，我们看到微信把保存公众账号文章这个功能，开放给了“我的印象笔记”. 这是一个非常基础性的功能，微信完全可以自己来做，而且自己做从客户体验角度来讲，也会最方便，但是它把它开放了.

微信是什么？

- - 《商业价值》杂志
一个移动互联网时代全民都在参与回答的问题. 2012年12月，丁香园CTO、知名互联网评论人冯大辉在推出不久的微信公众平台上创建并运营自己的公众号一段时间之后，说了一句让人印象深刻的话，“对话即服务，对话即搜索”. “微信一定会蚕食搜索引擎的市场……搜索本质上也是服务，天气、旅游、购物、股票……皆可拓展.

微信是鸡肋？

- - 月光博客
　　 微信是一款跨平台的通讯工具，作为腾讯最为倚重和寄予厚望的产品，承载着腾讯移动互联网称霸之梦. 本文希望透过微信，加深对社会化媒体与移动互联网的理解，概述微信在社会化媒体及移动互联网的角色定位. 　　我们可以用微信与好友一对一聊天，具有私密性强，快捷便利的特点，这是微信的一个基本功能. 陌陌，微博私信，QQ等都可以具有这样的功能，显然这形成不了微信的核心竞争力.

微信在东南亚推“WeChat GO 微信乐游卡”，聊微信免流量

- - PingWest品玩
PingWest 品玩 9 月 8 日报道，微信与新加坡第二大电信运营商 StarHub（星和电信）合作，推出一款名为“WeChat GO 微信乐游卡”的电话卡产品. “微信乐游卡”用户在境内可以免流量使用微信，同时提供 7 天和 12 天两种套餐，定价分别为 16 新元和 32 新元. 前者提供 7GB 定额流量和 1GB 高速可漫游流量，500 分钟本地通话时长以及 60 分钟直拨主叫中国大陆通话时长；12 天套餐提供 15GB 定额流量，2.4GB 高速可漫游流量，3000 分钟本地通话时长和 150 分钟主叫中国大陆通话时长.

微信架构的启示

- - Tim[后端技术]
腾讯大讲堂中最近分享了周颢演讲的 微信技术总监解读微信架构的秘密，看完视频的一些心得. 微信的技术设计上有很多微创新，看起来都很小，但是对于系统的稳定性、用户体验及开发敏捷都具有重要作用. 由于客户端升级不便，从技术设计上尽量利用后端的设计来减少依赖客户端升级的方法. 如某个版本新增了群聊功能，按常规思路，需要所有客户端升级才能全部打通.

「微信」没有未来

- - Page to Page
不管从软件的界面、交互和速度那一个单点上来说超过微信的同类应用都能数出好几个，不过因为它的出身好，占着QQ用户群这个庞大的资源，所以不用它还不行，不用就完全脱离了群众. 曾经的Msn已经远去，Gtalk也清冷了，因为时不时还要接收一下QQ离线消息，不情不愿也要用上微信，不喜欢它繁杂的功能集成，只能选择关闭的仅剩QQ离线消息.