问题描述:
ios在微信浏览器中,vue history模式下 路由跳转后,调用微信sdk相关调用api不生效,但在该页面刷新后又恢复正常;
Android一切正常!
原因:
主要问题是ios在路由切换时 微信SPA始终都是首次进入时的URL地址,Android微信SPA则是同步路由切换时的地址
举例:
从首页进入 http://028h5.cn/?i=xxxxxxxxxx 点击跳转到 http://028h5.cn/order?i=xxxxxxxxxx
此时
ios微信SPA的地址 http://028h5.cn/?i=xxxxxxxxxx
Android微信SPA的地址 http://028h5.cn/order?i=xxxxxxxxxx
解决:
import wx from 'weixin-js-sdk'
let signLink;
// 切换路由
router.afterEach((to, from, next) => {
// 如果是ios环境
if( isIOS() ){
// 记录进入app时的url
if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
window.entryUrl = location.href.split('#')[0]
}
// 将http://028h5.cn/?i=xxxxxxxxxx 转为http://028h5.cn/index?i=xxxxxxxxxx
if( window.entryUrl.indexOf('/?') != -1 ){
window.entryUrl = window.entryUrl.split('/?')[0]+'/index?'+window.entryUrl.split('/?')[1]
}
// 进行签名的时候 Android 不用使用之前的链接, ios 需要
signLink = /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;
}
else{
signLink = window.location.origin + to.fullPath
}
http.ajax('/ffkj-main/api/share/friend',{
url: signLink
},'get',{}).then(res=>{
if( res.code == 0 && res.data ){
wx.config({
debug: false, //调试模式
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: [
'hideMenuItems',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'checkJsApi',
'openLocation',
'getLocation',
'chooseImage',
'openAddress'
]
});
}
})
})
// 调用微信收货地址
function fnOpenAddress(fn){
wx.ready(function () {
wx.openAddress({
success: function (res) {
fn(res)
},
cancel: function (res) {
// alert('用户取消拉出地址');
},
fail: function (res) {
Toast('拉取用户收货地址失败,请填写当前页面收货信息')
}
});
})
}
Vue.prototype.fnOpenAddress = fnOpenAddress
// 门店地址
function fnOpenLocation(item){
wx.ready(function () {
wx.openLocation({
latitude: parseFloat(item.latitude), //经纬度必须为浮点数,否则ios端会失效
longitude: parseFloat(item.longitude), //经纬度必须为浮点数,否则ios端会失效
name: item.title,
address: item.address,
scale: 14,
infoUrl: 'http://weixin.qq.com'
});
})
}
Vue.prototype.fnOpenLocation = fnOpenLocation
// 获取地理位置接口
function fnGetLocation(success){
wx.ready(function () {
wx.getLocation({
type: 'gcj02', //默认wgs84,gcj02更精准定位
success: function (res) {
success(res)
},
cancel: function (res) {
store.commit('setLoading',false)
Toast('你也可以点击"所在地区"选择哦~')
},
fail: function (res) {
// alert(JSON.stringify(res));
Toast('获取用户位置失败,也可以点击"所在地区"选择哦~')
}
});
})
}