浅析如何使用微信js-sdk打开微信内置导航唤醒第三方导航

　　最近在搞vue项目需要在手机上唤醒第三方导航，在手机内置浏览器中打开都可以跳转至第三方高德、百度、腾讯这些导航app，唯独到了微信内置浏览器就唤醒不了，于是乎查询资料，最后发现微信内置浏览器，限制跳转第三方app，想要跳转只能使用微信提供的方法，这就用到了微信JSSDK。

一、准备工作

1、通过微信认证的公众号

2、有备案过的域名

3、先登录微信公众平台进入“公众号设置”的“功能设置”里填写“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 接口列表
});

　　签名算法可去官方签名算法，文档：https://developers.weixin.qq.com/doc/service/guide/h5/#62

　　注意：

1、签名用的 noncestr 和timestamp必须与 wx.config 中的 nonceStr 和timestamp相同。

2、签名用的 url 必须是调用 JS 接口页面的完整URL。（在当前页面打印’‘window.location.href’'就可看到完整url）

　　需要注意的是：在ios上，无论路由切换到哪个页面，实际真正有效的的签名url是【第一次进入应用时的URL】。所以在main.js获取当前url存储到本地存储localStorage中，在用到页面取出存储url即可。

3、出于安全考虑，开发者必须在服务器端实现签名的逻辑。（前端只给后端传url即可）

4、简易代码如下：

    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跳转第三方地图导航软件定位导航

　　非微信浏览器下

<van-action-sheet v-model="show" description="请选择已安装APP" :actions="actions" @select="onSelect" />

export default {
 data() {
      return {
          show:true,
          actions: [{id:1, name: '腾讯地图' }, {id:2, name: '百度地图' }, {id:3, name: '高德地图' }],
      };
  },
  methods: {
      //导航go
      onSelect(item){
          console.log(item);
          let longitude="导航地址经度",
                latitude="导航地址维度"
          let name ="导航地址名称";
          let url = "";
          const u = navigator.userAgent;
          const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
          const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') >-1;
          switch (item.id) {
          　　//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
             case 1:
             　　//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
             　　url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
                break;
             case 2:
                url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
                break;
            case 3:
　　　　　　　　　 // 分iOS和安卓
                url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
                break;
            default:
                break;
         }
         if (url != "") {
             window.open(url,"_blank")
         }
      }
  },
};