這篇文章主要介紹微信公眾號開發(fā)之微信JSSDK的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
成都創(chuàng)新互聯(lián)公司專注于高平網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供高平營銷型網(wǎng)站建設(shè)，高平網(wǎng)站制作、高平網(wǎng)頁設(shè)計、高平網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造高平網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供高平網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
概述
微信JS-SDK是微信公眾平臺面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。
通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機(jī)系統(tǒng)的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力， 為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗。
JSSDK使用步驟
步驟一：綁定域名
先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
備注：登錄后可在“開發(fā)者中心”查看對應(yīng)的接口權(quán)限。
步驟二：引入JS文件
在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://www.php.cn/
備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載
步驟三：通過config接口注入權(quán)限驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時進(jìn)行調(diào)用,目前Android微信客 戶端不支持pushState的H5新特性，所以使用pushState來實現(xiàn)web app的頁面會導(dǎo)致簽名失敗，此問題會在Android6.2中修復(fù)）。
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標(biāo)識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});步驟四：通過ready接口處理成功驗證
wx.ready(function(){
// config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});步驟五：通過error接口處理失敗驗證
wx.error(function(res){
// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
});接口調(diào)用說明
所有接口通過wx對象(也可使用jWeixin對象)來調(diào)用，參數(shù)是一個對象，除了每個接口本身需要傳的參數(shù)之外，還有以下通用參數(shù)：
success：接口調(diào)用成功時執(zhí)行的回調(diào)函數(shù)。
fail：接口調(diào)用失敗時執(zhí)行的回調(diào)函數(shù)。
complete：接口調(diào)用完成時執(zhí)行的回調(diào)函數(shù)，無論成功或失敗都會執(zhí)行。
cancel：用戶點擊取消時的回調(diào)函數(shù)，僅部分有用戶取消操作的api才會用到。
trigger: 監(jiān)聽Menu中的按鈕點擊時觸發(fā)的方法，該方法僅支持Menu中的相關(guān)接口。
備注：不要嘗試在trigger中使用ajax異步請求修改本次分享的內(nèi)容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回。
以上幾個函數(shù)都帶有一個參數(shù)，類型為對象，其中除了每個接口本身返回的數(shù)據(jù)之外，還有一個通用屬性errMsg，其值格式如下：
調(diào)用成功時："xxx:ok" ，其中xxx為調(diào)用的接口名
用戶取消時："xxx:cancel"，其中xxx為調(diào)用的接口名
調(diào)用失敗時：其值為具體錯誤信息
///
/// 微信參數(shù)準(zhǔn)備
///
private void WxSdkPramas(bool isShare)
{
var jsSdk = new JSSDKHelper();
//獲取時間戳
var timestamp = JSSDKHelper.GetTimestamp();
//獲取隨機(jī)碼
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相關(guān)代碼：
公眾號JSSDK演示
上面用到的Helper:
public class JSSDKHelper
{
public JSSDKHelper()
{
Parameters = new Hashtable();
}
protected Hashtable Parameters;
///
/// 設(shè)置參數(shù)值
///
///
///
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();
}
///
/// 獲取隨機(jī)字符串
///
///
public static string GetNoncestr()
{
Random random = new Random();
return MD5Util.GetMD5(random.Next(1000).ToString(), "GBK");
}
///
/// 獲取時間戳
///
///
public static string GetTimestamp()
{
TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
return Convert.ToInt64(ts.TotalSeconds).ToString();
}
///
/// sha1加密
///
///
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();
}
///
/// 生成cardSign的加密方法
///
///
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();
}
///
/// 獲取JS-SDK權(quán)限驗證的簽名Signature
///
///
///
///
///
///
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();
}
///
/// 獲取位置簽名AddrSign
///
///
///
///
///
///
///
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();
}
///
/// 獲取卡券簽名CardSign
///
///
///
///
///
///
///
///
///
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();
}
}以上是“微信公眾號開發(fā)之微信JSSDK的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章標(biāo)題：微信公眾號開發(fā)之微信JSSDK的示例分析
文章源于：
http://weahome.cn/article/jcoihs.html
重慶分公司
重慶分公司
