详解Vue微信公众号开发踩坑全记录

本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记。

需求

  • 微信授权登录(基于公众号的登录方案)
  • 接入JS-SDK实现图片上传,分享等功能

现状及难点

  • 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端
  • JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题

解决方案

授权登录

授权流程如下:

详细说明:

  1. 用户访问网站主域名
  2. vue客户端(domain/)接收请求,在路由解析前判断用户是否登录(比如检查cookie);
  3. 如果没有登录,则通过api获取微信授权地址,获取后跳转到微信服务端授权页面;
  4. 用户确认授权,微信服务器发起回调请求,这时需要回调到服务器端(domain/api/xxx)
  5. 服务器端保存用户信息,进行注册登录操作(记录cookie),重定向到vue客户端(domain/)
  6. 重复第一步,授权登录成功

踩坑记录:

以下是一个错误授权方案

这个方案为什么错误呢?其实如果只实现授权登录到话,这个方案是可以的,而且也很清晰,vue客户端单方面在服务器和微信服务器之间进行通信,微信服务器不能直接和服务器通信。这种方案的坑在于当微信授权回调时会携带一个code参数,该参数会污染vue路由导致ios上进行JS-SDK签名时失败(后续会具体描述这个问题)

JS-SDK签名

对于签名,官方是这么说的

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用

