以前也做過微信的分享功能,但是那次比較順利,一次通過~
這次再次弄這個的時候發現了以前遺漏的坑。同時也在網上找了好多,大部分寫的都是配置方面的問題,下邊我也會寫到。
問題一
微信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不能當做分享鏈接使用。(這也是我這次碰到的坑)
你可以進入頁面以后再根據情況拉取授權,從而獲得用戶信息。
以上是我碰到的和在網上找到的分享問題,歡迎補充。