- 路由启用 hash 模式,hash 务必是 “#”,如:http://example.com/wx/#/home/index
- 涉及微信支付的应用部署目录务必是二级或三级,建议通过修改 Nginx、Apache 配置重写 url 实现,或者修改 webpack 的配置实现
- 新建一个页面用于微信授权登录,如:在根目录 static 文件夹下新建 auth.html(所有需要进入 SPA 应用的 url 地址都要通过该页面进行跳转,如:微信分享,菜单)
- 涉及调用 jsapi 的页面都得重新配置 wx.config
- Nginx,防止使用
window.location.href
进行页面跳转被浏览器缓存
add_header "Cache-Control" "no-cache, private";
- 从分享链接或微信公众号菜单进入 http://example.com/wx/#/home/index 页面,流程图如下:
- 方法一
安装
npm install weixin-js-sdk --save
# or
yarn add weixin-js-sdk
使用
import wx from 'weixin-js-sdk'
- 方法二
在入口 html 文件引入微信的 js-sdk 文件,webpack 配置参考:http://webpack.github.io/docs/library-and-externals.html
在切换页面路由之后需在 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)
}
通过微信菜单或微信分享访问 SPA 应用需先访问授权登录页面(如先访问:http://example.com/static/auth.html ),在授权登录页面设置 token 等信息后再跳回到 index.html 文件所在的根目录下(如:http://example.com/wx/ ),然后利用 SPA 应用路由的钩子跳转到实际要访问的地址。
授权登录页面参考:auth.html
分享的 url 务必是 http://example.com/static/auth.html?redirect_uri={SPA应用部署的地址}&full_path={访问的路由} ,redirect_uri 对应 SPA 应用部署的地址,如:http://example.com/wx/ ;full_path 对应访问的路由,如:/product 或 /product?page=1,这两个参数都需要通过 encodeURIComponent 转码
参考代码如下:
import wx from 'weixin-js-sdk'
import axios from 'axios'
const $_wechat = () => {
// wx.config配置
const config = () => {
return new Promise((resolve, reject) => {
// 获取服务端微信配置信息
axios.get('http://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)
})
}, () => {
reject('配置wx.config失败')
})
})
}
// 分享配置
const share = ({
title,
desc,
fullPath,
imgUrl
}) => {
let link = `http://example.com/static/auth.html` +
`?redirect_uri=${encodeURIComponent(window.location.href.split('#')[0])}` +
`&full_path=${encodeURIComponent(fullPath)}`
wx.onMenuShareTimeline({
title,
link,
imgUrl,
success () {},
cancel () {}
})
wx.onMenuShareAppMessage({
title,
desc,
link,
imgUrl,
success () {},
cancel () {}
})
}
return {
config,
share
}
}
// 调用分享
$_wechat().config().then(res => {
$_wechat().share({ // 配置分享
title: 'wechat-spa',
desc: 'Wechat SPA',
fullPath: '/home/index',
imgUrl: 'https://www.baidu.com/img/bd_logo1.png'
})
}, err => {
console.warn(err)
})
造成支付失败的原因:iOS 识别支付安全目录路径规则是进入 SPA 应用的第一个页面所对应的 url,举个例子:
这样我们要配置很多的安全目录路径,但微信平台仅允许设置3个安全目录路径,直接进入 SPA 应用的页面是行不通的
解决思路: 我们进入 SPA 应用的第一个页面都是 http://example.com/wx/ 然后通过 SPA 应用路由钩子重定向到自己想要访问的页面。
微信支付后立即跳转到其他页面有一定几率出现白屏(长按屏幕可以复制出文字或图片地址),解决方案:
// 延迟跳转即可解决
setTimeout(() => {
window.location.replace('/pay/success') // 跳转逻辑
}, 500)
注:微信内置浏览器的 bug
- 路由不要使用 history 模式
内容有误请反馈给我,谢谢
有什么问题可以加我好友,大家一起交流
QQ:465353876