溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹微信公眾號開發之微信JSSDK的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。
通過使用微信JS-SDK，網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力， 為微信用戶提供更優質的網頁體驗。
先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“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
});wx.ready(function(){
// config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});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>上面用到的Helper:
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();
}
}以上是“微信公眾號開發之微信JSSDK的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
