需求背景：通过微信扫描二维码跳转微信网页-xx站点名录,每个站点根据当前手机当前位置计算距离,支持下拉刷新,上拉加载更多,模糊搜索、拨打电话等功能.
1.申请测试公众号
微信公众平台接口测试帐号申请地址，微信扫码登录即可 ，登录成功后跳测试号管理 页面 mp.weixin.qq.com/debug/cgi-b…
2.测试号管理页的相关配置：
测试号信息： appID: *** appsecret: *** -->【后端人员要用】
接口配置信息： -->这个可以忽略
JS接口安全域名： ***.com -->注意：只要域名，不要协议 、端口号、 或其它/path等
测试号二维码：微信扫描关注测试公众号
注意：只有关注了测试公众号的,才能正确配置wx.config,正确调用jsApi
3.启动本地服务
3.1 浏览器访问：默认位置 (以天安门为中心的经纬度)
// 知识点：navigator.userAgent
if (/(micromessenger)/i.test(navigator.userAgent)){
微信访问..
}else{
浏览器访问..
}
3.2 微信开发者工具访问
涉及语法：index.html引入微信官方jssdk
https://res.wx.qq.com/open/js/jweixin-1.6.0.js，得到全局wx对象
知识点：
wx.config 通过config接口注入权限验证配置、
wx.error config信息验证失败会执行wx.error函数、
wx.ready config信息验证成功后执行 业务逻辑
wx.checkJsApi 判断当前客户端版本是否支持指定的JS接口,以键值对的形式返回 {"checkResult":{"getLocation":true},"errMsg":"checkJsApi:ok"}
wx.getLocation 获取地理位置接口
代码示例：
wx.config({
debug: false, // 开启调试模式
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名
jsApiList: ["checkJsApi", "openLocation", "getLocation"], // 必填，需要使用的JS接口列表
});
注意：请求的接口路径：url参数 === 访问地址; config里的数据信息需要实时通过接口获取，前端不可写死!
当config信息验证失败, res.errMsg === 'config:require subscribe'时, 显示提示模态框，"请先关注公众号！"
注意：未扫描关注的公众号一定会走这里.
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中.
wx.ready(function () {
wx.checkJsApi({
jsApiList: ['getLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function (res1) {
console.log('wx.checkJsApi()', res1)
setTimeout(() => {
wx.getLocation({
// type: 'wgs84', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
success: function (res2) {
var latitude = res2.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res2.longitude; // 经度，浮点数，范围为180 ~ -180。
if (latitude && longitude) {
console.log('获取位置信息成功-success', latitude, longitude)
that.setState({ fdLongitude: longitude, fdLatitude: latitude }, () => {
that.getList()
return
})
}
}
});
}, 500)
},
fail: function (err) {
console.log('获取位置信息失败-fail', err)
that.getList()
}
});
});
4.打包到可访问的映射网页地址
浏览器访问： https://***.com/#/pages/servicesSiteList/index
微信开发者工具,公众号网页项目,在地址栏输入配置的域名即可访问
https://***.com/#/pages/servicesSiteList/index