vue中路由有history和hash两种模式;在history模式下,理想的设计方案是,当进入到需要用到JS-SDK组件时,获取以下当前url(也就是通过 location.href.split(‘#')[0]获得到的地址)传递到服务端进行签名,应该就没问题了,但是IOS获取的url并不是调用微信js的时候所在页面的地址,而是进入到网站第一个页面的地址。

网上查询到一个方案是针对ios设备进入页面时先将当前url记录下来,到授权页面时将记录的url传递给服务端进行签名。该方案经实践是可行的,妈妈再也不用担心我的网址很丑很难看啦。

另外一个方案就是使用hash模式,这种模式下,url永远都只是主域名地址,省去了传递url的烦恼,也没必要处理兼容,所以如果不建议路由中有#的话,该方案应该是首选方案。

这里还有一个深坑,那就是如果授权方案采用了上述中的vue客户端处理回调的方式,那么ios将永远无法签名成功,为什么呢,因为这种方案路由通常是这样子的:

http://domain.com/?code=xxxxxx&stat=#/xxx

这种路由中带了参数的url是没法签名校验成功的!
这种路由中带了参数的url是没法签名校验成功的!
这种路由中带了参数的url是没法签名校验成功的!
重要的事情得说三遍啊

Coding

任何不上代码的吹逼都是耍流氓,这里笔者分享下在vue中具体怎么coding的。

微信授权登录

笔者在项目中使用的vue-router进行路由控制,使用了vuex记录用户登录信息,但是由于vuex中存储的内容在页面刷新后会丢失,所以服务端同时也写了用户登录状态到cookie中,vue中需要通过这两个条件进行登录判断,不多BB,直接看代码吧

// ... other code

router.beforeEach((to, from, next) => {
 if ((!VueCookie.get('user') && !store.state.userInfo)) {
  // 第一次访问
  console.log('授权登录')
  // 跳转到微信授权页面,微信授权地址通过服务端获得
  axios.post('/api/login').then(res => {
   var data = res.data
   if (data.code === 100) {
    window.location.href = data.data
   }
  })
 } else if (!store.state.userInfo) {
  // 刷新页面,获取数据存入vuex
  axios.get('/api/currentuser').then(res => {
   if (res.data.code === 100) {
    store.dispatch('setUserInfo', res.data.data)
    next()
   }
  })
  console.log('cookie生效期内登录')
  next()
 } else {
  // 已经登录
  console.log('已登录')
  next()
 }
})

//... other code

history模式下的JS-SDK签名

在入口文件中将当前url存入vuex

// ... other code
router.beforeEach((to, from, next) => {
 document.title = to.meta.title
 // 处理jssdk签名,兼容history模式
 if (!store.state.url) {
  store.commit('setUrl', document.URL)
 }
 // ... other code

在需要获取签名的组件中获取并进行配置

// ... other code
created () {
   var sef = this
   var url = ''
   // 判断是否是ios微信浏览器
   if (window.__wxjs_is_wkwebview === true) {
    url = this.$store.state.url.split('#')[0]
   } else {
    url = window.location.href.split('#')[0]
   }
   this.$http.get('/api/jssdk?url=' + url).then(function (res) {
    sef.lists = res.data.data
    hmTools.wechact(sef.lists, sef) //js-sdk配置
   })
  }
// ...other code

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-08-20

巧用Vue.js+Vuex制作专门收藏微信公众号的app

本文一步一步教大家如何利用Vue.js + Vuex制作专门收藏微信公众号的app 项目地址: https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && npm install npm run dev   // run in dev mode cd backend-serv

vue中使用微信公众号js-sdk踩坑记录

最近又在vue中捣鼓了下微信公众号api的接入,不得不说这里边水是真的深啊,上次分享了微信授权登录和js-sdk签名的部分,其中很多朋友私信我表示了疑惑,今天我就再次尝试理顺一下这里边的坑吧: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 分享页面到朋友圈 上文是从官方文档

Vue.js 中制作自定义选择组件的代码附演示demo

定制 select 标签的设计非常困难.有时候,如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本,那是不可能的.在本文中,你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件. Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd HTML <template> <div class="custom-select" :tabindex=&

Vue.js 实现微信公众号菜单编辑器功能(一)

学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"&g

Vue.js 实现微信公众号菜单编辑器功能(二)

Vue.js 实现微信公众号菜单编辑器功能(一)上一篇菜单的点击和添加菜单功能已经在模版实现了,接下来实现菜单的编辑功能 实现菜单删除方法 在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来删除. methods: { //删除菜单 delMenu:function(){ //删除主菜单 if(this.selectedMenuLevel()==1&&confirm('删除后菜单下设置的子菜单也将被删除')){ if(this.selectedMenuIndex===0){ thi

使用vue完成微信公众号网页小记(推荐)

前言: 公司最近有一个H5页面的功能,比较简单的一个调查表功能,嵌套在我们微信公众号里面.选用的技术栈是Vue.同时用到了微信的登录和分享接口.ps:本人小白,如果有问题希望大家能指出来,写文章不止是为了记录,还是为了发现自己的问题.谢谢大噶!!! 主要功能以及遇到的问题: 左右切换动画 路由带参数跳转 移动端引入外部字体样式 使用htmtl2canvas截图功能 使用微信接口(前端部分) 移动端屏幕适配 移动端点击一个页面点击多次只执行一次问题 ios使用输入框的时键盘弹起来掩盖住按钮问题 打

vue项目使用微信公众号支付总结及遇到的坑

微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = data console.log('微信支付开始请求') if (wechat) { wx.chooseWXPay({ timestamp: state.payObject.timeStamp, // 支付签名时间戳 nonceStr: state.payObject.nonceStr, // 支付签

vue 做移动端微信公众号采坑经验记录

自己用vue做微信公众号项目有一段时间了,遇到各种奇葩的问题,下面细数那些坑: 第一坑:微信分享导致安卓手机无法调起相册和无法调起微信充值 解决方案: setTimeout(_ => { wx.config(sdkConfig) }, 500) 需要将微信分享延迟500毫秒,这样就解决了安卓手机无法调用相册和微信充值的问题,如果用了微信分享需要加个延迟. 第二坑:部分手机第三方输入法会将页面网上挤的问题 解决方案: // 特定需求页面,比如评论页面,输入框在顶部之类的 const interva

Vue微信公众号网页分享的示例代码

前言 今天做了个分享功能,反正挺诡异的,下面就来说一说步骤 后端使用egg.js,代码如下: 'use strict'; const Subscription = require('egg').Subscription; class AccessToken extends Subscription { static get schedule() { return { interval: '2h',//2小时获取一次 type: 'all', }; } async subscribe() { co