概述
微信JS-SDK是微信公眾平臺面向網(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使用步驟
步驟一：綁定域名
先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
備注：登錄后可在“開發(fā)者中心”查看對應(yīng)的接口權(quán)限。
步驟二：引入JS文件
在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://www.miracleart.cn/
備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載
步驟三：通過config接口注入權(quán)限驗(yàn)證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個(gè)url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客 ? ?戶端不支持pushState的H5新特性，所以使用pushState來實(shí)現(xiàn)web app的頁面會導(dǎo)致簽名失敗，此問題會在Android6.2中修復(fù)）。
wx.config({
????debug:?true,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印。
????appId:?'',?//?必填，公眾號的唯一標(biāo)識
????timestamp:?,?//?必填，生成簽名的時(shí)間戳
????nonceStr:?'',?//?必填，生成簽名的隨機(jī)串
????signature:?'',//?必填，簽名，見附錄1
????jsApiList:?[]?//?必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
步驟四：通過ready接口處理成功驗(yàn)證
wx.ready(function(){
????//?config信息驗(yàn)證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});
?
步驟五：通過error接口處理失敗驗(yàn)證
wx.error(function(res){
????//?config信息驗(yàn)證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
});
接口調(diào)用說明
所有接口通過wx對象(也可使用jWeixin對象)來調(diào)用，參數(shù)是一個(gè)對象，除了每個(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ù)，無論成功或失敗都會執(zhí)行。
cancel：用戶點(diǎn)擊取消時(shí)的回調(diào)函數(shù)，僅部分有用戶取消操作的api才會用到。
trigger: 監(jiān)聽Menu中的按鈕點(diǎn)擊時(shí)觸發(fā)的方法，該方法僅支持Menu中的相關(guān)接口。
備注：不要嘗試在trigger中使用ajax異步請求修改本次分享的內(nèi)容，因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作，這時(shí)候使用ajax的回包會還沒有返回。
以上幾個(gè)函數(shù)都帶有一個(gè)參數(shù)，類型為對象，其中除了每個(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>公眾號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的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印。
appId: '@ViewData["AppId"]', // 必填，公眾號的唯一標(biāo)識
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ā)測試',
link: link,
imgUrl: imgUrl,
success: function () {
alert('轉(zhuǎn)發(fā)成功！');
},
cancel: function () {
alert('轉(zhuǎn)發(fā)失敗！');
}
});
//轉(zhuǎn)發(fā)給朋友
wx.onMenuShareAppMessage({
title: 'JSSDK朋友圈轉(zhuǎn)發(fā)測試',
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();
}
}更多微信公眾號開發(fā)之微信JSSDK?相關(guān)文章請關(guān)注PHP中文網(wǎng)！
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Scrapy melaksanakan rangkak dan analisis artikel akaun awam WeChat
Jun 22, 2023 am 09:41 AM
Scrapy melaksanakan rangkak artikel dan analisis akaun awam WeChat WeChat ialah aplikasi media sosial yang popular dalam beberapa tahun kebelakangan ini, dan akaun awam yang dikendalikan di dalamnya juga memainkan peranan yang sangat penting. Seperti yang kita sedia maklum, akaun awam WeChat adalah lautan maklumat dan pengetahuan, kerana setiap akaun awam boleh menerbitkan artikel, mesej grafik dan maklumat lain. Maklumat ini boleh digunakan secara meluas dalam banyak bidang, seperti laporan media, penyelidikan akademik, dsb. Jadi, artikel ini akan memperkenalkan cara menggunakan rangka kerja Scrapy untuk merangkak dan menganalisis artikel akaun awam WeChat. Scr
Apakah perbezaan antara pensijilan akaun rasmi WeChat dan bukan pensijilan?
Sep 19, 2023 pm 02:15 PM
Perbezaan antara pensijilan akaun rasmi WeChat dan bukan pensijilan terletak pada logo pensijilan, kebenaran fungsi, kekerapan tolak, kebenaran antara muka dan kepercayaan pengguna. Pengenalan terperinci: 1. Logo pensijilan akaun awam yang disahkan akan memperoleh logo pensijilan rasmi, iaitu logo V biru ini boleh meningkatkan kredibiliti dan kewibawaan akaun awam dan memudahkan pengguna mengenal pasti akaun awam rasmi yang sebenar ; 2. Keizinan fungsi Akaun awam yang diperakui mempunyai lebih banyak fungsi dan kebenaran daripada akaun awam yang diperakui Contohnya, akaun awam yang diperakui boleh memohon untuk mengaktifkan fungsi pembayaran WeChat untuk merealisasikan pembayaran dalam talian dan operasi komersial.
Pertempuran perangkak praktikal dalam Python: perangkak akaun awam WeChat
Jun 10, 2023 am 09:01 AM
Python ialah bahasa pengaturcaraan yang elegan dengan pemprosesan data yang berkuasa dan keupayaan merangkak web. Dalam era digital ini, Internet dipenuhi dengan sejumlah besar data, dan crawler telah menjadi cara penting untuk mendapatkan data Oleh itu, crawler Python digunakan secara meluas dalam analisis data dan perlombongan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan perangkak Python untuk mendapatkan maklumat artikel akaun awam WeChat. Akaun rasmi WeChat ialah platform media sosial yang popular untuk menerbitkan artikel dalam talian dan merupakan alat penting untuk promosi dan pemasaran banyak syarikat dan media sendiri.
Gunakan PHP untuk membina antara muka API akaun awam WeChat
May 13, 2023 pm 12:01 PM
Dalam era Internet hari ini, akaun rasmi WeChat telah menjadi saluran pemasaran yang penting untuk lebih banyak syarikat. Jika anda mahu akaun rasmi WeChat anda melaksanakan lebih banyak fungsi, anda selalunya perlu menulis antara muka yang sepadan. Artikel ini akan menggunakan bahasa PHP sebagai contoh untuk memperkenalkan cara membina antara muka API akaun awam WeChat. 1. Persediaan Sebelum menulis antara muka API akaun awam WeChat, pembangun perlu mempunyai akaun akaun awam WeChat dan memohon kebenaran antara muka pembangun dalam platform awam WeChat. Selepas aplikasi berjaya, anda boleh mendapatkan AppID dan AppSe pembangun yang berkaitan
Cara menggunakan Laravel untuk membangunkan sistem pesanan dalam talian berdasarkan akaun awam WeChat
Nov 02, 2023 am 09:42 AM
Cara menggunakan Laravel untuk membangunkan sistem pesanan dalam talian berdasarkan akaun rasmi WeChat Dengan penggunaan meluas akaun rasmi WeChat, semakin banyak syarikat mula menggunakannya sebagai saluran penting untuk pemasaran dalam talian. Dalam industri katering, membangunkan sistem pesanan dalam talian berdasarkan akaun awam WeChat boleh meningkatkan kecekapan dan jualan perusahaan. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Laravel untuk membangunkan sistem sedemikian dan menyediakan contoh kod khusus. Penyediaan projek Pertama, anda perlu memastikan bahawa rangka kerja Laravel telah dipasang dalam persekitaran setempat. OK
Bolehkah akaun rasmi hanya menyiarkan satu artikel setiap hari?
Jun 16, 2023 pm 02:04 PM
Akaun awam bukan sahaja boleh menyiarkan satu artikel setiap hari, tetapi boleh menerbitkan sehingga lapan artikel pada satu masa. Cara menerbitkan berbilang artikel: 1. Klik "Pengurusan Bahan" di sebelah kiri, dan kemudian klik "Bahan Grafik dan Teks Baharu". untuk mula mengedit. Artikel pertama; 2. Selepas mengedit artikel pertama, klik tanda + di bawah artikel pertama di sebelah kiri dan klik "Mesej Grafik" untuk mengedit artikel kedua dan hantar secara pukal" untuk melengkapkan penerbitan berbilang artikel.
Bina aplikasi akaun awam WeChat menggunakan rangka kerja bahasa Go
Jun 04, 2023 am 10:40 AM
Dengan populariti Internet dan penggunaan meluas peranti mudah alih, akaun rasmi WeChat telah menjadi bahagian penting dalam pemasaran korporat. Melalui akaun awam WeChat, syarikat boleh berinteraksi dengan pengguna dengan mudah, mempromosikan produk dan perkhidmatan serta meningkatkan kesedaran jenama. Untuk membangunkan aplikasi akaun awam WeChat dengan lebih baik, semakin ramai pembangun dan syarikat memilih untuk menggunakan bahasa Go untuk membina aplikasi akaun awam WeChat. Bahasa Go ialah bahasa pengaturcaraan yang dibangunkan oleh Google Sintaksnya ringkas dan sesuai untuk membina aplikasi masa nyata berprestasi tinggi. Dari segi kemudahan penggunaan dan
WeChat mengumumkan bahawa ia akan mengawal kandungan 'khurafat feudal, menggunakan agama, feng shui, tuah dan gimik lain untuk membuat wang atau mendapatkan perhatian'
Aug 05, 2024 pm 10:26 PM
Menurut berita dari laman web ini pada 1 Ogos, Pusat Operasi Platform Awam WeChat mengeluarkan artikel hari ini mengatakan bahawa platform itu mendapati bahawa beberapa artikel yang diterbitkan oleh pengendali mengandungi khurafat feudal dan menggunakan agama, feng shui, kekayaan dan gimik lain untuk mendapatkan wang atau keuntungan. perhatian Kandungan sedemikian berkemungkinan besar Menyebabkan mengelirukan atau kerosakan harta benda kepada pengguna. WeChat akan menjalankan pemeriksaan berterusan, dan sebaik sahaja sebarang kandungan haram ditemui, tindakan yang sepadan akan diambil mengikut tahap pelanggaran tertentu. Kes pelanggaran yang dilampirkan pada laman web ini adalah seperti berikut: menerbitkan tajuk berkaitan khurafat, menggunakan ugutan, dorongan dan nada lain untuk membesar-besarkan bahaya atau kesan negatif kelakuan tertentu. ▲Sumber gambar Pusat Operasi Platform Awam WeChat, artikel yang sama di bawah menyediakan perkhidmatan dengan khurafat feudal seperti tilik nasib, tilik nasib dan tilikan, dan termasuk item berbayar, seperti penjualan produk pemindahan dan bantuan bencana. Mengumpul maklumat privasi peribadi pengguna secara tidak wajar atas nama menyediakan perkhidmatan yang berkaitan
