H5 移动端 钉钉微应用 调用微信内置地图

实现逻辑: 我是钉钉微应用，有直接分享好友的链接
生成一个链接分享到微信好友，然后在微信调用微信的内置地图。

引入 微信的 JSSDK 我是外链
引入外链需要注意 你的项目当前环境是 https 还是 http

	// https
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

	// http
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

通过调用后台接口获取微信签名

wx.config 中的配置中的数据都是从后台获取的数据

    const getWechatJSSDK = async () => {
      if (showType.value === 'skip') { // 业务逻辑
        const { data: res } = await ApiTemplate.getWechatJSSDK({ url: window.location.href }) // 调用后台的接口 拿到微信的签名
        if (res.code === 0) {
          // @ts-ignore
          wx.config({ // wx 是 微信 的 JSSDK 我用的是外链
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature,// 必填，签名
            jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表
          });
        } else {
          Toast.fail(`加载微信jssdk失败:${res.msg}`)
        }
      } else {
        // Toast.fail('预览模式不进行跳转')
        console.log('type 非 skip')
      }
    }

打开微信的内置地图

核心方法就是 wx.openLocation({}) 方法

    const navigation = (str: string) => {
      try {
        if (showType.value === 'skip') { // 业务逻辑
          if (is_weixn()) { // 判断是否是 微信内置浏览器
            // @ts-ignore
            wx.openLocation({
              // longitude: 77.944922, // 经度，浮点数，范围为180 ~ -180。
              // latitude: 55.157555, // 纬度，浮点数，范围为90 ~ -90
              // address: 'xxx市xxx区xxx路', // 地址详情说明
              name: '微信地图', // 位置名
              scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大
              infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
            });
          } else {
            Toast.fail('请在微信打开')
          }
        } else {
          Toast.fail('预览模式不进行跳转')
        }
      } catch (error: any) {
        console.log(error, '----------地图报错')
      }
    }

判断是否是微信的内置浏览器

    const is_weixn = () => {
      const ua: any = navigator.userAgent.toLowerCase();
      // @ts-ignore
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
          return true;
      } else {
          return false;
      }
    }  

最核心的内容就是 两个 wx.config 配置和 wx.openLocation 方法