検索

ホームページ  >  記事  >  WeChat アプレット  >  WeChat パブリック アカウント開発用の WeChat JSSDK

WeChat パブリック アカウント開発用の WeChat JSSDK

高洛峰
高洛峰オリジナル
2017-02-22 15:58:462343ブラウズ

概要

WeChat JS-SDKは、Web開発者向けのWeChatパブリックプラットフォームが提供するWeChatをベースとしたWeb開発ツールキットです。

WeChat JS-SDK を使用すると、Web 開発者は WeChat を使用して、写真の撮影、写真の選択、音声、位置情報などの携帯電話システムの機能を効率的に使用できると同時に、WeChat の共​​有、スキャン、クーポン、支払い、その他の WeChat 固有の機能により、WeChat ユーザーに優れた Web エクスペリエンスを提供できます。

このドキュメントでは、Web 開発者向けに WeChat JS-SDK の使用方法と関連する注意事項を紹介します。

JSSDKの使用手順

ステップ1: ドメイン名をバインドします

まず、WeChatパブリックプラットフォームにログインし、「公式アカウント設定」の「機能設定」に入り、「JS」を入力しますインターフェイスの安全なドメイン名」。

注: ログイン後、「開発者センター」で対応するインターフェースの権限を表示できます。

ステップ 2: JS ファイルを導入する

JS インターフェースを呼び出す必要があるページに次の JS ファイルを導入します (https をサポート): http://www.php.cn/

備考: サポートAMD/CMD 標準モジュール読み込みメソッドの使用 読み込み

ステップ 3: 設定インターフェイスを介して権限検証設定を挿入します

JS-SDK を使用する必要があるすべてのページは、最初に設定情報を挿入する必要があります。そうでない場合、設定情報は呼び出されません。 (同じ URL を呼び出す必要があるのは 1 回だけです。URL を変更する SPA Web アプリは、URL が変更されるたびに呼び出すことができます。現在、Android WeChat クライアントは、新しい H5 機能の PushState をサポートしていないため、pushState を使用して実装しますWeb アプリ ページにより署名が失敗します。この問題は Android 6 .2 で発生します。 

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

ステップ 4: 準備完了インターフェースを通じて成功した検証を処理する

wx.ready(function(){

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

ステップ 5: エラーインターフェースを通じて失敗した検証を処理する

wx.error(function(res){

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

});

インターフェース呼び出し命令

すべてのインターフェースが合格しましたwx オブジェクト (jWeixin オブジェクトも使用可能) を呼び出す場合、パラメータはオブジェクトです。各インターフェース自体によって渡される必要があるパラメータに加えて、次の一般的なパラメータもあります:


    1. success: インターフェイスが正常に呼び出されたとき、コールバック関数が実行されました。

    2. fail: インターフェース呼び出しが失敗したときに実行されるコールバック関数。

    3. complete: インターフェイス呼び出しが完了したときに実行されるコールバック関数は、成功または失敗に関係なく実行されます。

    4. cancel: ユーザーがキャンセルをクリックしたときのコールバック関数は、ユーザーが操作をキャンセルする場合にのみ使用されます。

    5. trigger: メニュー内のボタンがクリックされたときにトリガーされるメソッド。このメソッドは、メニュー内の関連するインターフェイスのみをサポートします。

注: この共有のコンテンツを変更するトリガーで ajax 非同期リクエストを使用しないでください。クライアント共有操作は同期操作であり、現時点では ajax を使用した戻りパケットは返されないためです。


上記の関数はすべて、各インターフェース自体によって返されるデータに加えて、オブジェクト型の 1 つのパラメーターを持ち、その値の形式は次のとおりです。呼び出しが成功した場合: "xxx:ok"、xxx は呼び出されたインターフェイスの名前です

    1. ユーザーがキャンセルした場合: "xxx:cancel"、xxx は呼び出されたインターフェイスの名前です

    2. 失敗: 値は特定のエラー メッセージです

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

      以下は、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: &#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>
上記で使用したヘルパー:
    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();
        }
    }
  1. WeChat パブリック アカウント開発に関する WeChat JSSDK 関連記事の詳細については、お支払いください。 PHP 中国語 Web サイトに注意してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：.net WeChat パブリック アカウントの開発 - 基本インターフェイス次の記事：.net WeChat パブリック アカウントの開発 - 基本インターフェイス

関連記事

続きを見る