解決微信二次分享不顯示摘要和圖片的問題

更新時(shí)間：2017年08月18日 08:10:51 投稿：jingxian

下面小編就為大家?guī)硪黄鉀Q微信二次分享不顯示摘要和圖片的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

解決不顯示摘要和圖片的問題，需要調(diào)用微信公眾號(hào)的js-sdk的api ,需要前端和后臺(tái)的配合，

后臺(tái)需要返回 appid (公眾號(hào)的appid ) 、 timestamp (生成簽名的時(shí)間戳) 、nonceStr (簽名的隨機(jī)字符串) 、 signature (簽名* 可能出錯(cuò))；

1.綁定域名

先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“js接口安全域名”。（特別提示不需要加上http或者h(yuǎn)ttps,吃過虧）

2.首先引入js 文件 http://res.wx.qq.com/open/js/jweixin-1.2.0.js

3.然后在配置wx.config 。

<script>
$(function(){
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填，生成簽名的時(shí)間戳
nonceStr: '', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
})
</script>

4.通過ready接口處理成功驗(yàn)證

wx.ready(function(){
//詳細(xì)代碼
});

5.通過error接口處理失敗驗(yàn)證

wx.error(function(res){});

詳細(xì)頁面代碼

<script src="http://www.ciotimes.com/statics/js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
//js引入錯(cuò)誤導(dǎo)致wx沒有定義。
<script>
  $(function(){
   //獲取本頁面連接，生成簽名需要
   var url = location.href.split('#')[0];
   $.ajax({
    url: "http://XXX/index.php?m=content&c=wechat_share&a=index&pc_hash=WO1sTv",
    type: "POST",
    async:true,
    data:{'url':url},
    cache: false,
    dataType: "json",
    success: function(data){
     wx.config({
      /* debug: true,*/ //調(diào)試模式
      appId: data.appId,
      timestamp:data.timestamp,
      nonceStr:data.nonceStr,
      signature:data.signature,
      jsApiList: [
       'checkJsApi',
       'onMenuShareTimeline',
       'hideOptionMenu',
       'onMenuShareAppMessage'
      ]
     });
     wx.ready(function(){
      wx.checkJsApi({
       jsApiList: [
        'getLocation',
        'onMenuShareTimeline',
        'onMenuShareAppMessage'
       ],
       success: function (res) {
        //alert(res.errMsg);
       }
      });
      //分享給朋友
      wx.onMenuShareAppMessage({
       title: '111',
       desc: '222',
       link: 'http://XXX/index.php?m=content&c=index&a=test_show&catid=83&id=134521&from=singlemessage', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
       imgUrl: 'http:/XXX/2017/0816/20170816061634987.jpg',
       success: function () {
        // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
       },
       cancel: function () {
        // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
       },
       fail: function (res) {
        //alert(res.errMsg);
        //用戶分享失敗取消的回調(diào)函數(shù)
       }
      });
     });
    },
    error: function() {
     alert('ajax request failed!!!!');
     return;
    }
   });
  });
</script>

以上這篇解決微信二次分享不顯示摘要和圖片的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: