WeChat JS-SDK ローカルデバッグ

最近、h5アプリケーション、WeChatのスキャン機能を有効にする必要があります。では、WeChat を使用する必要がありますがJS-SDK、ローカル開発でこの機能JS-SDKを使用する? (機能はWeChatスキャンに限定されません)

ここでは 2 つの方法を紹介します。

デモは Mac M1 で実行されます。他のプラットフォームはご自身で確認してください。

公式アカウントのテストアカウントを申請したとして、操作方法がわからない場合は、前回の記事「WeChat公式アカウントをデバッグしてユーザー情報を取得する」を参照してください。

さて、本文を始めましょう。

1. Ngrok イントラネットの浸透

ングロクとは何ですか？

Ngrokは、パブリックエンドポイントとローカルで実行されているwebサーバー。

Ngrok外国が公開したオープンソースプロジェクトであり、公的サービスも存在するが、国内の壁に阻まれていた。国内組織はngrok、安定していない場合もありますが、デバッグ担当者にとっては十分な実行サービスを確立および運用しています。

サービスが不安定で、デバッグ中に時々ハングアップしてしまうことがありますが、デバッグには影響ありません。

Ngrok をインストールする

「Install ngrok」からngrokソフトウェアをダウンロードしてインストールします。macコマンドライン経由でインストールされたに基づく例を次に示します。

brew install ngrok/ngrok/ngrok

インストールが成功したら、次の方法でコンソールでヘルプをngrok -h表示。

ngrok-ヘルプ.png

ローカルにバインドされた認可トークン

ログインして、dashboard.ngrok.com/get -started… に移動し、認証トークンをコピーします。

ngrok-トークン.png

次に、次のことを許可しますngrok authtoken 复制的授权令牌。

イントラネットへの侵入、ドメイン名リンクの取得

フロントエンドケースではポート番号demoを実行する3000ため、ポート番号でローカルサービスのイントラネット侵入を実行できます。

$ ngrok http 3000

如上图，访问 https://55e4-121-33-184-45.ngrok-free.app 即访问了 http://localhost:3000。

配置 JS-SDK 域名白名单

进入测试号管理配置域名 55e4-121-33-184-45.ngrok-free.app：

js セキュリティドメイン名.png

获取 Access Token

我们获取到测试公众号的 appID 和 appsecret：

試験番号情報.png

然后，通过调用[get] https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 可以获取 access token：

获取 Jsapi Ticket

通过 access_token，我们通过调用 [get] https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 可以获取 Jsapi Ticket：

获取签名

我们已经获取到 jsapi_ticket，之后，通过微信 js 签名工具完成签名：

微信js接口签名校验工具.png

jsapi_ticket：通过 getticket 接口获取的 JSAPI 调用凭证
noncestr：随机生成的字符串（上图是 jimmy）
timestamp：当前时间戳（单位：秒）
url：需要调用 JS 接口的 URL

引入 js-sdk

这里我直接使用 npm 安装：npm install weixin-js-sdk。当然你也可以使用 script 引入外链 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>。

使用 js-sdk 功能

下面我们结合 react 的 demo 代码：

import React, { useState, useEffect } from 'react';
import wx from 'weixin-js-sdk';

function Demo(){
  const [value, setValue] = useState('');
  
  useEffect(() => {
    initJsDdkConfig();
  }, []);
  
  // 初始化 js-sdk 的配置信息
  const initJsDdkConfig = () => {
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: 'wxd14f1f23ebac23ac', // 必填，测试公众号的 app id
      timestamp: '1683904745', // 必填，上图的时间戳
      nonceStr: 'jimmy', // 必填，上图的随机字符串
      signature: '65caaeb958e91f089af2f74a240dffff8c4a5584', // 必填，上图中生成的凭证
      jsApiList: ['scanQRCode'] // 需要使用到 js 接口列表
    });
  }
  
  // 扫描
const scaneMethod = () => {
  wx.ready(function() { // ready 后调用，确保加载了配置
    wx.scanQRCode({
      // 微信扫一扫
      desc: "scanQRCode desc",
      needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success: function(res) {
        const getCode = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        // 设置回填
        setValue(getCode);
      },
      fail: function(res) {
        Toast(res.errMsg);
      }
    })
  })
  }
  
  return (
    <div>
      <button onClick={() => scaneMethod()}>扫一扫</button>
      <p>扫描结果：{ value }</p>
    </div>
  )
}

export default Demo;

まず、JS-SDKの、次に、jsApiListで使用するjsインターフェイスscanQRCode。その後、スキャンコードボタンをクリックしてスキャンコード機能を呼び出します。

WeChat 開発ツールのコンソール出力は次のとおりです。

2. バックエンドと連携してドメイン名を設定する

このバックエンド連携方法では、バックエンドまたは運用および保守の同僚が、次のようなソフトルーティングレベルでプロジェクトをドメイン名にip:portマッピングするfrontend.internal:3000。プロジェクトにアクセスするということは、ローカルプロジェクトにアクセスすることhttp://frontend.internal:3000を意味します。

次のプロセスは、Ngrok イントラネット侵入の章配置 JS-SDK 域名白名单とまったく同じ引入 js-sdkです。使用 js-sdk 功能

あとがき

2 つの方法を比較すると、著者は依然として最初の2方法。1 つはアクセスの安定性が保証されること、もう 1 つはテスト環境がついでにデバッグできること (テスト環境が ip access の場合) です。ただし、1前者はプロジェクトの進行を妨げるものではありません。