• 現(xiàn)在我的需求是在首頁或者詳情頁點擊分享 成功之后會請求后端接口 如果符合條件 則會得到一張
  項目地址 vue2投票系統(tǒng)
• 首先 肯定是先擼一波文檔 微信api接口文檔
  微信分享其實很簡單 步驟如下

• 綁定域名

先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。這個不多說，見文檔，只有綁定了才能進(jìn)行下一步的動作

• 引入js文件

此處我用的是vux內(nèi)置的插件 其他方式正常引入script即可

import { WechatPlugin} from 'vux'
Vue.use(WechatPlugin); //  微信
const wx = Vue.wechat; 

• 通過config接口注入權(quán)限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息 配置信息需要后端返回

// 此處我是定義在vue原型中 這樣方便以后的調(diào)用 通過 this.wxShare()調(diào)用
const imgUrl = 'http://xxx.xxxx.xxxx'; // 測試地址
Vue.prototype.wxShare = function (title, desc, link) {
  const url = document.location.href;// 當(dāng)前url
  http.get(getConfig(), {//請求配置
    params: {
      url: url
    }
  }).then(res => {// 獲得簽名配置
    var Data = res.data.data;
    // config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作
    wx.config({
      debug: false, // 開啟調(diào)試模式,開發(fā)時可以開啟  
      appId: Data.appid,   // 必填，公眾號的唯一標(biāo)識   由接口返回
      timestamp: Data.timestamp, // 必填，生成簽名的時間戳 由接口返回
      nonceStr: Data.nonceStr,    // 必填，生成簽名的隨機(jī)串 由接口返回
      signature: Data.signature,   // 必填，簽名 由接口返回
      jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 此處填你所用到的方法 
    });
  });
wx.ready(() =>{
// ..... code 
}
};

• 定義方法

Vue.prototype.wxShare = function (title, desc, link) {
wx.config()
wx.ready(() => {
    // 所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，
    // 則可以直接調(diào)用，不需要放在ready函數(shù)中。
    wx.onMenuShareAppMessage({ // 分享給朋友
      title: title,       // 分享標(biāo)題
      desc: desc,   // 分享描述
      link: link,       // 分享鏈接 默認(rèn)以當(dāng)前鏈接
      imgUrl: imgUrl + '/static/images/share.png',// 分享圖標(biāo)
      // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
      success: function () {
        var params = new URLSearchParams();
        params.append('token', window.localStorage.getItem('token'));
        params.append('type', 'share');
        http.post(shareCallback(), params).then(res => { // 請求后端分享成功之后獲取一票的接口
          if (res.data.error == 0) { // 表示當(dāng)天分享成功
            store.commit('shareChange', {// vuex彈出分享成功獲取一票
              isShare: true
            });
          } else {
            return;
          }
        })
      },
      // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
      cancel: function () {
        console.log('分享到朋友取消');
      }
    });
    //分享到朋友圈
    wx.onMenuShareTimeline({});
  });
};

然后在需要的鉤子里面調(diào)用即可,以上的流程都可以在文檔中查看

• 坑點

• 在ios微信瀏覽器中 window.onload.reload() 以及 window.location.go(0) 無效

我想實現(xiàn)登陸之后刷新頁面, 結(jié)果在登陸之后 ios并不會刷新頁面
解決辦法： 最后使用 watch 解決

    watch: {
      login: function () {
        if (this.login) {
          this._getFansCard()
        }
      }
    }

• ios上二次分享會出現(xiàn)簽名錯誤, 并且莫名被拼接上了一串標(biāo)識 此問題只有在ios上有

微信截圖_20170524110236.png

ios會在#號中間添加一串標(biāo)識 如下

http://test.aaa.bbbb.com/?from=singlemessage&isappinstalled=0#/details?id=2
// 原本鏈接 http://test.aaa.bbbb.com/#/details?id=2

這個問題解決了兩天,建議在一開始就開啟debug模式,這樣能及時知道問題所在
解決辦法:

一開始以為是 ‘#’ 的問題 于是乎開啟vue HTML5 History 模式 去除掉# 結(jié)果發(fā)現(xiàn) 在進(jìn)入其他頁面的時候 復(fù)制連接還是首頁的鏈接 本質(zhì)上是 vue-router切換的時候 都是操作的瀏覽器歷史記錄 （此時你可以復(fù)制url 都是一樣的）真實URL為第一次剛進(jìn)入時的URL

• 導(dǎo)致錯誤是 當(dāng)瀏覽者從分享窗口進(jìn)入后，他從分享頁按著正常路由跳轉(zhuǎn)到其他頁面，其他頁面的邏輯中如果有需要獲取當(dāng)前頁面url的需要，會發(fā)現(xiàn)這個url和正常路由跳轉(zhuǎn)的不一樣,導(dǎo)致簽名不一致,所以獲取不到正確的文案。
• 解決: 每次路由變化時都重新請求下簽名，簽名的URL 用第一次進(jìn)入時的URL就可以解決了.