微信JS-SDK是微信公眾平台面向網頁開發者提供的基於微信內的網頁開發工具包。通過使用微信JS-SDK,網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力,同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信用戶提供更優質的網頁體驗。
本文以介紹了分享接口里的“發送給朋友”事件的基本用法,其它的類推。
JSSDK使用步驟
1:綁定域名
先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
備注:登錄后可在“開發者中心”查看對應的接口權限。
2:引入JS文件
在需要調用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
本例中還用到了jquery,所以還引用了jquery的js。
3. 通過config接口注入權限驗證配置
JS方法:
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
appId: '<%= appID %>', // 必填,公眾號的唯一標識
timestamp: '<%= timestamp %>', // 必填,生成簽名的時間戳
nonceStr: '<%= nonceStr %>', // 必填,生成簽名的隨機串
signature: '<%= signature %>',// 必填,簽名,見附錄1
// 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
jsApiList: [
'onMenuShareAppMessage'
]
});
這里只寫了一個API接口onMenuShareAppMessage, 更多接口請參考官方文檔:微信JS-SDK說明文檔
debug設為true,會自動彈出一些提示信息;這里要注意的是,errmsg xxxx ok 是正常的,只有不是ok時才說明出錯了。
有些參數是從后台取到的,放在Page_Load里:
string ticket = string.Empty;
timestamp = JSSDKHelper.GetTimestamp();
nonceStr = JSSDKHelper.GetNoncestr();
JSSDKHelper jssdkhelper = new JSSDKHelper();
public readonly string appID = ConfigurationManager.AppSettings["appID"];
ticket = JsApiTicketContainer.TryGetTicket(appID, appSecret);
signature = jssdkhelper.GetSignature(ticket, nonceStr, timestamp, Request.Url.AbsoluteUri.ToString());
官方提供了幾個語言的demo,但就是沒有c#版本的,沒辦法,只能自己動手。這里的 JSSDKHelper 和 JsApiTicketContainer 都是用的Senparc.Weixin 框架。
這些參數都是動態生成的,不能寫死。否則這里就會出現一堆像什么 invalid signature 之類的錯誤。
4. 通過ready接口處理成功驗證
JS 方法:
wx.ready(function () {
wx.onMenuShareAppMessage({
title: '用c#開發微信 系列匯總',
desc: '網上開發微信開發的教程很多,但c#相對較少。這里列出了我所有c#開發微信的文章,方便自己隨時查閱。如果可能,我盡量附上源碼,這樣就可以直接發布運行看效果,更好地理解原理。',
link: url,
imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
trigger: function (res) {
},
success: function (res) {
friendcallback(res);
},
cancel: function (res) {
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
});
備注:不要嘗試在trigger中使用ajax異步請求修改本次分享的內容,因為客戶端分享操作是一個同步操作,這時候使用ajax的回包會還沒有返回。
當分享成功(success)后,可以調用回調函數 friendcallback(res):
friendcallback = function (res) {
var shareUrl = "Share.aspx?type=friend&url=" + encodeURIComponent(url) + "&u=" + "<%= ViewState["navOpenId"] as string %>" + "&s=" + "<%= ViewState["shareOpenId"] as string %>";
//AJAX請求
$.ajax({
type: "get",
url: shareUrl,
beforeSend: function () {
},
success: function () {
},
complete: function () {
},
error: function () {
}
});
};
這里是用ajax把這次分享的記錄通過share頁面,保存到DB里去。當然你可以在這里做你想做的事。