概述
微信JS-SDK是微信公眾平臺(tái)面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。
通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機(jī)系統(tǒng)的能力，同時(shí)可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力， 為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗(yàn)。
此文檔面向網(wǎng)頁開發(fā)者介紹微信JS-SDK如何使用及相關(guān)注意事項(xiàng)。
JSSDK使用步驟
步驟一：綁定域名
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
備注：登錄后可在“開發(fā)者中心”查看對(duì)應(yīng)的接口權(quán)限。
步驟二：引入JS文件
在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://ipnx.cn/
備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載
步驟三：通過config接口注入權(quán)限驗(yàn)證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客 ? ?戶端不支持pushState的H5新特性，所以使用pushState來實(shí)現(xiàn)web app的頁面會(huì)導(dǎo)致簽名失敗，此問題會(huì)在Android6.2中修復(fù)）。
wx.config({
????debug:?true,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
????appId:?'',?//?必填，公眾號(hào)的唯一標(biāo)識(shí)
????timestamp:?,?//?必填，生成簽名的時(shí)間戳
????nonceStr:?'',?//?必填，生成簽名的隨機(jī)串
????signature:?'',//?必填，簽名，見附錄1
????jsApiList:?[]?//?必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
步驟四：通過ready接口處理成功驗(yàn)證
wx.ready(function(){
????//?config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});
?
步驟五：通過error接口處理失敗驗(yàn)證
wx.error(function(res){
????//?config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
});
接口調(diào)用說明
所有接口通過wx對(duì)象(也可使用jWeixin對(duì)象)來調(diào)用，參數(shù)是一個(gè)對(duì)象，除了每個(gè)接口本身需要傳的參數(shù)之外，還有以下通用參數(shù)：
success：接口調(diào)用成功時(shí)執(zhí)行的回調(diào)函數(shù)。
fail：接口調(diào)用失敗時(shí)執(zhí)行的回調(diào)函數(shù)。
complete：接口調(diào)用完成時(shí)執(zhí)行的回調(diào)函數(shù)，無論成功或失敗都會(huì)執(zhí)行。
cancel：用戶點(diǎn)擊取消時(shí)的回調(diào)函數(shù)，僅部分有用戶取消操作的api才會(huì)用到。
trigger: 監(jiān)聽Menu中的按鈕點(diǎn)擊時(shí)觸發(fā)的方法，該方法僅支持Menu中的相關(guān)接口。
備注：不要嘗試在trigger中使用ajax異步請(qǐng)求修改本次分享的內(nèi)容，因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作，這時(shí)候使用ajax的回包會(huì)還沒有返回。
以上幾個(gè)函數(shù)都帶有一個(gè)參數(shù)，類型為對(duì)象，其中除了每個(gè)接口本身返回的數(shù)據(jù)之外，還有一個(gè)通用屬性errMsg，其值格式如下：
調(diào)用成功時(shí)："xxx:ok" ，其中xxx為調(diào)用的接口名
用戶取消時(shí)："xxx:cancel"，其中xxx為調(diào)用的接口名
調(diào)用失敗時(shí)：其值為具體錯(cuò)誤信息
/// <summary>
/// 微信參數(shù)準(zhǔn)備
/// </summary>
private void WxSdkPramas(bool isShare)
{
var jsSdk = new JSSDKHelper();
//獲取時(shí)間戳
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)代碼：
<head>
<meta name="viewport" content="width=device-width" />
<title>公眾號(hào)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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
appId: '@ViewData["AppId"]', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: '@ViewData["Timestamp"]', // 必填，生成簽名的時(shí)間戳
nonceStr: '@ViewData["NonceStr"]', // 必填，生成簽名的隨機(jī)串
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('驗(yàn)證失敗');
});
wx.ready(function () {
var url = 'http://weixin.senparc.com';
var link = url + '@(Request.Url.PathAndQuery)';
var imgUrl = url + '/images/v2/ewm_01.png';
//轉(zhuǎn)發(fā)到朋友圈
wx.onMenuShareTimeline({
title: 'JSSDK朋友圈轉(zhuǎn)發(fā)測(cè)試',
link: link,
imgUrl: imgUrl,
success: function () {
alert('轉(zhuǎn)發(fā)成功！');
},
cancel: function () {
alert('轉(zhuǎn)發(fā)失?。?amp;#39;);
}
});
//轉(zhuǎn)發(fā)給朋友
wx.onMenuShareAppMessage({
title: 'JSSDK朋友圈轉(zhuǎn)發(fā)測(cè)試',
desc: '轉(zhuǎn)發(fā)給朋友',
link: link,
imgUrl: imgUrl,
type: 'link',
dataUrl: '',
success: function () {
alert('轉(zhuǎn)發(fā)成功！');
},
cancel: function () {
alert('轉(zhuǎn)發(fā)失??！');
}
});
});
</script>
</head>上面用到的Helper:
public class JSSDKHelper
{
public JSSDKHelper()
{
Parameters = new Hashtable();
}
protected Hashtable Parameters;
/// <summary>
/// 設(shè)置參數(shù)值
/// </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>
/// 獲取隨機(jī)字符串
/// </summary>
/// <returns></returns>
public static string GetNoncestr()
{
Random random = new Random();
return MD5Util.GetMD5(random.Next(1000).ToString(), "GBK");
}
/// <summary>
/// 獲取時(shí)間戳
/// </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權(quán)限驗(yàn)證的簽名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();
}
}更多微信公眾號(hào)開發(fā)之微信JSSDK?相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
Scrapy實(shí)現(xiàn)微信公眾號(hào)文章爬取和分析
Jun 22, 2023 am 09:41 AM
Scrapy實(shí)現(xiàn)微信公眾號(hào)文章爬取和分析微信是近年來備受歡迎的社交媒體應(yīng)用，在其中運(yùn)營的公眾號(hào)也扮演著非常重要的角色。眾所周知，微信公眾號(hào)是一個(gè)信息和知識(shí)的海洋，因?yàn)槠渲忻總€(gè)公眾號(hào)都可以發(fā)布文章、圖文消息等信息。這些信息可以被廣泛地應(yīng)用在很多領(lǐng)域中，比如媒體報(bào)道、學(xué)術(shù)研究等。那么，本篇文章將介紹如何使用Scrapy框架來實(shí)現(xiàn)微信公眾號(hào)文章的爬取和分析。Scr
微信公眾號(hào)認(rèn)證和不認(rèn)證有哪些區(qū)別
Sep 19, 2023 pm 02:15 PM
微信公眾號(hào)認(rèn)證和不認(rèn)證的區(qū)別在認(rèn)證標(biāo)識(shí)、功能權(quán)限、推送頻率、接口權(quán)限和用戶信任度等方面。詳細(xì)介紹：1、認(rèn)證標(biāo)識(shí)，認(rèn)證公眾號(hào)會(huì)獲得官方頒發(fā)的認(rèn)證標(biāo)識(shí)，即藍(lán)色V標(biāo)志，這個(gè)標(biāo)志可以增加公眾號(hào)的可信度和權(quán)威性，讓用戶更容易辨別真實(shí)的官方公眾號(hào)；2、功能權(quán)限，認(rèn)證公眾號(hào)相比未認(rèn)證的公眾號(hào)擁有更多的功能和權(quán)限，例如認(rèn)證公眾號(hào)可以申請(qǐng)開通微信支付功能，實(shí)現(xiàn)在線支付和商業(yè)化運(yùn)營等等。
Python中的爬蟲實(shí)戰(zhàn)：微信公眾號(hào)爬蟲
Jun 10, 2023 am 09:01 AM
Python是一種優(yōu)雅的編程語言，擁有強(qiáng)大的數(shù)據(jù)處理和網(wǎng)絡(luò)爬蟲功能。在這個(gè)數(shù)字化時(shí)代，互聯(lián)網(wǎng)上充滿了大量的數(shù)據(jù)，爬蟲已成為獲取數(shù)據(jù)的重要手段，因此，Python爬蟲在數(shù)據(jù)分析和挖掘方面有著廣泛的應(yīng)用。在本文中，我們將介紹如何使用Python爬蟲來獲取微信公眾號(hào)文章信息。微信公眾號(hào)是一種流行的社交媒體平臺(tái)，用于在線發(fā)布文章，是許多公司和自媒體推廣和營銷的重要工
用PHP構(gòu)建一個(gè)微信公眾號(hào)API接口
May 13, 2023 pm 12:01 PM
在當(dāng)今互聯(lián)網(wǎng)時(shí)代，微信公眾號(hào)成為了越來越多企業(yè)的重要營銷渠道。想要自己的微信公眾號(hào)實(shí)現(xiàn)更多的功能，常常需要編寫相應(yīng)的接口。本文將以PHP語言為例，介紹如何構(gòu)建一個(gè)微信公眾號(hào)API接口。一、前置準(zhǔn)備在編寫微信公眾號(hào)API接口之前，需要開發(fā)者擁有一個(gè)微信公眾號(hào)的賬號(hào)，并且在微信公眾平臺(tái)中申請(qǐng)開發(fā)者接口權(quán)限。申請(qǐng)成功后，可以獲取到相關(guān)的開發(fā)者AppID和AppSe
如何使用Laravel開發(fā)一個(gè)基于微信公眾號(hào)的在線點(diǎn)餐系統(tǒng)
Nov 02, 2023 am 09:42 AM
如何使用Laravel開發(fā)一個(gè)基于微信公眾號(hào)的在線點(diǎn)餐系統(tǒng)隨著微信公眾號(hào)的廣泛應(yīng)用，越來越多的企業(yè)開始將其作為在線營銷的重要渠道。在餐飲行業(yè)中，開發(fā)一個(gè)基于微信公眾號(hào)的在線點(diǎn)餐系統(tǒng)能夠提高企業(yè)的效率和銷售額。本文將介紹如何使用Laravel框架來開發(fā)一個(gè)這樣的系統(tǒng)，并提供具體的代碼示例。項(xiàng)目準(zhǔn)備首先，需要確保已經(jīng)在本地環(huán)境中安裝好了Laravel框架?？梢酝?/p>
公眾號(hào)每天只能發(fā)一篇文章嗎
Jun 16, 2023 pm 02:04 PM
公眾號(hào)每天不是只能發(fā)一篇文章，每次最多可以發(fā)表八篇文章，多篇文章的發(fā)布方法：1、點(diǎn)擊左側(cè)的“素材管理”，再點(diǎn)擊“新建圖文素材”開始編輯第一篇文章；2、編輯完第一篇文章之后，點(diǎn)擊左側(cè)第一篇文章下面的+號(hào)，點(diǎn)擊“圖文消息”即可編輯第二篇文章；3、做完多圖文后，點(diǎn)擊“保管并群發(fā)”即可完成多篇文章的發(fā)布。
使用Go語言框架構(gòu)建微信公眾號(hào)應(yīng)用
Jun 04, 2023 am 10:40 AM
隨著互聯(lián)網(wǎng)的普及和移動(dòng)設(shè)備的廣泛使用，微信公眾號(hào)已經(jīng)成為了企業(yè)營銷必不可少的一部分。通過微信公眾號(hào)，企業(yè)可以實(shí)現(xiàn)輕松地與用戶互動(dòng)，推廣產(chǎn)品和服務(wù)，提高品牌知名度。為了更好地開發(fā)微信公眾號(hào)應(yīng)用，越來越多的開發(fā)者和企業(yè)選擇使用Go語言來構(gòu)建微信公眾號(hào)應(yīng)用。Go語言是一種由Google開發(fā)的編程語言，它的語法簡(jiǎn)潔，適合構(gòu)建高性能、高并發(fā)的實(shí)時(shí)應(yīng)用程序。在簡(jiǎn)單易用和
微信宣布規(guī)范'封建迷信風(fēng)氣，借宗教、風(fēng)水、運(yùn)勢(shì)等噱頭斂財(cái)或博取關(guān)注”內(nèi)容
Aug 05, 2024 pm 10:26 PM
本站8月1日消息，微信公眾平臺(tái)運(yùn)營中心今日發(fā)文稱，平臺(tái)發(fā)現(xiàn)部分運(yùn)營者發(fā)布的文章中存在封建迷信風(fēng)氣，借宗教、風(fēng)水、運(yùn)勢(shì)等噱頭斂財(cái)或博取關(guān)注，此類內(nèi)容極有可能對(duì)用戶造成誤導(dǎo)或財(cái)產(chǎn)損失。微信方面將采取持續(xù)巡查，一旦發(fā)現(xiàn)違規(guī)內(nèi)容將根據(jù)具體違規(guī)程度作出相應(yīng)處理。本站附違規(guī)案例如下：發(fā)布迷信類相關(guān)標(biāo)題，使用恐嚇、誘導(dǎo)等語氣夸大某行為的危害或負(fù)面影響。▲圖源微信公眾平臺(tái)運(yùn)營中心，下同文章提供算命、看相、占卜等帶封建迷信色彩服務(wù)，并含付費(fèi)項(xiàng)目，如售賣轉(zhuǎn)運(yùn)消災(zāi)商品等。借提供相關(guān)服務(wù)的名義不正當(dāng)?shù)夭杉脩魝€(gè)人隱私信
