vue在微信内分享所遇到的坑

ios上使用vue微信内分享

这段时间，使用vue做了一个微信内活动页面，把开发途中遇到的坑给列一下。

• wx相关配置

  设计活动分享所以首先要进行一下wxConfig配置。需要啥就不多说了，详情见 微信开发平台，这边列一下微信分享的配置。

  //直接wx.ready(() => {})开始配置
  wx.updateAppMessageShareData({
      title: '', // 分享标题
      desc: '', // 分享描述
      link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: '', // 分享图标
  });

• vue路由

  我们使用了vue的history模式，这个需要后台配合

  const router = new Router({
      mode:'history',//设置为history模式
      base:'',//路径，需与nginx配置相同·
      routes: [
          {
              path: '*',
              redirect: {
                  name: 'home'
              }
          },
      ]
  })

• android和ios不同之处

  微信分享的坑

  //经过上面两步，android基本没问题，可以正常分享
  //但在ios上就不行了 会出现invalid signature签名错误
  //导致这种错误的，有俩地方：
  //1.ios上路由必须使用首页路由（举个例子，第一次进入的路由为/home，然后开始点点点，不管去了那个页面，点击右上角的复制链接，复制出来的链接永远都为/home的路由）
  //2.ios分享会给你带上一串莫名的参数
  
  //解决方法  路由跳转存起来
  router.beforeEach( async (to, from, next) => {
      if (!window.initUrl) {
          window.initUrl = location.href;
      }
  })
  
  //判断是否为ios
  Vue.prototype.isIosOrAndroid = function() {
      let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; // android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
      let isStr = "";
      if (isAndroid) {
          isStr = "android";
      }
      if (isiOS) {
          isStr = "ios";
      }
      return isStr;
  };
  
  //android和ios路径链接  这个url是配置wxConfig的时候使用
  const url = Vue.prototype.isIosOrAndroid() === "android" ? window.location.href : window.initUrl;
  
  //莫名参数给他截取掉
  function getQueryString(name) {//根据字段看网址是否拼接&字符串
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null)
          return unescape(r[2]);
      return null;
  }
  var from = getQueryString('from');
  var appinstall = getQueryString('appinstall');
  var sec = getQueryString('sec');
  var timekey = getQueryString('timekey');
    
  if(from || appinstall || sec || timekey){//假如拼接上了
          window.location.href = ''//再让他跳去你想要去的页面
  }
  

• 最后附上完整代码

  //share.js 在需要分享的页面直接调用即可
  import  index  from "@/api";
  import wx from "weixin-js-sdk";
  import Vue from "vue";
  export default function() {
      const url = Vue.prototype.isIosOrAndroid() === "android" ? window.location.href :         window.initUrl;
      index.wxConfig(url).then(res => {//请求后台接口配置config
          if (res.code === 200009) {
              wx.config({
                  debug: false,
                  appId: res.appId,
                  timestamp: res.timestamp,
                  nonceStr: res.nonceStr,
                  signature: res.signature,
                  jsApiList: res.jsApiList
              });
              wx.ready(() => {
                  wx.updateAppMessageShareData({ 
      　　　　     title: '', // 分享标题
          　　　　 desc: '', // 分享描述
          　　　　 link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          　　　　 imgUrl: '', // 分享图标
              });
          }
    });
  }
  

  //router.js
  import Vue from 'vue'
  import Router from 'vue-router'
  import home from "../views/index/index.vue";
  
  Vue.use(Router)
  
  const router = new Router({
      mode:'history',
      base:'',
      routes: [
          {
              path: '*',
              redirect: {
                  name: 'home'
              }
          },
          {
              name: 'home',
              path: '/home',
              component: home,
              meta: {
                  title: ''
              }        
          }
      ]
  })
  router.beforeEach( async (to, from, next) => {
      if (to.meta.title) {
          document.title = to.meta.title
      }
      if (!window.initUrl) {
          window.initUrl = location.href;
      }
      next();
  });
  
  export default router;

  //home.vue
  
  

结束

希望各位老哥点个赞