详解Vue微信公众号开发踩坑全记录_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-11 02:53:01 点击率：次

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

需求

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

现状及难点

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

解决方案

授权登录

授权流程如下：

详细说明：

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

踩坑记录：

以下是一个错误授权方案

这个方案为什么错误呢？其实如果只实现授权登录到话，这个方案是可以的，而且也很清晰，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

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

# Vue微信公众号 # Vue微信公众号开发 # Vue微信公众号网页分享的示例代码 # 使用vue完成微信公众号网页小记(推荐) # 使用vue编写h5公众号跳转小程序的实现代码 # Vue开发Html5微信公众号的步骤 # vue中使用微信公众号js-sdk踩坑记录 # vue项目使用微信公众号支付总结及遇到的坑 # Vue.js 实现微信公众号菜单编辑器功能(二) # Vue.js 实现微信公众号菜单编辑器功能(一) # vue 做移动端微信公众号采坑经验记录 # 巧用Vue.js+Vuex制作专门收藏微信公众号的app # 如何使用vue开发公众号网页 # 服务端 # 客户端 # 回调 # 带了 # 深坑 # 用户登录 # 模式下 # 跳转到 # 的是 # 都是 # 是一个 # 第一个 # 也没 # 耍流氓 # 两种 # 不多 # 中有 # 这个问题 # 这两个 # 不上

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Linux下的Docker容器网络：如何设置容器间的网络连接

下一篇：如何使用 Gemini 优化 Python 在云端运行的效率

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Linux下的Docker容器网络：如何设置容器间的网络连接

下一篇：如何使用 Gemini 优化 Python 在云端运行的效率