【Vue】vue.js 异步初始化微信JsSDK的问题

Z时代
2024-01-10
分类：技术分享

问题描述

在我的工程中，App.vue容器包含Index.vue首页组件

我想要在App.vue容器中，先初始化微信JsSDK。然后在具体需要定位的组件（比如Index.vue）中，再通过wx.getPostion()获取当前地理位置。

但容器异步初始化微信的工作未完成，首页组件就开始获取地理位置了，导致获取失败，不知道该如何解决？

示例代码

App.vue

/*
* 初始化微信SDK
*/
var jsApiList = ['getLocation'];    //js接口
var curUrl = 'http://dev.xxx.com/index.html';    //当前页面地址
var isDebug = false;
console.log('App.vue come in!');
//为了安全起见，微信的appId等配置信息通过后台获取
//所以需要先发异步请求
http.post('/json/GetWxOAuth', {curUrl : curUrl}).then(function(res){
console.log('App.vue GetWxOAuth finish!');
if(res.errorCode == 0){
window.wx.config({
debug: isDebug, //开启调试模式
appId: res.body.appId, // 必填，公众号的唯一标识
timestamp: res.body.timestamp, // 必填，生成签名的时间戳
nonceStr: res.body.nonceStr, // 必填，生成签名的随机串
signature: res.body.signature,// 必填，签名
jsApiList: jsApiList //必填，需要使用的JS接口列表
});
}});

Index.vue

console.log('Index.vue come in!');
window.wx.ready(function(){
console.info('wx.ready come in!');
window.wx.getLocation({
type: 'wgs84',
success: function (res) {
//do something
},
fail:function(res){
console.error('common wx.getLocation fail!');
reject(res);
}
});});

最终输出：

App.vue come in! //容器的初始化工作已经开始 Index.vue come in! //但是异步请求还没完成的时候，就已经开始加载首页组件，获取地理位置了

App.vue GetWxOAuth finish! //等过一段时间之后，容器异步的初始化工作才完成

回答

给你提一个意见，如果你是想只初始化一次然后全站调用的话这样会有问题
初始化的一些参数在其他页面不会改变，也就是说，你如果有用到sdk来调用分享接口的话
就会发现，每个页面分享的内容都是一样的
微信官方文档也建议SPA单页应用应该在每次切换页面的时候实例化sdk
所以你应该写一个公共方法来封装一下实例化操作，然后可以把ready实例化方法做成一个回调方法
给你个例子

// main.js
Vue.prototype.SDKRegister = (that, callback) => {
  // 接入微信JSSDK
  // 获取微信JSSDK配置
  let url = that.webUrl
  that.$http.get(url).then(res => {
    res = res.body
    that.$wechat.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.appId, // 必填，公众号的唯一标识
      timestamp: res.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.nonceStr, // 必填，生成签名的随机串
      signature: res.signature, // 必填，签名，见附录1
      jsApiList: res.jsApiList
      // jsApiList: [
      //   'checkJsApi',
      //   'onMenuShareAppMessage', // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
      //   'onMenuShareTimeline', // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
      //   'onMenuShareQQ', // 获取“分享到QQ”按钮点击状态及自定义分享内容接口
      //   'onMenuShareWeibo' // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
      // ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    })
  })
  that.$wechat.ready((res) => {
    that.$wechat.showAllNonBaseMenuItem()
    // 分享到朋友圈
    let link = ''
    let title = ''
    let imgUrl = ''
    let desc = ''
    ...删掉了我业务相关变量的内容定义
    that.$wechat.onMenuShareTimeline({
      title: title, // 分享标题
      link: link, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success () {
        // 用户确认分享后执行的回调函数
        that.$alert('分享成功', 'success')
      },
      cancel () {
        // 用户取消分享后执行的回调函数
      }
    })
    // 分享给朋友
    that.$wechat.onMenuShareAppMessage({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: link, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function () {
        // 用户确认分享后执行的回调函数
        that.$alert('分享成功', 'success')
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    })
    // 如果需要定制ready回调方法
    if(callback){
      callback.call(that)
    }
  })
}
// 要用到定位的页面
beforeCreate () {
  this.SDKRegister(this, () => {
    this.$wechat.getLocation({
      success (res) {
        let citylocation = new qqMap.CityService({
          complete (results) {
            let location = results['detail']['detail'].split(',')
            that.$store.commit('city', location[1])
            window.localStorage.city = location[1]
          }
        })
        let latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
        let longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
        // 设置经纬度信息
        let latLng = new qqMap.LatLng(latitude, longitude)
        // 调用城市经纬度查询接口实现经纬查询
        citylocation.searchCityByLatLng(latLng)
      },
      cancel: function () {
        // 这个地方是用户拒绝获取地理位置
      }
    })
  })}

var dtd=null
var initSdkSuccess = false;
var initSdk =  async function(){
    dtd= dtd || new Promise(resolve=>{
        dtd = null
        if(!initSdkSuccess){
            //ajax sdksetting
            //success
             resolve();
        }
        else{
             resolve();
        }
        //wx init done
    })
    return dtd;
}
var getPos = async function(){
    await initSdk ();
    wx.getPostion()
}
export default {
    initSdk ,
    getPos }