微信的踩坑之路----微信分享title和icon不顯示


以前也做過微信的分享功能,但是那次比較順利,一次通過~

這次再次弄這個的時候發現了以前遺漏的坑。同時也在網上找了好多,大部分寫的都是配置方面的問題,下邊我也會寫到。

問題一

微信js接口安全域名配置問題;如果你的url 為 http://www.demo.com/?type=1;則應該配置安全域名為www.demo.com 或者www.demo.com/;

當然微信的url為https://wx.demo.cn/;則配置安全域名為:wx.demo.cn。如圖:

問題二:引入文件問題

如果你的接口、URL采用的是https協議的話,那么你引入的JS文件必須也是HTTPS的

在需要調用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

如果你已經綁定了域名,那么接下你的操作如下:

第一步:引入相對應的文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

第二步:通過config接口注入權限驗證配置

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
    appId: '', // 必填,公眾號的唯一標識
    timestamp: , // 必填,生成簽名的時間戳
    nonceStr: '', // 必填,生成簽名的隨機串
    signature: '',// 必填,簽名
    jsApiList: [] // 必填,需要使用的JS接口列表
});

第三步:通過ready接口處理成功驗證

wx.ready(function(){
    // config信息驗證后會執行ready方法,所有接口調用都必須在config接口獲得結果之后,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口,則可以直接調用,不需要放在ready函數中。

   var sharedata={
      title: "", // 分享標題
      link: data.share_data.url, // 分享鏈接
      desc:"",
      imgUrl: "http://avatar.csdn.net/4/6/1/3_mafan121.jpg", // 分享圖標
      success: function() {
        // 用戶確認分享后執行的回調函數
        // alert("success")
      },
      cancel: function() {
        // 用戶取消分享后執行的回調函數
        // alert("failed")
      }
   }

   wx.onMenuShareTimeline(sharedata);
    wx.onMenuShareAppMessage(sharedata);

});

第四步:通過error接口處理失敗驗證

wx.error(function(res){
    // config信息驗證失敗會執行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對於SPA可以在這里更新簽名。
});

以上四步是正常使用微信分享接口的流程。

問題三:沒有分享權限

通過微信后台,查看微信公眾號是否擁有分享權限

問題四:顯示body中的第一張圖片(目前我還沒有碰到,在網上看到有人遇到這樣的情況)

處理方法就是:在body里面最前面加入一張不影響頁面的圖片 代碼如下

<body>
  <div style=" overflow:hidden; width:0px; height:0; margin:0 auto; position:absolute; top:-800px;">
     <img src="xxxx/fares.png"></div>
  <div class="swiper-container">
</body>

雖然配置里面title,desc,都是完整的,但分享出去的結果還是錯誤的,所以最好在html的head里面也加上title,及描述

<title>微信二次分享</title>
<meta name="keywords" content="微信二次分享" />
<meta name="description" content="獲取微信二次分享描述" />

問題五:分享鏈接與安全域名不匹配

如果以上解決方案還是不能結果你的問題,你可以看看你的分享鏈接是否是安全域名下,另外,拉取授權的url不能當做分享鏈接使用。(這也是我這次碰到的坑)

你可以進入頁面以后再根據情況拉取授權,從而獲得用戶信息。

以上是我碰到的和在網上找到的分享問題,歡迎補充。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM