nuxt项目中获取微信收货地址、腾讯定位

本文主要记录 在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('定位失败');
        }
    })
},          

你可能感兴趣的:(nuxt项目中获取微信收货地址、腾讯定位)