Vue SPA应用微信开发踩坑记录

解决难点

JS-SDK需要向服务端获取签名，且获取签名中需要的参数包括所在页面的网址，但由于单页应用的路由特殊，其中涉及到的iOS和Android的微信客户端浏览器内核的差异性导致的兼容问题

JS-SDK签名

官网所述的是

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

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

请观察如下表格：

注意history模式下的IOS设备坑点

浅坑 - 微信分享

如果使用hash模式，分享出去的地址，微信会自动处理掉＃后边的部分，会干扰对hash的正常解析，从而影响页面跳转。

例如我的分享链接为

var shareUrl = 'https://www.xxx.com/#/product?id=7'

安卓显示正常

var shareUrl = 'https://www.xxx.com/#/product?id=7'

但是在IOS中，页面的URl后的值被截取掉了，页面因为无法获取值而无法显示

var shareUrl = 'https://www.xxx.com/?from=timeline#/product?id=7'

解决方案

检测分享页是否有场景值，有就干掉重新加载页面
static文件夹下新建一个中间页，中间页过滤掉没用的URL参数，再跳回分享页

Vue SPA应用微信开发踩坑记录相关推荐

微信vue路由跳转兼容_Vue微信公众号开发踩坑记录
需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中 ...
微信开发踩坑系列一之Native支付
微信开发踩坑系列一之Native支付 1.前言 1.1.文章说明 1.2.微信支付简介 1.3.项目技术栈 2.Native支付开发 2.1.官方描述 2.2.两种模式介绍 2.3.开发前准备工作 2 ...
微信开发踩坑之旅之开发准备及服务器配置
在工作和兴趣的机缘巧合之下,我开始接触微信开发.在这里简单记述自己的微信开发踩坑之旅. 首先,由于本人标准的理工科生,记述的语言有所不足,我尽量说明准确和详细点. 本文记述主线 ·申请公众号 ·公众号 ...
乐视体感摄像头开发踩坑记录
乐视三合一体感相机开发踩坑记录第一次用Cmake,以下如有错误请大佬指正开发环境: Linux ARM(树莓派4) AstraSDK-v2.1.3 Arm/Arm64(https://orbbec ...
微信签名验证踩坑记录1
@ 微信签名验证踩坑记录1 H5页面打开小程序的签名验证算法,我碰到个问题有点奇葩,不过也算是自己吸取个教训. 在H5页面打开小程序需要调用jssdk签名.这里有个URL是前端传过来的参数,这时候要 ...
uniapp 开发踩坑记录
使用dcloud 的 uniapp开发了一个app,把遇到的问题总结一下: 1.uniapp 前端的布局代码与小程序高度相似(如果没有接触过建议多看看文档):js是用的vue 布局比较简单,比jq ...
Flutter 开发踩坑记录（干货总结）
Flutter 太好学了!BUG 真的太少了!issues 只有 5000 多!也就那么亿点!简单得我都枯了!毕竟每次遇到问题,???????? 都是直接去找群里的法佬.低调.Alex 等几位大佬(? ...
2020年开发踩坑记录
20200207 mybatis plus 自带insert插入异常 sql injection violation 解决方法: 使用逆向工程脚本时,生成的映射实体类在下面的注解会多table: 删除 ...
uniapp聊天页nvue开发踩坑记录
由于前段时间开发出来的vue版本的聊天页,性能.用户体验等方面十分不尽人意,故开启了新的征途,nvue版本聊天页的开发. 痛点一.进入页面保持在最底部这次重构nvue版本的聊天页,使用了标新立异的渲 ...

Vue SPA应用微信开发踩坑记录

解决难点

JS-SDK签名

浅坑 - 微信分享

Vue SPA应用微信开发踩坑记录相关推荐

最新文章

热门文章