WeChatミニプログラムにおけるネットワークデータリクエストの実装方法

1. ミニプログラムにおけるネットワークリクエストの制限

セキュリティ上の理由から、WeChatミニプログラムではデータインターフェースのリクエストに対して以下の2つの制限が設けられています:
① HTTPSプロトコルのみが許可されます
② インターフェースのドメインは信頼リストに追加する必要があります

2. リクエスト合法ドメインの設定

要件:独自のWeChatミニプログラムでhttps://example.com/ドメインのインターフェースにリクエストを送信したい場合
設定手順:
WeChatミニプログラム管理バックエンドにログイン → 開発 → 開発設定 → サーバードメイン → リクエスト合法ドメインを修正
注意事項:
① ドメインはHTTPSプロトコルのみサポートします
② IPアドレスまたはlocalhostは使用できません
③ ドメインはICP登録が必要です
④ サーバードメインは1ヶ月に最大5回の変更申請が可能です

3. GETリクエストの送信

WeChatミニプログラムが提供するwx.request()メソッドを呼び出すことで、GETデータリクエストを送信できます。以下に例を示します:

wx.request({
  url: 'https://example.com/api/data',  // リクエストするインターフェースアドレス(HTTPS必須)
  method: 'GET',  // リクエスト方式
  data: {         // サーバーに送信するデータ
    username: 'taro',
    age: 25
  },
  success: (response) => {  // リクエスト成功時のコールバック関数
    console.log(response)
  }
})

4. POSTリクエストの送信

WeChatミニプログラムが提供するwx.request()メソッドを呼び出すことで、POSTデータリクエストを送信できます。以下に例を示します:

wx.request({
  url: 'https://example.com/api/submit',  // リクエストするインターフェースアドレス(HTTPS必須)
  method: 'POST',  // リクエスト方式
  data: {         // サーバーに送信するデータ
    username: 'hanako',
    age: 30
  },
  success: (response) => {  // リクエスト成功時のコールバック関数
    console.log(response)
  }
})

5. ページ読み込み時にデータをリクエストする

多くの場合、ページが読み込まれた際に自動的に初期データをリクエストする必要があります。この場合、ページのonLoadイベント内でデータ取得関数を呼び出す必要があります。以下に例を示します:

/**
 * ライフサイクル関数--ページ読み込みを監視
 */
onLoad: function (options) {
  this.fetchInitialData()
},

// 初期データを取得
fetchInitialData() {
  wx.request({
    url: 'https://example.com/api/initial',
    method: 'GET',
    success: (response) => {
      console.log(response)
      this.setData({
        initialData: response.data
      })
    }
  })
}

6. リクエスト合法ドメイン検証をスキップする

バックエンド開発者がHTTPプロトコルのインターフェースのみを提供し、まだHTTPSプロトコルのインターフェースを提供していない場合、開発の進行を遅らせないために、WeChat開発者ツールで「開発環境ではリクエストドメイン、TLSバージョンおよびHTTPS証明書を検証しない」オプションを一時的に有効にして、リクエスト合法ドメインの検証をスキップできます。 注意:
リクエスト合法ドメイン検証をスキップするオプションは、開発およびデバッグ段階でのみ使用可能です!

7. クロスドメインとAjaxに関する説明

クロスドメイン問題は、ブラウザベースのWeb開発にのみ存在します。WeChatミニプログラムのホスト環境はブラウザではなくWeChatクライアントであるため、ミニプログラムにはクロスドメインの問題は存在しません。 Ajax技術の核心はブラウザのXMLHttpRequestオブジェクトに依存していますが、WeChatミニプログラムのホスト環境はWeChatクライアントであるため、ミニプログラムでは「Ajaxリクエストを送信する」とは言わず、「ネットワークデータリクエストを送信する」と言います。

タグ: WeChatミニプログラム ネットワークリクエスト HTTPS データ取得

6月10日 16:39 投稿