vue在微信里面的兼容问题_详解Vue微信公众号开发踩坑全记录
本文介绍了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微信公众号开发踩坑记录
需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中 ...
- 微信公众号开发---踩坑日记
现在开始学习微信公众号开发,所以会记录我在这个过程中遇到的坑点和新手对于微信文档理解不清的问题. 1.微信上面的操作都是采用接口的形式开发 在这里面难免会对微信开发存在不理解,因为公众号开发的具体修改 ...
- vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
- 微信公众号开发踩坑指南(3)——公众号返回超链接点击跳转并自动关闭
前段时间产品提了一个听起来很奇葩的需求,其实做起来也感觉很奇葩. 公众号在触发某些事件后,返回给用户具体的文案回复,但这个文案回复需要带超链接的,在用户点击超链接之后做一些CURD操作并改变改用户的状 ...
- vue快速修改数组的某个值_详解vue组件三大核心概念
前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
- (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班
(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班 从零到壹全栈部落 产品:个人独立博客,21点见 Vue + Node + MongoDB支持服务端渲染的博客系统(5天) 开发环境技术 ...
- vue遇到ie兼容问题如何处理_详解vue 兼容IE报错解决方案
IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set. ...
- vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
- vue调用手机相机相册_详解Vue调用手机相机和相册以及上传
组件 选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}} javaScript代码 export default { name: "cam ...
最新文章
- 真正的中台价值,「炒作」之后才被看见
- 国庆七天乐 Day5
- oracle将查询结果声明为伪表,Oracle查询操作(增删改查,伪表,高级查询)实例讲解...
- 记录一次,事务遇到消息发送,疏忽给自己挖坑
- Java 写时复制容器 —— CopyOnWriteArrayList
- WebUtils-网络请求工具类
- Firefox 中文语言包安装方法
- Gym 10102B 贪心
- html制作调色板,JS实现系统调色板
- mysql怎么创建blog_「MySQL创建与删除数据库」- 海风纷飞Blog
- AWS实战:AWS Kinesis Data Firehose
- (一)一文掌握flink性能优化:资源配置调优
- 胡阳pyhton作业题--20150725
- 金蝶cloud后台数据库表说明
- 使用fiddler获取ios手机接口
- 软考系统集成项目管理工程师视频教程(下)-乔俊峰-专题视频课程
- linux 解压zip大文件(解决乱码问题)
- Broadcast使用场景解读
- 又要花钱上系统了,为什么公司的系统总是“德不配位”
- 重装win10纯净版操作系统
热门文章
- 支持鸿蒙系统的手机名单,鸿蒙系统支持名单曝光,有你的手机吗?
- 学习Java——代理
- 类似于京东的地址选择器
- php全局变量作用域,thinkphp定义全局变量
- 水滴屏全屏适配方法(华为Mate20手机)
- linux gcc ldl,Makefile 中gcc -lm -ldl是什么意思?
- CentOS6.9编译安装Sphinx并使用php7的sphinx扩展实现全文搜索
- 【树莓派C语言开发】实验07:倾斜开关模块
- 绝地求生魔改键位v4.0
- Codeforces Round #483 (Div. 2)题解