我们在做移动端项目时，可能会遇到一些照片上传、获取当前地址、或者将页面分享给朋友，微信扫一扫等功能。微信网页开发文档中就提供了很多API，我们只要调用方法就可以，完全不用自己写，也不需要其他专门的插件。
image.png
image.png
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力。
比如我要实现的功能是，在页面中获取当前位置信息。以下5个步骤是必须的（参考微信网页开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html）
image.png
image.png
这是步骤二
安装 wx-js-sdk
npm i wx-js-sdk -S
引入wx-js-sdk
import wx from 'weixin-js-sdk'
以下是将步骤三、四、五封装好的方法。
const wxRegister = () => {
return new Promise((resolve, reject) => {
let data = {
URL: window.location.href.split('#')[0] //参数URL必须是动态获取的，.split('#')[0]也是必须的(无论当前url上是否存在#号)
}
//调用后端提供的接口，获取验证配置信息，此处的res是后端返回的数据
api.getJsConfig(data).then(res => {
//步骤三：通过config接口注入权限验证配置
wx.config({
debug: false, // 是否开启调试模式
appId: res.appId, // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名，见附录1
jsApiList: [ //必填，需要使用的JS接口列表（openLocation，getLocation这两个是微信提供来获取地理位置的接口，可以根据需求改为分享、拍照等接口）
'openLocation',
'getLocation'
]
})
//步骤四：通过ready接口处理成功验证
wx.ready(res => {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
resolve(res) //此处验证成功就resolve出去，去执行调用获取地址的接口wx.getLocation(），或者其他功能
})
//步骤五：通过error接口处理失败验证
wx.error(err => {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
reject(err)
})
}).catch((error) => {
console.log('请求接口出错',error)
})
})
}
注意：步骤三会遇到各种各样的报错，可以参考文档中的附录5-常见错误及解决方法
image.png
接着就是调用获取地理位置的接口啦，wx.getLocation()是文档提供的接口，如下：
image.png
这个接口获取到的是经纬度，但是我想要展示的是具体的城市，所以做了一些修改。
//获取微信定位
const getLocation = () => {
wxRegister().then(res => {
wx.getLocation({
type: 'wgs84',
success: function (res) {
var latLng = new qq.maps.LatLng(res.latitude, res.longitude); //经度，纬度
var geocoder = new qq.maps.Geocoder({ //调用腾讯地图api
complete:function(result){
localStorage.setItem('currentCity', result.detail.addressComponents.city)
store.commit('setCity', result.detail.addressComponents.city)
}
});
geocoder.getAddress(latLng); //将经纬度转换为对相应的城市
},
cancel: function (res) {
alert('用户拒绝授权获取地理位置');
}
});
}).catch(err => {
alert(err.errMsg)
})
}
最后，在需要的页面中调用getLocation()方法即可。
PS:调用腾讯地图API，是为了将经纬度转换为对相应的城市。需要在index.html中引入腾讯地图api文件，如：
image.png
以上。
网友评论