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 接口列表
});

签名算法可去官方签名算法
注意：

1. 签名用的 noncestr 和timestamp必须与 wx.config 中的 nonceStr 和timestamp相同。
2. 签名用的 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 // 安卓

3. 出于安全考虑，开发者必须在服务器端实现签名的逻辑。（前端只给后端传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跳转第三方导航软件导航