WeChat JSSDK für die Entwicklung öffentlicher WeChat-Konten

Übersicht

WeChat JS-SDK ist ein auf WeChat basierendes Webentwicklungs-Toolkit, das von der öffentlichen WeChat-Plattform für Webentwickler bereitgestellt wird.

Durch die Verwendung von WeChat JS-SDK können Webentwickler WeChat nutzen, um die Funktionen von Mobiltelefonsystemen wie das Aufnehmen von Bildern, das Auswählen von Bildern, die Sprache und den Standort effizient zu nutzen. Gleichzeitig können sie WeChat direkt nutzen zum Teilen, Scannen, Couponieren usw. Die einzigartigen Funktionen von WeChat, wie z. B. die Zahlung, bieten WeChat-Benutzern ein besseres Web-Erlebnis.

Dieses Dokument richtet sich an Webentwickler, um die Verwendung des WeChat JS-SDK und die damit verbundenen Vorsichtsmaßnahmen vorzustellen.

Schritte zur Verwendung von JSSDK

Schritt 1: Domänennamen binden

Melden Sie sich zunächst bei der öffentlichen WeChat-Plattform an und geben Sie die „Funktionseinstellungen“ der „Offiziellen Kontoeinstellungen“ ein, um den „JS Interface Security Domain Name“ einzugeben.

Hinweis: Nach dem Login können Sie die entsprechenden Schnittstellenberechtigungen im „Developer Center“ einsehen.

Schritt 2: JS-Dateien einführen

Führen Sie die folgenden JS-Dateien auf der Seite ein, die die JS-Schnittstelle aufrufen muss (unterstützt https) : http://www.php.cn/

Bemerkungen: Unterstützt das Laden mit der AMD/CMD-Standard-Modullademethode

Schritt 3: Berechtigungsüberprüfungskonfiguration über die Konfigurationsschnittstelle einfügen

Alle Seiten, die JS-SDK verwenden müssen, müssen zuerst Konfigurationsinformationen einfügen, sonst werden sie nicht aufgerufen (dieselbe URL muss nur einmal aufgerufen werden, und die SPA-Webanwendung ändert sich). Die URL kann jedes Mal aufgerufen werden, wenn sich die URL ändert. Derzeit unterstützt der Android WeChat-Client die neuen H5-Funktionen von pushState. Daher führt die Verwendung von pushState zum Implementieren der Web-App-Seite dazu, dass die Signatur fehlschlägt in Android 6.2).

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

Schritt 4: Erfolgreiche Verifizierung über die fertige Schnittstelle durchführen

