目次
概要" >概要
JSSDKの使用手順" >JSSDKの使用手順
ステップ1: ドメイン名をバインドします" > ステップ1: ドメイン名をバインドします
ステップ 2: JS ファイルを導入する" >ステップ 2: JS ファイルを導入する
ステップ 4: 準備完了インターフェースを通じて成功した検証を処理する" >ステップ 4: 準備完了インターフェースを通じて成功した検証を処理する
ステップ 5: エラーインターフェースを通じて失敗した検証を処理する" >ステップ 5: エラーインターフェースを通じて失敗した検証を処理する
インターフェース呼び出し命令" >インターフェース呼び出し命令
ホームページ WeChat アプレット WeChatの開発 WeChat パブリック アカウント開発用の WeChat JSSDK

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

Feb 22, 2017 pm 03:58 PM
WeChatの公開アカウント

概要

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Scrapy は WeChat パブリック アカウント記事のクロールと分析を実装します Scrapy は WeChat パブリック アカウント記事のクロールと分析を実装します Jun 22, 2023 am 09:41 AM

Scrapy は記事のクローリングと WeChat パブリックアカウントの分析を実装します 近年人気のソーシャルメディアアプリケーションである WeChat で運用されているパブリックアカウントも非常に重要な役割を果たしています。誰もが知っているように、WeChat の公開アカウントは記事、グラフィック メッセージ、その他の情報を公開できるため、情報と知識の海です。この情報は、メディア報道、学術研究など、さまざまな分野で広く使用できます。そこで、この記事では、Scrapy フレームワークを使用して WeChat パブリック アカウントの記事をクロールおよび分析する方法を紹介します。 Scr

WeChat公式アカウント認証と非認証の違いは何ですか? WeChat公式アカウント認証と非認証の違いは何ですか? Sep 19, 2023 pm 02:15 PM

WeChat パブリック アカウント認証と非認証の違いは、認証ロゴ、機能権限、プッシュ頻度、インターフェイス権限、およびユーザーの信頼にあります。詳細な紹介: 1. 認証ロゴ. 認証されたパブリック アカウントは、青い V ロゴである公式認証ロゴを取得します. このロゴは、パブリック アカウントの信頼性と権威を高め、ユーザーが本物の公式パブリック アカウントを識別しやすくします。 ; 2. 機能の権限: 認証されたパブリック アカウントには、非認証のパブリック アカウントよりも多くの機能と権限があります。たとえば、認証されたパブリック アカウントは、オンライン決済や商用操作などを実現するための WeChat 支払い機能の有効化を申請できます。

Python での実践的なクローラー戦闘: WeChat パブリック アカウント クローラー Python での実践的なクローラー戦闘: WeChat パブリック アカウント クローラー Jun 10, 2023 am 09:01 AM

Python は、強力なデータ処理機能と Web クローリング機能を備えたエレガントなプログラミング言語です。デジタル時代において、インターネットには大量のデータが溢れており、クローラはデータを取得する重要な手段となっており、Python クローラはデータ分析やマイニングに広く使用されています。この記事では、Python クローラーを使用して WeChat 公開アカウントの記事情報を取得する方法を紹介します。 WeChat 公式アカウントは、オンラインで記事を公開するための人気のソーシャル メディア プラットフォームであり、多くの企業やセルフメディアのプロモーションとマーケティングのための重要なツールです。

PHP を使用して WeChat パブリック アカウント API インターフェイスを構築する PHP を使用して WeChat パブリック アカウント API インターフェイスを構築する May 13, 2023 pm 12:01 PM

今日のインターネット時代において、WeChat 公式アカウントはますます多くの企業にとって重要なマーケティング チャネルとなっています。 WeChat 公式アカウントにさらに多くの機能を実装したい場合は、多くの場合、対応するインターフェイスを作成する必要があります。この記事では、例として PHP 言語を使用して、WeChat パブリック アカウント API インターフェイスを構築する方法を紹介します。 1. 準備 WeChat パブリック アカウント API インターフェイスを作成する前に、開発者は WeChat パブリック アカウントを取得し、WeChat パブリック プラットフォームで開発者インターフェイスの権限を申請する必要があります。アプリケーションが成功すると、関連する開発者の AppID と AppSe を取得できます。

Laravel を使用して WeChat パブリック アカウントに基づいたオンライン注文システムを開発する方法 Laravel を使用して WeChat パブリック アカウントに基づいたオンライン注文システムを開発する方法 Nov 02, 2023 am 09:42 AM

Laravel を使用して WeChat 公式アカウントをベースにしたオンライン注文システムを開発する方法 WeChat 公式アカウントの普及に伴い、ますます多くの企業がオンライン マーケティングの重要なチャネルとして使用し始めています。ケータリング業界では、WeChat パブリック アカウントに基づいたオンライン注文システムを開発することで、企業の効率と売上を向上させることができます。この記事では、Laravel フレームワークを使用してそのようなシステムを開発する方法と、具体的なコード例を紹介します。プロジェクトの準備 まず、Laravel フレームワークがローカル環境にインストールされていることを確認する必要があります。わかりました

公式アカウントは1日1記事しか投稿できないのでしょうか? 公式アカウントは1日1記事しか投稿できないのでしょうか? Jun 16, 2023 pm 02:04 PM

公開アカウントでは、1 日に 1 つの記事を投稿できるだけでなく、一度に最大 8 つの記事を公開することができます 複数の記事を公開する方法: 1. 左側の「素材管理」をクリックし、「新しいグラフィックとテキスト素材」をクリックします。編集を開始します。最初の記事; 2. 最初の記事を編集したら、左側の最初の記事の下にある + 記号をクリックし、「画像とテキストメッセージ」をクリックして 2 番目の記事を編集します; 3. 複数の画像とテキストが完了したら、 をクリックします「保存して一括送信」で複数記事の公開が完了します。

Go 言語フレームワークを使用して WeChat パブリック アカウント アプリケーションを構築する Go 言語フレームワークを使用して WeChat パブリック アカウント アプリケーションを構築する Jun 04, 2023 am 10:40 AM

インターネットの普及とモバイルデバイスの普及により、WeChat 公式アカウントは企業のマーケティングに欠かせないものになりました。 WeChat パブリック アカウントを通じて、企業はユーザーと簡単に対話し、製品やサービスを宣伝し、ブランド認知度を高めることができます。 WeChat パブリック アカウント アプリケーションをより適切に開発するために、Go 言語を使用して WeChat パブリック アカウント アプリケーションを構築することを選択する開発者や企業がますます増えています。 Go 言語は Google によって開発されたプログラミング言語であり、その構文は簡潔であり、高性能で同時実行性の高いリアルタイム アプリケーションの構築に適しています。使いやすさの面でも、

PHP および WeChat パブリック アカウント開発ガイド PHP および WeChat パブリック アカウント開発ガイド Jun 11, 2023 pm 03:31 PM

ソーシャル ネットワークで WeChat パブリック アカウントが徐々に普及するにつれて、ますます多くの開発者が WeChat パブリック アカウント開発の分野に関与し始めています。その中で、PHP は一般的なバックエンド プログラミング言語として、WeChat 公開アカウントの開発にも広く使用され始めています。この記事では、WeChat パブリック アカウント開発における PHP の基礎知識と一般的なテクニックを紹介します。 1. PHP および WeChat パブリック アカウント開発の基本 WeChat パブリック アカウントの開発 WeChat パブリック アカウントとは、情報プッシュなどのさまざまな種類のサービスやコンテンツをユーザーに提供できる、WeChat プラットフォームに基づくインターネット アプリケーションを指します。

See all articles