在小步调webview使用微信JSSDK -- 初始化设置和获取定位例子Vue

最近接到一个需求，在我们现有的小步调上添加一个舆图选点功能，这个功能须要定位当前位置，由于是在微信小步调的 webview 中，所以我引入了微信 JSSDK 中的 getLocation 方法。这里我主要说一下JSSDK的初始化流程以及一些本身遇到的题目，另有以getLocation方法举一个现实使用的例子。

微信JSSDK先容

微信 JS-SDK 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、付出等微信特有的能力，为微名誉户提供更优质的网页体验。
准备工作：初始化JSSDK

步调一：绑定域名
这一步是绑定你须要使用的H5链接。
步调二：引入JS文件

1. // 这里我就只展示通过yarn引入的方式
2. yarn add weixin-js-sdk
4. // 在你所需页面的代码里导入
5. import wx from "weixin-js-sdk";

复制代码

Copy
步调三：通过 config 接口注入权限验证设置

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

复制代码

Copy
上面代码里比力难理解的是nonceStr、 signature，官网的表明比力多，我贴出参考的文档地址让各人更好的理解：config入参分析入口、签名算法入口。
出于安全考虑，开发者必须在服务端实现签名逻辑，所以在前端人员开发过程中，不须要去关心这3个字段怎么来的，只须要去调用接口获取。
获取完成参数后直接调用即可。
这里说下须要注意的点：

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

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

• 设置与入参肯定要严酷按照文档分析来写，对应的字段从哪获取，怎么使用。我当时是调用之后不停提示 invalid signature 签名错误，由于情况的题目，我排查这类题目只能不断发布到 uat 情况，非常费时间，和后端同事找了2天没有找到题目缘故原由，末了一次检查才发现是 uat 情况设置的是测试公众号的信息导致的题目。所以这里的每一步都请和后端同学确认好，要否则找错误很费时间。(微信给出的常见错误提示)
  

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

1. // 安卓系统
2. wx.config({
3.     // ...
4. })
5. // 紧接着调用
6. wx.ready({
7.     wx.getLocation();
8. })
10. // IOS直接在需要的地方调用即可
11. wx.getLocation();

复制代码

Copy
getLocation方法使用例子

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

1. // 初始化config
2. export async function goWxConfig() {
3.   console.log("执行注册微信config")
4.   try {
5.     let res = await getJsSdkSignatureApi({
6.       appid: .....,
7.       url: encodeURIComponent(window.location.href.split('#')[0]) // 一定要处理
8.     });
9.    
10.     if (res.result) {
11.       wx.config({
12.         debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
13.         timestamp: res.result.timeStamp, // 必填，生成签名的时间戳
14.         nonceStr: res.result.noncestr, // 必填，生成签名的随机串
15.         signature: res.result.signature, // 必填，签名
16.         jsApiList: ["getLocation"] // 必填，需要使用的JS接口列表
17.       });
18.     }
20.     wx.ready(function () {
21.       console.log("wx ready");
22.     });
23.     wx.error(function(err){
24.       console.log("wx error", err);
25.       // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
26.     });
27.   } catch (error) {
28.     console.warn("微信config报错：", error);
29.   }
30. }
31. // 获取定位
32. export function getLocation() {
33.   console.log("执行微信定位api")
34.   // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作
35.   // 所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
36.   // wx.ready(function () {});
37.   return new Promise((resolve, reject) => {
38.     wx.getLocation({
39.       type: 'wgs84', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
40.       success: function (res) {
41.         // var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
42.         // var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
43.         // var speed = res.speed; // 速度，以米/每秒计
44.         // var accuracy = res.accuracy; // 位置精度
45.         console.log("成功获取定位数据：", res);
46.         resolve(res);
47.       },
48.       fail: function (err) {
49.         console.log("获取定位位置信息失败：", err);
50.         Toast("获取定位位置信息失败：", err);
51.         reject();
52.       },
53.       cancel: function (err) {
54.         console.log('用户拒绝授权获取地理位置：', err);
55.         reject();
56.       }
57.     });
58.   })
59.   
60. }
62. // 页面vue文件中中使用
63. const ua = window.navigator.userAgent.toLowerCase();
64. if (/iphone|ipad|ipod/.test(ua)) {
65.   getLocation()
66.     .then((res) => {
67.       // 执行后续代码
68.     })
69.     .catch(() => {
70.       // 报错
71.     });
72. } else {
73.   goWxConfig(); // 执行wx.config
74.   wx.ready(function () {
75.     getLocation()
76.       .then((res) => {
77.           // 执行后续代码
78.         })
79.         .catch(() => {
80.           // 报错
81.         });
82.   });
83. }

复制代码