微信公眾號開發之微信JSSDK
概述
微信JS-SDK是微信公眾平檯面向網頁開發者提供的基於微信內的網頁開發工具包。
透過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力， 為微信使用者提供更優質的網頁體驗。
此文件面向網頁開發者介紹微信JS-SDK如何使用及相關注意事項。
JSSDK使用步驟
# 步驟一：綁定網域名稱
# 先登入微信公眾平台進入「公眾號設定」的「功能設定」填寫「JS介面安全網域」。
備註：登入後可在「開發者中心」查看對應的介面權限。
步驟二：引入JS檔案
在需要呼叫JS介面的頁面引入如下JS文件，（支援https）：http:/ /www.php.cn/
備註：支援使用AMD/CMD 標準模組載入方法載入
步驟三：透過config介面注入權限驗證設定
所有需要使用JS-SDK的頁面必須先註入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客 戶端不支援pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽章失敗，此問題會在Android6.2中修復）。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});步驟四：透過ready介面處理成功驗證
#wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
步驟五：透過error介面處理失敗驗證
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});介面呼叫說明
所有介面透過wx物件(也可使用jWeixin對象)來調用，參數是一個對象，除了每個接口本身需要傳的參數之外，還有以下通用參數：
success：介面呼叫成功時執行的回呼函數。
fail：介面呼叫失敗時執行的回呼函數。
complete：在介面呼叫完成時執行的回呼函數，無論成功或失敗都會執行。
cancel：使用者點擊取消時的回呼函數，只有部分有使用者取消操作的api才會用到。
trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支援Menu中的相關介面。
備註：不要嘗試在trigger中使用ajax非同步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒回來。
以上幾個函數都帶有一個參數，類型為對象，其中除了每個接口本身返回的資料之外，還有一個通用屬性errMsg，其值格式如下：
呼叫成功時："xxx:ok" ，其中xxx為呼叫的介面名稱
使用者取消時："xxx:cancel" ，其中xxx為呼叫的介面名稱
呼叫失敗時：其值為具體錯誤訊息
/// <summary>
/// 微信参数准备
/// </summary>
private void WxSdkPramas(bool isShare)
{
var jsSdk = new JSSDKHelper();
//获取时间戳
var timestamp = JSSDKHelper.GetTimestamp();
//获取随机码
var nonceStr = JSSDKHelper.GetNoncestr();
var appId = WeiXinAppId;
var appSecret = WeiXinAppSecret;
//获取票证
var jsTicket = JsApiTicketContainer.TryGetTicket(appId, appSecret);
//获取签名
var signature = jsSdk.GetSignature(jsTicket, nonceStr, timestamp, Request.Url.AbsoluteUri);
ViewData["AppId"] = appId;
ViewData["Timestamp"] = timestamp;
ViewData["NonceStr"] = nonceStr;
ViewData["Signature"] = signature;
}- 下面是js相關程式碼：
<head>
<meta name="viewport" content="width=device-width" />
<title>公众号JSSDK演示</title>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '@ViewData["AppId"]', // 必填，公众号的唯一标识
timestamp: '@ViewData["Timestamp"]', // 必填，生成签名的时间戳
nonceStr: '@ViewData["NonceStr"]', // 必填，生成签名的随机串
signature: '@ViewData["Signature"]',// 必填，签名
jsApiList: [
"checkJsApi",
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2。详见：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
});
wx.error(function (res) {
console.log(res);
alert('验证失败');
});
wx.ready(function () {
var url = 'http://weixin.senparc.com';
var link = url + '@(Request.Url.PathAndQuery)';
var imgUrl = url + '/images/v2/ewm_01.png';
//转发到朋友圈
wx.onMenuShareTimeline({
title: 'JSSDK朋友圈转发测试',
link: link,
imgUrl: imgUrl,
success: function () {
alert('转发成功！');
},
cancel: function () {
alert('转发失败！');
}
});
//转发给朋友
wx.onMenuShareAppMessage({
title: 'JSSDK朋友圈转发测试',
desc: '转发给朋友',
link: link,
imgUrl: imgUrl,
type: 'link',
dataUrl: '',
success: function () {
alert('转发成功！');
},
cancel: function () {
alert('转发失败！');
}
});
});
</script>
</head>public class JSSDKHelper
{
public JSSDKHelper()
{
Parameters = new Hashtable();
}
protected Hashtable Parameters;
/// <summary>
/// 设置参数值
/// </summary>
/// <param name="parameter"></param>
/// <param name="parameterValue"></param>
private void SetParameter(string parameter, string parameterValue)
{
if (!string.IsNullOrEmpty(parameter))
{
if (Parameters.Contains(parameter))
{
Parameters.Remove(parameter);
}
Parameters.Add(parameter, parameterValue);
}
}
private void ClearParameter()
{
Parameters.Clear();
}
/// <summary>
/// 获取随机字符串
/// </summary>
/// <returns></returns>
public static string GetNoncestr()
{
Random random = new Random();
return MD5Util.GetMD5(random.Next(1000).ToString(), "GBK");
}
/// <summary>
/// 获取时间戳
/// </summary>
/// <returns></returns>
public static string GetTimestamp()
{
TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
return Convert.ToInt64(ts.TotalSeconds).ToString();
}
/// <summary>
/// sha1加密
/// </summary>
/// <returns></returns>
private string CreateSha1()
{
StringBuilder sb = new StringBuilder();
ArrayList akeys = new ArrayList(Parameters.Keys);
akeys.Sort();
foreach (string k in akeys)
{
string v = (string)Parameters[k];
if (sb.Length == 0)
{
sb.Append(k + "=" + v);
}
else
{
sb.Append("&" + k + "=" + v);
}
}
return SHA1UtilHelper.GetSha1(sb.ToString()).ToString().ToLower();
}
/// <summary>
/// 生成cardSign的加密方法
/// </summary>
/// <returns></returns>
private string CreateCardSha1()
{
StringBuilder sb = new StringBuilder();
ArrayList akeys = new ArrayList(Parameters.Keys);
akeys.Sort();
foreach (string k in akeys)
{
string v = (string)Parameters[k];
sb.Append(v);
}
return SHA1UtilHelper.GetSha1(sb.ToString()).ToString().ToLower();
}
/// <summary>
/// 获取JS-SDK权限验证的签名Signature
/// </summary>
/// <param name="ticket"></param>
/// <param name="noncestr"></param>
/// <param name="timestamp"></param>
/// <param name="url"></param>
/// <returns></returns>
public string GetSignature(string ticket, string noncestr, string timestamp, string url)
{
//清空Parameters
ClearParameter();
SetParameter("jsapi_ticket", ticket);
SetParameter("noncestr", noncestr);
SetParameter("timestamp", timestamp);
SetParameter("url", url);
return CreateSha1();
}
/// <summary>
/// 获取位置签名AddrSign
/// </summary>
/// <param name="appId"></param>
/// <param name="appSecret"></param>
/// <param name="noncestr"></param>
/// <param name="timestamp"></param>
/// <param name="url"></param>
/// <returns></returns>
public string GetAddrSign(string appId, string appSecret, string noncestr, string timestamp, string url)
{
//清空Parameters
ClearParameter();
var accessToken = AccessTokenContainer.TryGetToken(appId, appSecret);
SetParameter("appId", appId);
SetParameter("noncestr", noncestr);
SetParameter("timestamp", timestamp);
SetParameter("url", url);
SetParameter("accesstoken", accessToken);
return CreateSha1();
}
/// <summary>
/// 获取卡券签名CardSign
/// </summary>
/// <param name="appId"></param>
/// <param name="appSecret"></param>
/// <param name="locationId"></param>
/// <param name="noncestr"></param>
/// <param name="timestamp"></param>
/// <param name="cardId"></param>
/// <param name="cardType"></param>
/// <returns></returns>
public string GetCardSign(string appId, string appSecret, string locationId, string noncestr, string timestamp, string cardId, string cardType)
{
//清空Parameters
ClearParameter();
SetParameter("appId", appId);
SetParameter("appsecret", appSecret);
SetParameter("location_id", locationId);
SetParameter("nonce_str", noncestr);
SetParameter("times_tamp", timestamp);
SetParameter("card_id", cardId);
SetParameter("card_type", cardType);
return CreateCardSha1();
}
}
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Scrapy實現微信公眾號文章爬取與分析
Jun 22, 2023 am 09:41 AM
Scrapy實現微信公眾號文章爬取和分析微信是近年來備受歡迎的社群媒體應用，在其中運作的公眾號也扮演著非常重要的角色。眾所周知，微信公眾號是一個資訊和知識的海洋，因為其中每個公眾號都可以發布文章、圖文訊息等資訊。這些資訊可以被廣泛地應用在許多領域中，例如媒體報道、學術研究等。那麼，本篇文章將介紹如何使用Scrapy框架來實現微信公眾號文章的爬取與分析。 Scr
微信公眾號認證和不認證有哪些差別
Sep 19, 2023 pm 02:15 PM
微信公眾號認證和不認證的差異在認證識別、功能權限、推播頻率、介面權限和使用者信任度等方面。詳細介紹：1、認證標識，認證公眾號會獲得官方頒發的認證標識，即藍色V標誌，這個標誌可以增加公眾號的可信度和權威性，讓用戶更容易辨別真實的官方公眾號； 2、功能權限，認證公眾號相比未認證的公眾號擁有更多的功能和權限，例如認證公眾號可以申請開通微信支付功能，實現在線支付和商業化運營等等。
Python中的爬蟲實戰：微信公眾號爬蟲
Jun 10, 2023 am 09:01 AM
Python是一種優雅的程式語言，具有強大的資料處理和網路爬蟲功能。在這個數位時代，網路上充滿了大量的數據，爬蟲已成為獲取數據的重要手段，因此，Python爬蟲在數據分析和挖掘方面有著廣泛的應用。在本文中，我們將介紹如何使用Python爬蟲來取得微信公眾號文章資訊。微信公眾號是一種流行的社交媒體平台，用於線上發布文章，是許多公司和自媒體推廣和行銷的重要工
用PHP建構一個微信公眾號API介面
May 13, 2023 pm 12:01 PM
在當今網路時代，微信公眾號成為了越來越多企業的重要行銷管道。想要自己的微信公眾號實現更多的功能，常常需要寫對應的介面。本文將以PHP語言為例，介紹如何建構一個微信公眾號API介面。一、前置準備在編寫微信公眾號API介面之前，需要開發者擁有一個微信公眾號的帳號，並且在微信公眾平台中申請開發者介面權限。申請成功後，可以取得相關的開發者AppID和AppSe
如何使用Laravel開發一個基於微信公眾號的線上點餐系統
Nov 02, 2023 am 09:42 AM
如何使用Laravel開發一個基於微信公眾號的線上點餐系統隨著微信公眾號的廣泛應用，越來越多的企業開始將其作為線上行銷的重要管道。在餐飲業中，開發一個基於微信公眾號的線上點餐系統能夠提高企業的效率和銷售額。本文將介紹如何使用Laravel框架來開發一個這樣的系統，並提供具體的程式碼範例。專案準備首先，需要確保已經在本地環境中安裝了Laravel框架。可以通
公眾號每天只能發一篇文章嗎
Jun 16, 2023 pm 02:04 PM
公眾號每天不是只能發一篇文章，每次最多可以發表八篇文章，多篇文章的發布方法：1、點擊左側的“素材管理”，再點擊“新建圖文素材”開始編輯第一篇文章；2、編輯完第一篇文章之後，點選左側第一篇文章下面的+號，點選「圖文訊息」即可編輯第二篇文章；3、做完多圖文後，點選「保管並群發」即可完成多篇文章的發布。
使用Go語言框架建構微信公眾號應用
Jun 04, 2023 am 10:40 AM
隨著網路的普及和行動裝置的廣泛使用，微信公眾號已經成為了企業行銷不可或缺的一部分。透過微信公眾號，企業可以實現輕鬆地與用戶互動，推廣產品和服務，提高品牌知名度。為了更好地開發微信公眾號應用，越來越多的開發者和企業選擇使用Go語言來建立微信公眾號應用程式。 Go語言是一種由Google開發的程式語言，它的語法簡潔，適合建立高效能、高並發的即時應用程式。在簡單易用和
PHP與微信公眾號開髮指南
Jun 11, 2023 pm 03:31 PM
隨著微信公眾號在社群網路中的逐漸普及，越來越多的開發者開始涉足微信公眾號開發領域。在這其中，PHP作為一種常見的後端程式語言，也開始被廣泛應用於微信公眾號的開發。本文將介紹PHP在微信公眾號發展上的基礎知識與常用技巧。一、PHP與微信公眾號開發基礎微信公眾號開發微信公眾號是指一種基於微信平台的互聯網應用程序，可以為用戶提供不同類型的服務和內容，如信息推送
