React 框架下的 微信 JS-SDK 调用方法

新手学堂011

React 框架下的 微信 JS-SDK 调用方法,第1张

项目使用React 开发 作为微信企业号应用 需要的功能为 获取地理位置信息

在public文件夹下的 Indexhtml 中引入 ,放在title标签下即可

其中 比较重要的是 signature

signature 需要通过 后端接口 访问微信的 api 获取 access_token 后获取 jsapiTicket

拼接结束后 使用 SHA1算法加密后传回 即是可用的 signature

后端获取 signature 接口

signature 拼接时候需严格按照 如下格式进行拼接

在IOS客户端 和 ANDROID中 url 参数略有不同

IOS客户端中 需要的是 页面的根路径

ANDROID客户单中需要的是当前页面的路径

注意: api 调用为单个应用每小时最多100次 实际测试可能小于100 接口就会无法相应 应当保存 jsapi_ticket避免频繁请求(本业务压力有限没有做处理)

java Spring-boot实现

使用函数式先注册config

调用地理位置信息

先引入config 注册函数 再使用windowwx接口名称即可调用

微信小程序开发可根据 getLocation 获取用户的地理位置信息,包含经纬度、移动速度、海拔信息,也可使用 onLocationChange 实时获取位置。测试了一下,坐标和海拔还是比较准确的。

鉴于部分同学提到坐标误差大的问题:其一,可能是在开发者工具中遇到该问题,原因是电脑中没有gps模块,无法准确获取位置,一般通过ip定位到行政区域;其二,坐标格式没有正确使用,微信提供了两种格式 wgs84 和 gcj02 ,前者是全球GPS系统使用的标准格式,后者是中国测绘局公布的国标,两者定位有一定偏差。这就要求开发者以何种方式获取的坐标,就应以何种方式解析;也可对坐标转换后再解析。

对于用户已授权定位的可直接通过以下方式获取:

对于不确定用户是否已开启定位权限的,应该分两种情况处理:

1、用户从未同意或拒绝授权定位权限的,可直接通过 authorize 发起授权,授权成功后即可获取位置信息。

2、由于微信为了更好的用户体验,当用户第一次放弃授权定位权限后,在此后使用的过程中,不会再向用户发起授权。这就需要引导用户开启定位权限。若 authorize 时提示 authorize:fail ,可通过 openSetting 引导用户开启授权,用户授权后即可获取位置信息

实时位置信息同样需要用户授权;

微信提供了 onLocationChange 来监听实时位置信息,需要结合 stopLocationUpdate ( 小程序前台运行时监听 )、 startLocationUpdateBackground ( 小程序前后台运行时监听 ) 使用,如下:

注:实时定位反应稍微慢一点,一般五秒后才能返回新的坐标,原因是多方面的,比如天气、建筑物、数据传输、数据处理等等。