微信端单页面应用（SPA）常见问题汇总及解决方案
非常重要：
路由启用 hash 模式，hash 务必是 #，如：https://example.com/#/home/index
采用 history 模式，页面路由改变后无法复制出改变后的 URL 地址
参数使用 ? 的形式获取，如：https://example.com/#/product/detail?id=1
不采用
?的形式获取参数则需要配置很多支付安全目录
新建一个页面用于获取 wechat_openid、token 等操作，用户第一次进入 SPA 项目后的都需要跳转到 auth.html 页面，如：在根目录 static 文件夹下新建 auth.html，微信授权时序图
解决需要配置很多支付安全目录的问题（网上很多资料都说在支付页面添加
?，如：https://example.com/?#/payment/index?order_id=1，这样会使路由很混乱，我不建议你采用添加?的形式去解决支付问题）
Nginx 配置
add_header "Cache-Control" "no-cache, private";
解决 window.location.href 跳转页面被浏览器缓存的问题
涉及调用 JS-SDK 的页面都得重新配置 wx.config()
你懂的～
微信授权时序图：
is_auth：is_auth 存在说明已经经过 auth.html 页面跳转
安装和使用微信 JS-SDK
方法 1 (推荐)
在入口 index.html 文件引入微信的 JS-SDK 文件，webpack 配置参考：中文 / English
index.html
<script src="//res.wx.qq.com/open/js/jweixin-1.2.2.js"></script>webpack.config.js
externals: {
wx: 'wx'
}如何使用：
import wx from 'wx'
wx.ready(() => {
console.log('Hello Wechat!')
})方法 2
如何安装：
yarn add weixin-js-sdk
# 或
npm install weixin-js-sdk --save如何使用：
import wx from 'weixin-js-sdk'
wx.ready(() => {
console.log('Hello Wechat!')
})标题更新
在切换页面路由之后需在 body 里面添加 iframe，随后移除掉 iframe 即可，代码如下
// iPhone，iPod，iPad 下无法更新标题
if (/ip(hone|od|ad)/i.test(window.navigator.userAgent)) {
let iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = '/favicon.ico'
iframe.onload = () => {
setTimeout(() => {
iframe.remove()
}, 10)
}
document.body.appendChild(iframe)
}微信分享
- 分享配置都正确，进入链接后页面显示不对
解决方案： 在分享的地址后面添加一个随机字符串，如：https://example.com/#/product/detail?id=1&share_at=${Date.now()}
微信分享参考代码：
import wx from 'wx'
import axios from 'axios'
const share = ({
title,
desc,
fullPath,
imgUrl
}) => {
let link = fullPath.indexOf('?') > -1
? `https://example.com/#${fullPath}&share_at=${Date.now()}`
: `https://example.com/#${fullPath}?share_at=${Date.now()}`
wx.showAllNonBaseMenuItem()
wx.onMenuShareTimeline({
title,
link,
imgUrl
})
wx.onMenuShareAppMessage({
title,
desc,
link,
imgUrl
})
}
const $_wechat = () => {
return new Promise((resolve, reject) => {
// 获取服务端微信配置信息
axios.get('https://api.example.com/v1/wechat/config', {
params: {
url: window.location.href.split('#')[0]
}
}).then(res => {
wx.config({
debug: false,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
})
wx.ready(() => { // 配置 wx.config 成功
resolve({
wx,
share
})
})
}).catch(() => {
reject(new Error('微信签名接口异常'))
})
})
}
// 调用分享
$_wechat().then(res => {
res.share({ // 配置分享
title: 'wechat-spa',
desc: 'Wechat SPA',
fullPath: '/home/index',
imgUrl: 'https://www.baidu.com/img/bd_logo1.png'
})
}).catch(_ => {
console.warn(_.message)
})微信支付
- 支付安全目录，iOS 识别支付安全目录路径规则是进入 SPA 应用的第一个页面所对应的 URL
这样我们要配置很多的安全目录路径，但微信平台仅允许设置3个安全目录路径，直接进入 SPA 应用的页面是行不通的
解决思路： 用户都得先进入 SPA 应用的根目录 https://example.com/，然后通过 SPA 应用路由提供的钩子重定向到自己想要访问的页面，微信授权时序图
白屏
微信支付后立即跳转到其他页面有一定几率出现白屏（长按屏幕可以复制出文字或图片地址），解决方案：
// 延迟跳转即可解决
setTimeout(() => {
window.location.replace('/payment/success') // 跳转逻辑
}, 500)微信内置浏览器的 bug，图片无法批量上传也可以通过
setTimeout方法解决
问题反馈
如内容有误请反馈给我，谢谢
有什么问题可以加我好友，大家一起交流
QQ：465353876