vue微信公众号开发实践

wxsdk+vuejs

记录下项目中用vue进行公众号开发遇到的一些问题和开发技巧….

wxsdk config相关

    用到的jssdk采用weixin-js-sdk这个包

npm install weixin-js-sdk --save
import wx from 'weixin-js-sdk' //引入

    单页下统一处理wxconfig，在写的vue页的mounted()下初始化wx.config，一般页面初始化的时候，这样后面在切换组件可以一直用了

mounted() {
  this.$store.dispatch('getSDKSign',{url: location.href.split('#')[0]}).then((res) => {
    wx.config({
      debug: false, // 开启调试模式，true会alert所有api返回值
      appId: res.appId, // 公众号唯一id
      timestamp: res.timestamp, // 生成签名的时间戳
      nonceStr: res.noncestr, // 生成签名的随机串
      signature: res.signature, // 签名
      jsApiList: [ // 需要使用的js列表
        'hideOptionMenu',
        'getLocation',
        'openLocation'
      ]
    });
  })
}

    这里获取签名信息的url一定要注意，微信开发文档有说明，#号前的，项目采用了hash模式，history模式请自查。这样在其他组件内可自行调用jsApiList了，比如每个页面都需要调用hideOptionMenu，可以先在main.js中定义一个公共方法，我这里用到挂在Vue.prototype的方法

Vue.prototype.hiddenShare = function() {
  wx.ready(() => {
    console.log('hiddenShare.....');
    wx.hideOptionMenu();
  });
}

    定义好之后，在每个组件初始化时调用一下这个方法就ok了，this.hiddenShare();也可以直接在组件内写函数内容。

ios下相关hack

    解决ios微信跳转其他页面返回无刷新问题

let isPageHide = false;
window.addEventListener('pageshow', function () {
  if (isPageHide) {
    window.location.reload();
  }
});
window.addEventListener('pagehide', function () {
    isPageHide = true;
});

    解决ios修改document.title不生效的问题，场景：每切换一次组件需要修改页面title

document.title = 'xxx';
if(isIOS()) { //是否ios
  window.setTimeout(() => {
    let _iframe = document.createElement('iframe');
    _iframe.style.display = 'none';
    _iframe.style.width = '0';
    _iframe.style.height = '0';
    let handler = function () {
      window.setTimeout(() => {
        _iframe.onload = null;
        document.body.removeChild(_iframe);
      }, 0);
    };
    _iframe.onload = handler;
    _iframe.src = '/favicon.ico';
    document.body.appendChild(_iframe);
  }, 0);
}

前端日志上报

    用户页面点击，关键节点上报，try…catch，window.onerror等前端数据上报，采用image形式来上报，好处相对于ajax代码量少,不会影响用户的正常使用（完全不可知）,这个后端接口只能是get请求,具体实现如下：

//还是挂在Vue.prototype下
  Vue.prototype.logReport = function(urlParams) {
    //urlParams 上报数据
    let logReport = 'xxxx/api/logReport';
    url = `${logReport}?${urlParams}`;
    var img = new Image;
    img.onload = img.onerror = function(){
      img = null;
    };
    img.src = url;
  }