工作内容

• fix ifish后台查看供应商电话显示错误
• 调试微信jssdk接入
• 汇车替换jssdk api来获取地理位置信息

 handleViewUser(row) {
        this.dialogUserInfoVisible = true;
        if (row.role === 'VENDOR' || row.role === '供应商') {
          axios.get(`${API.ifish_vendors}?userId=${row.id}`)
            .then((res) => {
              this.userInfo.company = res.data.company;
              this.userInfo.companyAddress = res.data.companyAddress;
              // 如果角色是vendor从vendor数据中拿电话
              this.userInfo.mobile = res.data.mobile;
            });
        } else {
          this.userInfo.mobile = row.mobile;
        }

        this.userInfo.email = row.email;
        this.userInfo.role = this.formatRole(row);  // 格式化角色名
      },

把配置微信jssdk封装成通用函数，方便复用

// 微信jssdk配置函数
  wxConfig(jsApiList, url, debug = false) {
    axios.get(`${API.wechat_jssdk_config}?url=${url}`)
      .then((res) => {
        const data = res.data.data;
        wx.config({
          debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appid, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名，见附录1
          jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
      });
  }

将更新用户地理位置信息封装在action中

export const UPDATE_LOCATION = ({commit}) => {
  wx.ready(() => {
    wx.getLocation({
      type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
      success: (res) => {
        const latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
        const longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
        commit(types.UPDATE_LOCATION, {latitude, longitude});
      }
    });
  });
};

在全局路由钩子afterEach中调用微信jssdk配置方法防止路由改变后失效问题

router.afterEach((route) => {
  commit(types.UPDATE_LOADING, false)
  // 每次路由改变后配置微信jssdk防止失效
  Helper.wxConfig(wxJsApiList, encodeURIComponent(window.location.href));
})

总结

• 不足
• 微信jssdk配置放在全局路由钩子函数中，无论页面有没有用到jssdk api，只要路由改变就配置，可能存在性能问题