vue项目中,使用微信js-sdk打开微信内置导航,唤醒第三方导航
最近在搞vue项目需要在手机上唤醒第三方导航,在手机内置浏览器中打开都可以跳转至第三方高德了,百度了,腾讯,这些导航app,唯独到了微信内置浏览器死活唤醒不了,于是乎各种百度,查询资料,最后发现微信内置浏览器,限制跳转第三方app,想要跳转只能使用微信提供的方法,这就用到了微信JSSDK;
一、准备工作
1.通过微信认证的公众号
2.有备案过的域名
二、开发须知
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
三、开始安装sdk
npm install weixin-js-sdk --save
安装完成后可在页面引入
import wx from 'weixin-js-sdk'
四、通过微信的config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的 JS 接口列表
});
签名算法可去官方签名算法
注意:
- 签名用的 noncestr 和timestamp必须与 wx.config 中的 nonceStr 和timestamp相同。
- 签名用的 url 必须是调用 JS 接口页面的完整URL。(在当前页面打印’‘window.location.href’'就可看到完整url)在ios上,无论路由切换到哪个页面,实际真正有效的的签名url是【第一次进入应用时的URL】。所以在main.js获取当前url存储到本地存储localStorage中,在用到页面取出存储url即可。
判断在ios,安卓,微信中
const u = window.navigator.userAgent
isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios
isWx = u.indexOf('MicroMessenger') !== -1 //微信内置浏览器
isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // 安卓
- 出于安全考虑,开发者必须在服务器端实现签名的逻辑。(前端只给后端传url即可)
附上代码
搜了好多文档都说url是location.href.split(‘#’)[0],实际开发中我并未使用#号之前的,可能微信提供的接口会自动处理,也可能是传到后端;后端进行了处理,实际情况大家可以自己试试
const u = window.navigator.userAgent
created(){
// 判断是否是微信内置浏览器
if(u.indexOf('MicroMessenger') !== -1){
this.setWxConfig()
}
},
methods:{
// 注册微信地图
setWxConfig(){ // 此方法楼主在created中调用
let url =''
if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ // 判断是否在ios中
url = localStorage.getItem('你在main.js中保存的url')
}else{
url = location.href
}
getSignature(url).then((res)=>{ // getSignature后端接口
if(res.code===0){
wx.config({
debug: false, // 开启调试模式,
appId: '', // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp:res.data.timeStamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名,见附录1
jsApiList: ["openLocation"], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
}
})
},
// 打开唤醒地图
toMap(val){ // val 处理过后的点位坐标
if(u.indexOf('MicroMessenger') !== -1){ //判断是否在微信内置浏览器
wx.openLocation({
latitude: parseFloat(val.gaodePoints.lat), // 纬度,浮点数,范围为90 ~ -90
longitude: parseFloat(val.gaodePoints.lng), // 经度,浮点数,范围为180 ~ -180。
name: val.name, // 位置名
address: val.address, // 地址详情说明
scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
})
}else{
this.points = val
this.show=true // 打开组件选择需要打开第三方
}
},
}
如果不是在微信浏览器中打开(也就是楼主的toMap中的else)可参考这篇文章VUE_vue跳转第三方导航软件导航