vue微信分享

在另外一個vue微信公眾號頁面項目中，我們的需求是所有頁面都分享一個固定的文案和地址，圖片並不是頁面中的圖片。而是單獨的一張用作分享的圖片，這里遇到兩個坑。第一個是分享出來的鏈接圖片並沒有顯示，這個問題是因為圖片我用的相對地址，類似這樣：

    let imgUrl="../../../static/images/share_img.jpg"

微信分享的圖片貌似只能是完成的路徑，比如"http://www.baidu.com/static/images/share_img.jpg";

ok,可以分享出圖片了。但是圖片時有時無，這個問題是我猜測可能是點分享按鈕的時候還沒有加載完圖片，要不就是微信配置調用的時候還沒有加載完圖片，解決辦法是監聽圖片的onload事件，在事件中來觸發微信的配置和分享，例如：

 

     let imgUrl=http://www.baidu.com/static/images/share_img.jpg";
     let img=new Image();
     img.src=imgUrl;
     img.onload=()=>{
       img.style.display="none";
       document.body.appendChild(img);
        //分享接口
       wx.config({
         debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
         appId: appId, // 必填，公眾號的唯一標識
         timestamp: timestamp, // 必填，生成簽名的時間戳
         nonceStr: nonceStr, // 必填，生成簽名的隨機串
         signature: signature, // 必填，簽名，見附錄1
         jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
       });
       wx.ready(() => {
         //分享接口
         wx.onMenuShareAppMessage({
           title: title, // 分享標題
           desc: desc, // 分享描述
           link: appNewURL, // 分享鏈接
           imgUrl: imgUrl // 分享圖標
         });
         wx.onMenuShareTimeline({
           title: title, // 分享標題
           desc: desc, // 分享描述
           link: timeNewURL, // 分享鏈接
           imgUrl: imgUrl // 分享圖標
         });
       });
     }
   })

我在圖片加載完同時把它加載在頁面中，這一部可有可無，沒什么影響。這就是這次分享遇到的坑，完整代碼如下：

 let wx = require('weixin-js-sdk');
 import service from "../api/service"
 import getQuery from "./getQuery"
 import {SHARE_URL} from "../config"
 /*
微信分享方法
@param{data}:獲取的微信加簽
@param{url}:分享的url
*/

 let wxShare = () => {
   let url = location.origin+'/wexinShare';
   let signHref=location.href;
   let encodeURL=encodeURIComponent(signHref);
   var query=getQuery();
   //這個接口用來獲取加簽信息。可以根據自己的情況，更改接口名稱，
   service.getWechatShareService(encodeURL, data => {
     let appId = data.appId;
     let nonceStr = data.nonceStr;
     let timestamp = data.timestamp;
     let signature = data.signature;
     let title = "";
     let desc = "";
     let appNewURL = url;
     let timeNewURL = url;
     //這一步是因為我發現有的頁面進入微信會加入一個'from=xx&isappinstalled=0',為了讓配置能通過，必須和它保持一致
     if(query.from){
      appNewURL+='?from=singlemessage&isappinstalled=0'
      timeNewURL+='?from=timeline&isappinstalled=0'
     }
     let imgUrl=SHARE_URL+"/static/images/share_img.jpg";
     var img=new Image();
     img.src=imgUrl;
     img.onload=()=>{
       img.style.display="none";
       document.body.appendChild(img);
        //分享接口
       wx.config({
         debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
         appId: appId, // 必填，公眾號的唯一標識
         timestamp: timestamp, // 必填，生成簽名的時間戳
         nonceStr: nonceStr, // 必填，生成簽名的隨機串
         signature: signature, // 必填，簽名，見附錄1
         jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
       });
       wx.ready(() => {
         //分享接口
         wx.onMenuShareAppMessage({
           title: title, // 分享標題
           desc: desc, // 分享描述
           link: appNewURL, // 分享鏈接
           imgUrl: imgUrl // 分享圖標
         });
         wx.onMenuShareTimeline({
           title: title, // 分享標題
           desc: desc, // 分享描述
           link: timeNewURL, // 分享鏈接
           imgUrl: imgUrl // 分享圖標
         });
       });
     }
   })

 }
 export default wxShare;