wx.ready(function(){

    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

Schritt 5: Behandeln Sie fehlgeschlagene Verifizierungen über die Fehlerschnittstelle

wx.error(function(res){

    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});

Anweisungen zum Aufrufen der Schnittstelle

Alle Die Schnittstelle wird über das wx-Objekt aufgerufen (es kann auch ein jWeixin-Objekt verwendet werden). Zusätzlich zu den Parametern, die von jeder Schnittstelle selbst übergeben werden müssen, gibt es auch die folgenden allgemeinen Parameter:

1. 
   

1. Erfolg: Die Rückruffunktion wird ausgeführt, wenn der Schnittstellenaufruf erfolgreich ist.

2. fail: Die Rückruffunktion wird ausgeführt, wenn der Schnittstellenaufruf fehlschlägt.

3. Abgeschlossen: Die Rückruffunktion wird ausgeführt, wenn der Schnittstellenaufruf abgeschlossen ist, unabhängig von Erfolg oder Misserfolg.

4. Abbrechen: Die Rückruffunktion, wenn der Benutzer auf „Abbrechen“ klickt. Sie wird nur von einigen APIs verwendet, bei denen der Benutzer den Vorgang abbricht.

5. Trigger: Eine Methode, die ausgelöst wird, wenn auf eine Schaltfläche im Menü geklickt wird. Diese Methode unterstützt nur verwandte Schnittstellen im Menü.

Hinweis: Versuchen Sie nicht, asynchrone Ajax-Anfragen im Trigger zu verwenden, um den Inhalt dieser Freigabe zu ändern, da der Client-Freigabevorgang derzeit ein synchroner Vorgang ist. Verwenden Sie das Ajax-Rückgabepaket. Ist noch nicht zurückgekehrt.

Die oben genannten Funktionen verfügen alle über einen Parameter vom Typ Objekt. Zusätzlich zu den von jeder Schnittstelle selbst zurückgegebenen Daten gibt es auch ein allgemeines Attribut errMsg, dessen Wertformat wie folgt lautet:

1. Wenn der Anruf erfolgreich ist: „xxx:ok“, wobei xxx der Name der aufgerufenen Schnittstelle ist

2. Wenn der Benutzer abbricht: „xxx: cancel" , wobei xxx der Name der aufgerufenen Schnittstelle ist

3. Wenn der Aufruf fehlschlägt: sein Wert ist die spezifische Fehlermeldung

/// <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;
        }

1. Das Folgende ist der js-bezogene Code:

<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: &#39;@ViewData["AppId"]&#39;, // 必填，公众号的唯一标识
            timestamp: &#39;@ViewData["Timestamp"]&#39;, // 必填，生成签名的时间戳
            nonceStr: &#39;@ViewData["NonceStr"]&#39;, // 必填，生成签名的随机串
            signature: &#39;@ViewData["Signature"]&#39;,// 必填，签名
            jsApiList: [
                  "checkJsApi",
                    &#39;onMenuShareTimeline&#39;,
                    &#39;onMenuShareAppMessage&#39;,
                    &#39;onMenuShareQQ&#39;,
                    &#39;onMenuShareWeibo&#39;,
                    &#39;hideMenuItems&#39;,
                    &#39;showMenuItems&#39;,
                    &#39;hideAllNonBaseMenuItem&#39;,
                    &#39;showAllNonBaseMenuItem&#39;,
                    &#39;translateVoice&#39;,
                    &#39;startRecord&#39;,
                    &#39;stopRecord&#39;,
                    &#39;onRecordEnd&#39;,
                    &#39;playVoice&#39;,
                    &#39;pauseVoice&#39;,
                    &#39;stopVoice&#39;,
                    &#39;uploadVoice&#39;,
                    &#39;downloadVoice&#39;,
                    &#39;chooseImage&#39;,
                    &#39;previewImage&#39;,
                    &#39;uploadImage&#39;,
                    &#39;downloadImage&#39;,
                    &#39;getNetworkType&#39;,
                    &#39;openLocation&#39;,
                    &#39;getLocation&#39;,
                    &#39;hideOptionMenu&#39;,
                    &#39;showOptionMenu&#39;,
                    &#39;closeWindow&#39;,
                    &#39;scanQRCode&#39;,
                    &#39;chooseWXPay&#39;,
                    &#39;openProductSpecificView&#39;,
                    &#39;addCard&#39;,
                    &#39;chooseCard&#39;,
                    &#39;openCard&#39;
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2。详见：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
        });
        wx.error(function (res) {
            console.log(res);
            alert(&#39;验证失败&#39;);
        });
        wx.ready(function () {
            var url = &#39;http://weixin.senparc.com&#39;;
            var link = url + &#39;@(Request.Url.PathAndQuery)&#39;;
            var imgUrl = url + &#39;/images/v2/ewm_01.png&#39;;
            //转发到朋友圈
            wx.onMenuShareTimeline({
                title: &#39;JSSDK朋友圈转发测试&#39;,
                link: link,
                imgUrl: imgUrl,
                success: function () {
                    alert(&#39;转发成功！&#39;);
                },
                cancel: function () {
                    alert(&#39;转发失败！&#39;);
                }
            });
            //转发给朋友
            wx.onMenuShareAppMessage({
                title: &#39;JSSDK朋友圈转发测试&#39;,
                desc: &#39;转发给朋友&#39;,
                link: link,
                imgUrl: imgUrl,
                type: &#39;link&#39;,
                dataUrl: &#39;&#39;,
                success: function () {
                    alert(&#39;转发成功！&#39;);
                },
                cancel: function () {
                    alert(&#39;转发失败！&#39;);
                }
            });
        });
    </script>
</head>

Der oben verwendete Helfer:

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();
        }
    }

Weitere Artikel zu WeChat JSSDK für WeChat Bei der Entwicklung öffentlicher Konten achten Sie bitte auf die chinesische PHP-Website!