Maison > Article > Applet WeChat > WeChat JSSDK pour le développement de comptes publics WeChat
WeChat JSSDK pour le développement de comptes publics WeChat
- 高洛峰original
- 2017-02-22 15:58:462319parcourir
Vue d'ensemble
WeChat JS-SDK est une boîte à outils de développement Web basée sur WeChat fournie par la plateforme publique WeChat pour les développeurs Web.
En utilisant WeChat JS-SDK, les développeurs Web peuvent utiliser WeChat pour utiliser efficacement les capacités des systèmes de téléphonie mobile telles que la prise de photos, la sélection d'images, la voix et la localisation. En même temps, ils peuvent utiliser directement WeChat. pour partager, numériser, coupon, etc. Les capacités uniques de WeChat telles que le paiement offrent aux utilisateurs de WeChat une meilleure expérience Web.
Ce document est destiné aux développeurs Web pour présenter comment utiliser WeChat JS-SDK et les précautions associées.
Étapes d'utilisation du JSSDK
Étape 1 : lier le nom de domaine
Connectez-vous d'abord à la plateforme publique WeChat et entrez les « Paramètres de fonction » des « Paramètres du compte officiel » pour remplir le « Nom de domaine de sécurité de l'interface JS ».
Remarque : Après vous être connecté, vous pouvez afficher les autorisations d'interface correspondantes dans le "Centre des développeurs".
Étape 2 : Introduire les fichiers JS
Introduisez les fichiers JS suivants sur la page qui doit appeler l'interface JS, (prend en charge https) : http:/ /www.php.cn/
Remarques : prend en charge le chargement à l'aide de la méthode de chargement de module standard AMD/CMD
Étape 3 : Injecter la configuration de vérification des autorisations via l'interface de configuration
Toutes les pages qui doivent utiliser JS-SDK doivent d'abord injecter des informations de configuration, sinon elles ne seront pas appelées (la même URL ne doit être appelée qu'une seule fois, et l'application web SPA qui change l'URL peut être appelée à chaque fois que l'URL change. À l'heure actuelle, le client Android WeChat ne prend pas en charge les nouvelles fonctionnalités H5 de pushState, donc l'utilisation de pushState pour implémenter la page de l'application Web entraînera l'échec de la signature. sous Android 6.2).
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
Étape 4 : Procéder à une vérification réussie via l'interface prête à l'emploi
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
Étape 5 : Gérer l'échec de la vérification via l'interface d'erreur
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
Instructions d'appel de l'interface
Tous L'interface est appelée via l'objet wx (l'objet jWeixin peut également être utilisé). Le paramètre est un objet En plus des paramètres qui doivent être transmis par chaque interface elle-même, il existe également les paramètres généraux suivants :
.succès : La fonction de rappel exécutée lorsque l'appel d'interface est réussi.
fail : La fonction de rappel exécutée lorsque l'appel d'interface échoue.
complete : la fonction de rappel exécutée lorsque l'appel d'interface est terminé, quel que soit le succès ou l'échec.
cancel : La fonction de rappel lorsque l'utilisateur clique sur Annuler. Elle n'est utilisée que par certaines API où l'utilisateur annule l'opération.
déclencheur : une méthode qui est déclenchée lorsqu'un bouton du menu est cliqué. Cette méthode ne prend en charge que les interfaces associées dans le menu.
Remarque : N'essayez pas d'utiliser des requêtes asynchrones ajax dans le déclencheur pour modifier le contenu de ce partage, car l'opération de partage client est actuellement une opération synchrone. utilisez le package de retour ajax. Ne sera pas encore revenu.
Les fonctions ci-dessus ont toutes un paramètre de type objet. En plus des données renvoyées par chaque interface elle-même, il existe également un attribut général errMsg, dont le format de valeur est le suivant :
Lorsque l'appel réussit : "xxx:ok", où xxx est le nom de l'interface appelée
Lorsque l'utilisateur annule : "xxx : Cancel" , où xxx est le nom de l'interface appelée
Lorsque l'appel échoue : sa valeur est le message d'erreur spécifique
/// <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;
}- Voici le code associé à 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>L'assistant utilisé ci-dessus :
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();
}
}Pour plus d'articles liés à WeChat JSSDK pour WeChat Développement de comptes publics, veuillez faire attention au site Web PHP chinois !
Articles Liés
Voir plus- Explication détaillée et utilisation simple de la zone de texte du mini programme WeChat
- Développement de compte public PHP WeChat (2) Construction de Baidu BAE et utilisation de la base de données
- php Développement de compte public WeChat (3) php implémente une communication textuelle simple WeChat
- Développement de compte public php WeChat (4) php implémente des réponses de mots clés personnalisées
- Version PHP du magasin WeChat appelant un exemple de code API