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証明書を検証しない」オプションを一時的に有効にして、リクエスト合法ドメインの検証をスキップできます。 注意:リクエスト合法ドメイン検証をスキップするオプションは、開発およびデバッグ段階でのみ使用可能です!