微信公众号开发总结

使用vue-cli

1、将vue的spa单页面修改成多入口文件
直接在vue的脚手架的webpack上面进行修改，参考别人博客进行修改，分享自：
http://blog.youkuaiyun.com/embrace924/article/details/78316132
测试打包后可以生成多入口文件，但是第二个入口文件，打开会有一部分问题，项目赶紧，之后就没用多页面，使用参数区分跳转的（后来发现应该是nginx配置问题：
location / { try_files $uri$uri/ @router;
index index.html;
}）

2、打包后页面无法刷新、部分静态图片加载不到
页面无法刷新，首先就是在检查中查看Network，看一下引入的静态资源路径加载的问题，如果加载错误可能是config/index.js下build配置下assetsPublicPath: ‘./’,的问题，第二种就是通过服务端配置nginx重定向的问题，两种都是资源路径加载不到

3、使用诸葛io埋点
公司会有诸葛账号，将数据接入中的script的内容粘贴到代码中，需要埋点的地方直接事件埋点即可，window.zhuge.load(”);//配置应用的AppKey可以实时调试

4、微信分享
执行wx.ready()之前一定需要先通过签名配置，签名是前端传递当前url给后台，后台按照规则生成返回，为了安全性，当url后面带有参数时，保险起见使用：encodeURIComponent()对当前url进行转码，因为请求原因后台不识别&，如果没有参数直接使用window.location.href.split(‘#’)[0]

   const commonJs = {
  WXjssdk: function (self,status) {//微信基础配置
    let obj = {}
    let postUrl = null;
    //分享其他页面签名
    if(window.location.href.indexOf('?')!=-1){
        postUrl = encodeURIComponent(window.location.href);
    }else{
        postUrl = window.location.href.split('#')[0];
    }
    Indicator.open()
    let wxUrl = null;
    wxUrl = successService.cafinJsGetConfigO('url='+postUrl);
    wxUrl.then((response) => {
        let responseData = response.data;
        if (responseData.code == '0000') {
          window.localStorage.setItem('appId',responseData.data.appId);
          let configParam = {
            //debug: true,
            appId: responseData.data.appId, // 必填，公众号的唯一标识
            timestamp: responseData.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: responseData.data.nonceStr, // 必填，生成签名的随机串
            signature: responseData.data.signature,// 必填，签名，见附录1
            jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          }
          wx.config(configParam);
          wx.error(function (res) {
            Indicator.close()
            // MessageBox.alert(JSON.stringify(res)).then(() => {
            // })
            console.log('error')
          });
          if(!status){
            Indicator.close()
          }
        }
      })
    // });
  },
  /**
   * @param self 当前指向 必传
   * @param title 分享的名字 必传
   * @param contentpage 分享的内容 必传
   * @param page 分享后跳转到哪个页面及参数 必传
   * @param logopng 分享的LOGO 必传
   * @param jssdkStorage 分享时缓存的名字 不允许重复，必传
   * @param status 是否自动关闭加载框，不传或false时自动关闭
   * @constructor
   */
  WXShareConfig: function (self,title,contentpage,page,logopng,jssdkStorage,status) {//分享到朋友圈和好友
    let wxjssdkNum = parseInt(window.sessionStorage.getItem(jssdkStorage))||0;
    let u = navigator.userAgent;
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if(isiOS){
      if(wxjssdkNum<1){
        window.location.reload()
        wxjssdkNum = wxjssdkNum+1;
        window.sessionStorage.setItem(jssdkStorage,wxjssdkNum);
      }
    }
    if(status){
      this.WXjssdk(self,status);
    }else{
      this.WXjssdk(self);
    }
    let appId = null;
    if(self.$route.query.appId){
      appId = self.$route.query.appId;
    }else{
      appId = window.localStorage.getItem('appId');
    }
    Indicator.open();
    wx.ready(function (res) {
      let hosturl = window.location.href.split('/')[2];
      let hostStatus = window.location.href.split('/')[0];
      let linkUrl = `${hostStatus}//${hosturl}/${page}`;
      let logoUrl = hostStatus + '//' + hosturl + logopng
      Indicator.close();
      wx.onMenuShareAppMessage({
        title: title, // 分享标题
        desc: contentpage, // 分享描述
        link: `${hostStatus}//${hosturl}/${page}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: hostStatus + '//' + hosturl + logopng, // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
          // MessageBox.alert(' 分享成功！').then(() => {
          // })
          console.log('分享成功！')
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
          $.toast('用户已取消','text');
        }
      });
      wx.onMenuShareTimeline({
        title: title, // 分享标题
        desc: contentpage, // 分享描述
        link:  linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: logoUrl, // 分享图标
        success: function () {
          // 用户确认分享后执行的回调函数
          // MessageBox.alert(' 分享成功！').then(() => {
          // })
          console.log('分享成功')
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
          $.toast('用户已取消','text');
        }
      });
    })
    wx.checkJsApi({
      jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      success: function(res) {
        // 以键值对的形式返回，可用的api值true，不可用为false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        if(res.errMsg.indexOf('ok')==-1){
          MessageBox.alert(JSON.stringify(res)).then(() => {
          })
        }
      }
    });
    wx.error(function(res){
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      MessageBox.alert(JSON.stringify(res)).then(() => {
      })
    });
  }
}

export default commonJs 

5、遮罩层弹出后，页面还可以滑动
在遮罩层标签内添加 @touchmove.prevent

6、模拟ios弹出input搜索框自动获取焦点弹出键盘，给某个input（这里是input1）添加事件，当事件执行，弹出搜索input（这里是input2），在input1的事件中添加一个50ms的延时，让input1失去焦点，input2获取焦点，此时弹出的键盘其实是input1的，我们将他模拟给了input2
移动端给input添加focus事件：$(‘#input’).trigger(“click”).focus();

7、微信图片预览接口调用

import wx from 'weixin-js-sdk'
const imgPreview = {
    funcReadImgInfo(){
        var imgs = [];
        var imgObj = $(".content img");//这里改成相应的对象
        for(var i=0; i<imgObj.length; i++){
            imgs.push(imgObj.eq(i).attr('src'));
            imgObj.eq(i).click(function(){
                var nowImgurl = $(this).attr('src');
                wx.previewImage({
                    "urls":imgs,
                    "current":nowImgurl
                });
            });
        }
    }
}
export default imgPreview

8、敏感字过滤

const sensitive = {
    senCharFilter(charaRoom){
        let sensitiveWordsList = [];//敏感字数组
        let sensitiveWords = "";
        let reBadWords = null;
        for(var i=0;i<sensitiveWordsList.length;i++){
            if(i<sensitiveWordsList.length-1){
                sensitiveWords += sensitiveWordsList[i]+"|";
            }else{
                sensitiveWords += sensitiveWordsList[i];
            }

        };
        // 拼接敏感字正则
        return charaRoom.replace(new RegExp(sensitiveWords,'gi'),'*');
    }
}

export default sensitive