在小程序webview使用微信JSSDK -- 初始化配置和获取定位例子Vue

最近接到一个需求，在我们现有的小程序上添加一个地图选点功能，这个功能需要定位当前位置，因为是在微信小程序的 webview 中，所以我引入了微信 JSSDK 中的 getLocation 方法。这里我主要说一下JSSDK的初始化流程以及一些自己遇到的问题，还有以getLocation方法举一个实际使用的例子。

微信JSSDK介绍

微信 JS-SDK 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

准备工作：初始化JSSDK

步骤一：绑定域名

首先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

这一步是绑定你需要使用的H5链接。

步骤二：引入JS文件

// 这里我就只展示通过yarn引入的方式
yarn add weixin-js-sdk

// 在你所需页面的代码里导入
import wx from "weixin-js-sdk";

Copy

步骤三：通过 config 接口注入权限验证配置

// 配置说明
wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
  appId: '', // 必填，公众号的唯一标识，一般在h5中接口会返回appId
  // --- 以下3个入参需要从接口获取 ---
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  // -------
  jsApiList: ["getLocation"] // 必填，需要使用的 JS 接口列表，此处我只使用了一个方法
});

Copy

上面代码里比较难理解的是nonceStr、 signature，官网的解释比较多，我贴出参考的文档地址让大家更好的理解：config入参说明入口、签名算法入口。

出于安全考虑，开发者必须在服务端实现签名逻辑，所以在前端人员开发过程中，不需要去关心这3个字段怎么来的，只需要去调用接口获取。

获取完成参数后直接调用即可。

这里说下需要注意的点：

1. 调用wx.config的时机（IOS与安卓区别）

    获取签名的功能需要前端传入当前链接给后端，让后端用这个数据去获取签名。以 Vue 为例子，ios调用wx.config时当前域名最好是跳转到 webview 时的链接地址，不能有任何改变，否则会报错invalid url domain，所以一般在 App.vue 中调用 wx.config 即可。而安卓则需要使用当前的实际路由作为链接，所以需要在当前页面的 created 中调用 wx.config。具体原因是 ios 与安卓对路由处理方式不同导致的差异，这里大家可以自行查阅文档。

1. 配置与入参一定要严格按照文档说明来写，对应的字段从哪获取，怎么使用。我当时是调用之后一直提示 invalid signature 签名错误，因为环境的问题，我排查这类问题只能不断发布到 uat 环境，非常费时间，和后端同事找了2天没有找到问题原因，最后一次检查才发现是 uat 环境配置的是测试公众号的信息导致的问题。所以这里的每一步都请和后端同学确认好，要不然找错误很费时间。(微信给出的常见错误提示)

步骤四：调用wx.ready

配置完wx.config就基本大功告成了，关于wx.ready这一点在IOS不需要太关心，因为wx.ready是被推荐在wx.config调用完成后立马需要使用JSSDK Api才会使用，比如在安卓系统中，页面created调用wx.config，然后就得获取当前定位，此时需要在wx.ready中写方法：

// 安卓系统
wx.config({
    // ...
})
// 紧接着调用
wx.ready({
    wx.getLocation();
})

// IOS直接在需要的地方调用即可
wx.getLocation();

Copy

getLocation方法使用例子

具体使用没什么好说的，直接上代码更容易理解：

// 初始化config
export async function goWxConfig() {
  console.log("执行注册微信config")
  try {
    let res = await getJsSdkSignatureApi({
      appid: .....,
      url: encodeURIComponent(window.location.href.split('#')[0]) // 一定要处理
    });
    
    if (res.result) {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: ....., // 必填，公众号的唯一标识
        timestamp: res.result.timeStamp, // 必填，生成签名的时间戳
        nonceStr: res.result.noncestr, // 必填，生成签名的随机串
        signature: res.result.signature, // 必填，签名
        jsApiList: ["getLocation"] // 必填，需要使用的JS接口列表
      });
    }

    wx.ready(function () {
      console.log("wx ready");
    });
    wx.error(function(err){
      console.log("wx error", err);
      // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
    });
  } catch (error) {
    console.warn("微信config报错：", error);
  }
}
// 获取定位
export function getLocation() {
  console.log("执行微信定位api")
  // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作
  // 所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
  // wx.ready(function () {});
  return new Promise((resolve, reject) => {
    wx.getLocation({
      type: 'wgs84', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
      success: function (res) {
        // var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
        // var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
        // var speed = res.speed; // 速度，以米/每秒计
        // var accuracy = res.accuracy; // 位置精度
        console.log("成功获取定位数据：", res);
        resolve(res);
      },
      fail: function (err) {
        console.log("获取定位位置信息失败：", err);
        Toast("获取定位位置信息失败：", err);
        reject();
      },
      cancel: function (err) {
        console.log('用户拒绝授权获取地理位置：', err);
        reject();
      }
    });
  })
  
}

// 页面vue文件中中使用
const ua = window.navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
  getLocation()
    .then((res) => {
      // 执行后续代码
    })
    .catch(() => {
      // 报错
    });
} else {
  goWxConfig(); // 执行wx.config
  wx.ready(function () {
    getLocation()
      .then((res) => {
          // 执行后续代码
        })
        .catch(() => {
          // 报错
        });
  });
}