關於微信JS-SDK 分享接口的兩個報錯記錄

1、前提：

微信測試號，用微信開發者工具測試

2、簡單複述文檔：

1、引入JS文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需進一步提高服務穩定性，當上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

備註：支持使用 AMD/CMD 標準模塊加載方法加載

二、經過config接口注入權限驗證配置

全部須要使用JS-SDK的頁面必須先注入配置信息

wx.config({

    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。

    appId: '', // 必填，公衆號的惟一標識

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

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

    signature: '',// 必填，簽名

    jsApiList: [] // 必填，須要使用的JS接口列表

});

3、簽名算法

簽名生成規則以下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分） 。對全部待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這裏須要注意的是全部參數名均爲小寫字符。對string1做sha1加密，字段名和字段值都採用原始值，不進行URL 轉義。

即signature=sha1(string1)。 示例：

noncestr=Wm3WZYTPz0wzccnW

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg

timestamp=1414587457

url=http://mp.weixin.qq.com?params=value

步驟1. 對全部待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

 步驟2. 對string1進行sha1簽名，獲得signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事項

1.簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。

2.簽名用的url必須是調用JS接口頁面的完整URL。

3.出於安全考慮，開發者必須在服務器端實現簽名的邏輯。

4、自定義「分享給朋友」及「分享到QQ」按鈕的分享內容（1.4.0）

wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用

    wx.updateAppMessageShareData({

        title: '', // 分享標題

        desc: '', // 分享描述

        link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致

        imgUrl: '', // 分享圖標

        success: function () {

          // 設置成功

        }

});

5、自定義「分享到朋友圈」及「分享到QQ空間」按鈕的分享內容（1.4.0）

wx.ready(function () {      //需在用戶可能點擊分享按鈕前就先調用

    wx.updateTimelineShareData({

        title: '', // 分享標題

        link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致

        imgUrl: '', // 分享圖標

        success: function () {

          // 設置成功

        }

});

 微信開發平臺官方文檔： https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

 

 3、寫代碼

public Map<String,String> getShareInformation(String link) throws Exception{

               String appid = WechatUtil.APPID;

               String appcret = WechatUtil.APPSECRET;

               String timestamp = String.valueOf(System.currentTimeMillis()/1000).trim();

               String noncestr = WechatUtil.generateNonceStr().substring(0,16);

               String jsapi_ticket = wechatUtil.getShareJsapiTick(appid, appcret, 8);

               String signature = Share.SHA1("jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+link);

               Map<String,String>data = new HashMap<String,String>();

               data.put("appId", appid.toString());

               data.put("timestamp",timestamp);

               data.put("nonceStr", noncestr);

               data.put("signature", signature);

               return data;

        }

function setShare(openid){

        var ref = window.location.href.split('#')[0];

               $.ajax({

                       url: comurl+"share/buttonshare.api?link="+ref,

                       type: 'GET',

                       success: function(data){

                          var datas =JSON.parse(data);

                          if(datas.returncode=='0'){

                                       var obj = datas.obj;

                                       wx.config({

                                           debug: true, // 開啓調試模式,

                                          appId: obj.appId, // 必填，公衆號的惟一標識

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

                                          nonceStr: obj.nonceStr, // 必填，生成簽名的隨機串

                                          signature: obj.signature,// 必填，簽名，見附錄1

                                          jsApiList: ['updateAppMessageShareData',

                                          'updateTimelineShareData'], // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2

                                       success:function(res){

                                              console.log("wx.config成功"+res);

                                       },

                                          fail:function(res){

                                              console.log("wx.config失敗"+res);

                                       }

                                   });

                                   wx.ready(function () {      //需在用戶可能點擊分享按鈕前就先調用

                                       wx.updateAppMessageShareData({  //「分享給朋友」及「分享到QQ」

                                              title: '測試', // 分享標題

                                              desc: '快來幫我集能量', // 分享描述

                                              link: comhref+"share.html?openid="+openid, // 分享連接，

                                              imgUrl: comhref+"images/xiaoguanjia.png", // 分享圖標

                                              success: function () {

                                                         console.log("分享成功");

                                                  },

                                                  cancel: function () {

                                                         console.log("取消分享");

                                                  }

                        });

                        wx.updateTimelineShareData({   //「分享到朋友圈」及「分享到QQ空間」

                                              title: '測試', // 分享標題

                                              link: comhref+"share.html?openid="+openid, // 分享連接，

                                              imgUrl: comhref+"images/xiaoguanjia.png", // 分享圖標

                                              success: function () {

                                                         console.log("分享成功");

                                                  },

                                                  cancel: function () {

                                                         console.log("取消分享");

                                                  }

                                       });

                                      

                  });

                      }else{

                                  $.dialog.alert(datas.message)

                          }

                        },

                       error:function(data) {

                             var datas =JSON.parse(data);

                       }

               });

        }

 

4、測試

遇到兩個問題

問題一：報錯 invaid url domain

 

 

緣由是我配置有問題：不能有http://  直接寫域名，就能夠了

 

config經過

 

接着出現問題二：沒有此SDK或暫不支持此SDK模擬

 

是由於我用的微信開發工具，不支持這個工具，換成手機就沒問題了