记录微信 JS-SDK的使用

问题背景

有个开发的小需求：在一个门店列表页，根据门店的经纬度计算门店与用户的距离，并根据距离排序。

在H5浏览器中，我们可以直接使用navigator.geolocation.getCurrentPosition （需要https）获取用户坐标，再根据下面方法计算两坐标距离：

 

/**
 * 通过经纬度计算距离
 */
function getDistance(lat1: number, lng1: number, lat2: number, lng2: number) {
  var radLat1 = (lat1 * Math.PI) / 180.0
  var radLat2 = (lat2 * Math.PI) / 180.0
  var a = radLat1 - radLat2
  var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0
  var s =
    2 *
    Math.asin(
      Math.sqrt(
        Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
      )
    )
  s = s * 6378.137 // EARTH_RADIUS;
  s = Math.round(s * 10000) / 10000
  return s
}

 

问题

如果只是在H5浏览器中使用该方法非常简单，但是这个页面还需要再微信小程序的webview中使用。在微信小程序的webview中是默认阻止navigator.geolocation.getCurrentPosition方法的。

 

解决方法

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

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

使用JS-SDK的getLocation方法，在用户同意授权后即可获取用户当前的坐标信息。

JS-SDK 介绍及配置说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html。

JS-SDK 签名校验工具：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign。

JS-SDK 提供方法测试页面：https://www.weixinsxy.com/jssdk/。

 

关于配置微信JS-SDK的坑

1、关于所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

根据这段话的介绍，说明在调用JS-SDK方法时必须先使用当前页面url注册授权，当页面变化时又需要调用JS-SDK方法时需要重新授权。在实际使用中发现，在安卓设备中jssdk的使用页面url就是当前页的url即location.href，但在ios设备中jssdk的使用页面url始终都是进入项目时的初始url，无论页面如何跳转、在哪执行JS-SDK提供的方法。

2、授权的url地址正确，但还是提示url地址错误

实测发现，当 URL 较复杂时会发生转义。在安卓设备上，需要先使用 decodeURIComponent(location.href) 将 URL 解码，而在 iOS 设备上，可以直接使用 location.href。