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
  <template>
      <div>分享頁面</div>
  </template>
  <script>
  import share from "@/share";
  export default {
      created(){
          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 = ''//再讓他跳去你想要去的頁面
          }
      },
      mounted(){
          share()
      }
  }
  </script>

結束

還有不懂的加qq：2869410800 ，但願各位老哥點個贊👍