1. 程式人生 > >微信分享踩坑之道

微信分享踩坑之道

1.引入JS檔案

在需要呼叫JS介面的頁面引入如下JS檔案,(支援https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

備註:支援使用 AMD/CMD 標準模組載入方法載入

2.通過config介面注入許可權驗證配置

sdk 的config的配置 

wx.config({

    debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。

    appId: '', // 必填,公眾號的唯一標識

    timestamp: , // 必填,生成簽名的時間戳

    nonceStr: '', // 必填,生成簽名的隨機串

    signature: '',// 必填,簽名,見附錄1

    jsApiList: [] // 必填,需要使用的JS介面列表,所有JS介面列表見附錄2

});

這邊是從後臺請求資料進行配置的

 methods: {
    //微信分享
    share(){
        this.$http.post('/api/wechat/config', {'api': ["onMenuShareTimeline", "onMenuShareAppMessage"]}).then((res) => {
             this.wxInit(res.data);
        });
      },
    //微信分享使用方法
    wxInit(sd){
      Wx.config(sd) 
      Wx.ready( ()=> {
        var  config = {
          title: "邀請您加入xxxxx團隊", 
          desc:"隊員賣貨,也享提成 ! 人數越多,提成越多 !", 
          link:window.location.origin+"/invite/"+this.admin.agent.id,
          imgUrl: "http://www.php.cn/static/images/user_avatar.jpg", 
        }
        Wx.onMenuShareTimeline(config);
        Wx.onMenuShareAppMessage(config);
      });
    },   
  },

此時已經可以分享了但只限於安卓 在ios 上並不能完美實現,這裡的坑很深 (這裡花費半天時間)

經過分享和不斷的查詢發現 在ios系統下 第一次載入雖然不能分享但程式碼正確,重新整理一下頁面 可發現 可以正常分享,於是得出ios下需要重新整理一下才能分享採用以下方法

    //如果是蘋果機,重新整理頁面
     isIOS () {
			        var isIphone = navigator.userAgent.includes('iPhone');
			        var isIpad = navigator.userAgent.includes('iPad');
			        return isIphone || isIpad;
			    },
   if (this.isIOS()) {
        if(location.href.indexOf("#reloaded")==-1){
          location.href=location.href+"#reloaded";
          location.reload();
    }
  };
    this.share()

這樣就可以實現分享了. 不知道有沒有好的辦法,望指出不足