最近用vue框架做微信H5分享(以下是分享给好友),模式采用的history,遇到不少的坑,总结一下花费时间比较久的两个。一个是android下分享正常但iOS下分享不正常,另一个是分享后再分享,两种情况都碰到了签名问题("invalid signature")。
产生问题的原因是android手机和iOS对vue SPA地址的处理不一样。进入页面后,android的URL会保持不变,iOS会对地址进行处理,可以用微信的复制链接看到区别,iOS当前的显示地址为第一次进入时候的地址。
首次进入的URL | 需要分享的地址 | android复制的URL | iOS复制的URL |
http://www.abc.com | http://www.abc.com/list | http://www.abc.com/list | http://www.abc.com |
如果上面的地址分享后,微信会在分享地址后增加参数
分享的URL | 分享后打开的URL-android | 分享后打开的URL-iOS |
http://www.abc.com/list | http://www.abc.com/list?from=singlemessage | http://www.abc.com/list?isappinstalled=0 |
iOS在进入页面时,可以把进入时的URL记录在App.Vue里,我采用的是vuex,App.vue代码如下:
export default { name: 'app', data() { return { // app_data: '' } }, mounted() { this.$store.store.commit('setIphoneShareUrl', encodeURIComponent(location.href.split('#')[0])) } }
vuex的代码
const store = new Vuex.Store({
state: {
iphoneShareUrl: ''
},
mutations:{
setIphoneShareUrl: (state,value) => state.iphoneShareUrl = value
}
})
export default {
store
}
如果是点击分享页进入的,vue会先加载list所在的vue,而不是App.vue,所以需要在list.vue里面加入setIphoneShareUrl,在list.vue的代码如下:
initWx() { //用于分享 let param = new URLSearchParams(); let url = location.href.split('#')[0] if (window.__wxjs_is_wkwebview) {//判断是否是iOS //如果有isappinstalled就是分享的,那就直接取当前的URL,如果不是分享的就用App.vue里面记录的 if (typeof this.$route.query.isappinstalled== 'undefined') { url = this.$store.store.state.iphoneShareUrl } } param.append("shareUrl", encodeURIComponent(url)) axios.post(this.PAY_URL + '/wxconfig', param).then((res) => { if (res.data.code == 0 && typeof res.data.result != "undefined") { let dt = res.data.result; wx.config({ debug: false, // 开启调试模式, appId: dt.appid, // 必填,企业号的唯一标识,此处填写企业号corpid timestamp: dt.timestamp, // 必填,生成签名的时间戳 nonceStr: dt.nonceStr, // 必填,生成签名的随机串 signature: dt.signature,// 必填,签名,见附录1 jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] }); } }) },
。。。。。。。。。。。。。。。
另外如果要在分享后获取当前用户信息,可以在进入界面的时候做一次window.location.href的跳转,先访问微信的authorize地址(如果有多个参数,需要先用encodeURIComponent转码),list.vue代码如下:
mounted() {
if (typeof this.$route.query.from != 'undefined' || typeof this.$route.query.isappinstalled != 'undefined') {//为了获取分享后用户的个人信息需要先跳转到open.weixin.qq.com
let param = ''
let c = 0//循环获取URL中的参数,并转码
for (let k of Object.keys(this.$route.query)) {
if (c != 0) {
param += "&"
}
if (k == 'from' || k=='isappinstalled') {
continue
}
param += (k + "=" + this.$route.query[k])
c++
}
param = encodeURIComponent(param)
let url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己的appid&redirect_uri=https://www.abc.com/list?" + param + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
window.location.href = url
}//此处可以访问获取微信用户信息的方法
。。。。。。
this.initWx()}
以上就是大概的问题处理,如果有问题可以私信