本文主要记录 在
nuxt
项目中使用 获取微信收货地址 及使用 腾讯定位 需要注意的问题,避免重复踩坑
一、获取微信收货地址
关于收货地址共享的具体功能介绍,请查看 微信开发文档
使用步骤:
1、引入JS-SDK
2、jsApiList 配置
wx.config({
debug: false,
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
// 所有要调用的 API 都要加到这个列表中,
'checkJsApi',
'openAddress',
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
⚠️jsApiList 配置 遇到的坑:
注意: 微信收货地址共享开发文档的介绍没有提及jsApiList
配置,不要忘记在jsApiList
中添加 openAddress
3、调用openAddress
//需要检测的JS接口列表
Vue.prototype.openAddr = function(cb) {
wx.checkJsApi({
jsApiList: [
'openAddress',
],
success: function(res) {},
fail: function(res) {
console.log('微信版本太低,不支持该功能')
}
});
wx.ready(function() {
wx.openAddress({
success: function(res) {
// console.log('success wx addr', res)
cb && cb(res)
},
fail: function(res) {
// console.log('fail wx addr', res)
}
});
})
}
⚠️调用wx.openAddress遇到的坑:
注意: 把wx.openAddress放在wx.ready(function () {
});里执行
二、使用腾讯定位
1、js引入地址:https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js
⚠️js引入遇到的坑:
注意: js加载时机,预加载js可以避免window undefine 报错
2、使用定位
var geolocation = new qq.maps.Geolocation("your key", "myapp");
//获取当前所在地理位置
geolocation.getLocation((position) => {
this.getTecentAddr(position.lng, position.lat)
}
// 为了不暴露key,后台接口转发
getTecentAddr(lon, lat, autoLocation) {
let params = {
location: `${lat},${lon}`,
get_poi: 1
}
this.$axios.$get(api.address.tecentAddr, { params }).then((res) => {
if (res.status == 0) {
this.pois = res.result.pois
} else {
Toast.fail('定位失败');
}
})
},