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

来源:https://www.cnblogs.com/maoyvwang/archive/2018/11/20/9989139.html
-Advertisement-
Play Games

一、前提： 微信測試號，用微信開發者工具測試 二、簡單覆述文檔： 1、引入JS文件 在需要調用JS介面的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js 如需進一步提升服務穩定性，當上述資源不可訪問時，可改訪問：ht ...


一、前提：

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

二、簡單覆述文檔：

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 標準模塊載入方法載入

2、通過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

 

 三、寫代碼

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);

                       }

               });

        }

 

四、測試

遇到兩個問題

問題一：報錯 invaid url domain

 

 

原因是我配置有問題：不能有http://  直接寫功能變數名稱，就可以了

 

config通過

 

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

 

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery實現的上下滾動公告欄詳細講解
    之前做項目的時候，一直都想著做一個上下滾動的公告欄，作為展示網站的最新公告信息，因為剛開始自己的思路並不是太清晰，在網上找了很多的源碼，但是卻發現都不能讓自己滿意，有的還會出現一些小問題，比如，有時候公告上下滾動的時候，兩條公告會重疊在一起。最後我還是決定自己寫一個上下滾動的公告欄。 jQuery實 ...
  • json與object
    json與object的區別：1、JSON是對象，但對象不一定是JSON2、對象的組成是由屬性和屬性值，也就是KEY->VALUE對組成，value可是是任意的數據類型，當value為一個函數的時候，這個時候叫做方法。而你通過 JSON.parse()傳入的字元串並裡面有VALUE為function ...
  • 只知道ajax？你已經out了
    歡迎大家前往 "騰訊雲+社區" ，獲取更多騰訊海量技術實踐乾貨哦~ 本文由 "前端林子" 發表於 "雲+社區專欄" 隨著前端技術的發展，請求伺服器數據的方法早已不局限於ajax、jQuery的ajax方法。各種js庫已如雨後春筍一般，蓬勃發展，本文主要想介紹其中的axios和fetch。 0.引入 ...
  • ES6 -- 模板字元串（反單引號）
    1）直接使用變數 備註：如需使用字元$或{，請使用`\`或`$\{` 2）多行書寫 ...
  • css 獲取從第n個開始，之後的所有元素
    現要獲取box中，除了第一個之外的其他的div ： 其中n後面的數字，是幾就是從第幾個開始獲取。 例子中從第二個div開始獲取， 所以是 n+2 ...
  • 淺談JavaScript事件(上篇)
    一 簡述JavaScript及其在瀏覽器中的地位 （一） 瀏覽器主要構成 雖然不同瀏覽器之間存在差異(如Google Chrome,Firefox,Safari和IE等)，但單從瀏覽器構成來說，大同小異，大致可歸結為如下幾類： 1.User Interface(用戶界面)：所謂用戶界面，就是通過瀏覽 ...
  • 嘗試筆記 01 之 CSS 邊角上的標簽
    作者： 八月未見 博客： https://www.cnblogs.com/jmtm/ 以下內容我僅嘗試了Firefox瀏覽器，其他瀏覽器效果未知。 嘗試做一個 CSS 寫的角標，因為不能把它移到角落去，所以只能用偽類把兩邊擋住，假裝是一個梯形的角標。 <div id="mark"> <h1>未見八月 ...
  • QQ音樂vkey獲取,更新播放url
    QQ音樂介面播放經常換， 最開始 url: `http://ws.stream.qqmusic.qq.com/${musicData.songid}.m4a?fromtag=46` 然後 url:`http://ws.stream.qqmusic.qq.com/C100${musicData.son ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類