WeChat JS インターフェースの概要と use_javascript スキルの詳細な説明

基本的な手順

使用説明書

1. JS ファイルをインポートします
JS インターフェース (https をサポート) を呼び出す必要があるページに次の JS ファイルを導入します: http://res.wx.qq.com/open/js/jweixin-1.0.0.js

注: AMD/CMD 標準モジュールロード方法を使用したロードをサポート

2. 構成設定インターフェイスを挿入します
JSSDK を使用する必要があるすべてのページは、最初に構成情報を挿入する必要があります。そうしないと、構成情報は呼び出されません (同じ URL を呼び出す必要があるのは 1 回のみで、URL を変更する SPA Web アプリは URL が変更されるたびに呼び出すことができます)。

コードをコピーします コードは次のとおりです:

wx.config({
debug: true, // デバッグ モードをオンにします。すべての API 呼び出しの戻り値がクライアント側でアラートされます。受信したパラメーターを表示したい場合は、PC 側で開くことができます。ログを介して印刷されますが、PC 側でのみ印刷されます。
appId: '', // 必須、公式アカウントの一意の識別子
timestamp: , // 署名を生成するための必須のタイムスタンプ
nonceStr: '', // 必須、署名のランダムな文字列を生成します
署名: '',//必須、署名。付録 1 を参照
jsApiList: [] // 必須。使用する必要がある JS インターフェイスのリスト。すべての JS インターフェイスのリストについては、付録 2
を参照してください。 });

3. 準備ができたインターフェース

を通じて確認します。

コードをコピーします コードは次のとおりです:

wx.ready(function(){

// 構成情報が検証された後に、ready メソッドが実行されます。すべてのインターフェース呼び出しは、構成インターフェースが結果を取得した後に実行する必要があるため、関連するメソッドを呼び出す必要がある場合は、クライアント側で実行する必要があります。ページがロードされるとき、適切なインターフェイスを配置する必要があります。インターフェイスは、正しく実行されることを保証するために、ready 関数で呼び出されます。ユーザーによってトリガーされた場合にのみ呼び出されるインターフェイスの場合は、直接呼び出すことができるため、ready 関数に配置する必要はありません。
});

4. 検証失敗エラーインターフェイス

コードをコピーします コードは次のとおりです:

wx.error(function(res){
// 構成情報の検証が失敗すると、エラー関数が実行されます。署名の有効期限が切れて検証が失敗した場合は、構成のデバッグ モードを開くか、SPA の場合は返された res パラメータで特定のエラー情報を確認できます。署名はここで更新できます。
});

インターフェース呼び出し手順
すべてのインターフェイスは、wx オブジェクトを通じて呼び出されます (jWeixin オブジェクトも使用できます)。パラメーターは、各インターフェイス自体によって渡される必要があるパラメーターに加えて、次の共通パラメーターもあります。

success: インターフェース呼び出しが成功したときに実行されるコールバック関数。

failed: インターフェイス呼び出しが失敗したときに実行されるコールバック関数。
complete: 成功または失敗に関係なく、インターフェイス呼び出しが完了したときに実行されるコールバック関数。
cancel: ユーザーが「キャンセル」をクリックしたときのコールバック関数。ユーザーが操作をキャンセルする場合にのみ使用されます。
トリガー: メニュー内のボタンがクリックされたときにトリガーされるメソッド。このメソッドは、メニュー内の関連インターフェイスのみをサポートします。

上記の関数にはすべて、各インターフェイス自体によって返されるデータに加えて、オブジェクト型のパラメーターがあり、その値の形式は次のとおりです。

呼び出しが成功した場合: 「xxx:ok」、xxx は呼び出されたインターフェースの名前です

ユーザーがキャンセルする場合: 「xxx:cancel」、xxx は呼び出されたインターフェースの名前です
呼び出しが失敗した場合: その値は特定のエラー メッセージ

基本インターフェース 現在のクライアントのバージョンが指定された JS インターフェイスをサポートしているかどうかを確認します

コードをコピーします コードは次のとおりです:

wx.checkJsApi({
jsApiList: ['chooseImage'] // 検出する必要がある JS インターフェイスのリスト すべての JS インターフェイスのリストについては、付録 2 を参照してください。
成功: function(res) {
//キーと値のペアの形式で返します。利用可能な API 値は true、利用できない API 値は false
// 例: {"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
});

共有インターフェース

「モーメントで共有」ボタンのクリック ステータスを取得し、共有コンテンツ インターフェイスをカスタマイズします

コードをコピー コードは次のとおりです:

wx.onMenuShareTimeline({
タイトル: '', // タイトルを共有
リンク: '', // リンクを共有
imgUrl: '', // アイコンを共有
成功: function () {
//ユーザーが共有を確認した後に実行されるコールバック関数
}、
キャンセル: function () {
//ユーザーが共有をキャンセルした後に実行されるコールバック関数
}
});

「友達に共有」ボタンのクリック状態を取得し、コンテンツ共有インターフェースをカスタマイズします

コードをコピーします コードは次のとおりです:

wx.onMenuShareAppMessage({
タイトル: '', // タイトルを共有
desc: '', // 説明を共有
リンク: '', // リンクを共有
imgUrl: '', // アイコンを共有
Type: '', // 共有タイプ、音楽、ビデオ、またはリンク。空白のままにした場合、デフォルトは link
dataUrl: '', // タイプが音楽またはビデオの場合、データ リンクを指定する必要があります。デフォルトでは空です
成功: function () {
//ユーザーが共有を確認した後に実行されるコールバック関数
}、
キャンセル: function () {
//ユーザーが共有をキャンセルした後に実行されるコールバック関数
}
});

「QQ に共有」ボタンのクリック ステータスを取得し、共有コンテンツ インターフェイスをカスタマイズします

コードをコピーします コードは次のとおりです:

wx.onMenuShareQQ({
タイトル: '', // タイトルを共有
desc: '', // 説明を共有
リンク: '', // リンクを共有
imgUrl: '' // アイコンを共有
成功: function () {
//ユーザーが共有を確認した後に実行されるコールバック関数
}、
キャンセル: function () {
//ユーザーが共有をキャンセルした後に実行されるコールバック関数
}
});

「Tencent Weibo に共有」ボタンのクリック ステータスを取得し、共有コンテンツ インターフェースをカスタマイズします

コードをコピーします コードは次のとおりです:

wx.onMenuShareWeibo({
タイトル: '', // タイトルを共有
desc: '', // 説明を共有
リンク: '', // リンクを共有
imgUrl: '' // アイコンを共有
成功: function () {
//ユーザーが共有を確認した後に実行されるコールバック関数
}、
キャンセル: function () {
//ユーザーが共有をキャンセルした後に実行されるコールバック関数
}
});

画像インターフェース

写真を撮ったり、携帯電話のアルバムから写真を選択したりするためのインターフェース

コードをコピーします コードは次のとおりです:

wx.chooseImage({
成功: function (res) {
var localIds = res.localIds; // 選択した写真のローカル ID リストを返します。localId は画像を表示するための img タグの src 属性として使用できます
}
});

プレビュー画像インターフェイス

コードをコピーします コードは次のとおりです:

wx.previewImage({
Current: '', // 現在表示されている画像リンク
urls: [] // プレビューする必要がある画像リンクのリスト
});

画像のアップロードインターフェース

コードをコピーします コードは次のとおりです:

wx.uploadImage({
localId: '', // アップロードする画像のローカル ID。chooseImage インターフェイスを通じて取得されます
isShowProgressTips: 1// デフォルトは 1 で、進行状況のヒントを表示します
成功: function (res) {
var serverId = res.serverId // イメージのサーバー ID を返します
}
});

注: WeChat ダウンロード マルチメディア ファイル インターフェイスを使用して、アップロードされた写真をダウンロードできます。ここで取得したサーバー ID は、media_id です。

画像インターフェースをダウンロード

コードをコピーします コードは次のとおりです:

wx.downloadImage({
serverId: '', // UploadImage インターフェースを通じて取得される、ダウンロードされる画像のサーバー ID
isShowProgressTips: 1// デフォルトは 1 で、進行状況のヒントを表示します
成功: function (res) {
var localId = res.localId // イメージをダウンロードした後、ローカル ID を返します
}
});

オーディオインターフェース

録画開始インターフェイス

コードをコピーします コードは次のとおりです:

wx.startRecord();

記録停止インターフェイス

コードをコピーします コードは次のとおりです:

wx.stopRecord({
成功: function (res) {
var localId = res.localId;
}
});

モニタリング録画自動停止インターフェース

コードをコピーします コードは次のとおりです:

wx.onVoiceRecordEnd({
// 録音時間が 1 分を超えると停止せずに完全なコールバックが実行されます
完了: 関数 (res) {
var localId = res.localId
}
});

音声インターフェイスを再生

コードをコピーします コードは次のとおりです:

wx.playVoice({
LocalId: '' // stopRecord インターフェイスを通じて取得される、再生されるオーディオのローカル ID
});

再生一時停止インターフェイス

コードをコピーします コードは次のとおりです:

wx.pauseVoice({
LocalId: '' // stopRecord インターフェイスを通じて取得される、一時停止する必要があるオーディオのローカル ID
});

再生停止インターフェイス

コードをコピーします コードは次のとおりです:

wx.stopVoice({
LocalId: '' // stopRecord インターフェイスを通じて取得される、停止する必要があるオーディオのローカル ID
});

音声再生完了を監視するインターフェース

コードをコピーします コードは次のとおりです:

wx.onVoicePlayEnd({
ServerId: '', // ダウンロードされるオーディオのサーバー ID は、uploadVoice インターフェイスを通じて取得されます
成功: function (res) {
var localId = res.localId // オーディオのローカル ID を返します
}
});

音声インターフェースをアップロード

コードをコピーします コードは次のとおりです:

wx.uploadVoice({
localId: '', // stopRecord インターフェースを通じて取得される、アップロードされるオーディオのローカル ID
isShowProgressTips: 1// デフォルトは 1 で、進行状況のヒントを表示します
成功: function (res) {
var serverId = res.serverId // オーディオのサーバー ID を返します
}
});

注: アップロードされた音声は、WeChat マルチメディア ファイル ダウンロード インターフェイスを通じてダウンロードできます。ここで取得したサーバー ID は media_id です。ドキュメントを参照してください。../12/58bfcfabbd501c7cd77c19bd9cfa8354.html

音声インターフェイスをダウンロード

コードをコピーします コードは次のとおりです:

wx.downloadVoice({
serverId: '', // UploadVoice インターフェースを通じて取得される、ダウンロードされるオーディオのサーバー側 ID
isShowProgressTips: 1// デフォルトは 1 で、進行状況のヒントを表示します
成功: function (res) {
var localId = res.localId // オーディオのローカル ID を返します
}
});

スマートインターフェース

音声を認識し、認識結果インターフェースを返します

コードをコピーします コードは次のとおりです:

wx.translateVoice({
localId: '', // 認識する必要があるオーディオのローカル ID。録音関連のインターフェイスから取得されます
isShowProgressTips: 1, //デフォルトは 1 で、進行状況のヒントを表示します
成功: 関数 (res) {
alert(res.translateResult); // 音声認識結果
}
});

デバイス情報

ネットワークステータスインターフェースの取得

コードをコピーします コードは次のとおりです:

wx.getNetworkType({
成功: function (res) {
var networkType = res.networkType // ネットワーク タイプ 2g、3g、4g、wifi
を返します。 }
});

地理的位置

WeChat の組み込みマップを使用して位置情報インターフェイスを表示します

コードをコピーします コードは次のとおりです:

wx.openLocation({
Latitude: 0, // 緯度、浮動小数点数、範囲は 90 ～ -90
Longitude: 0, // 経度、浮動小数点数、範囲は 180 ～ -180。
name: '', // 場所の名前
住所: '', // アドレスの詳細
Scale: 1, // マップのズーム レベル、整形値、1 ～ 28 の範囲。デフォルトは最大です
infoUrl: '' // 表示場所インターフェイスの下部に表示されるハイパーリンクをクリックするとジャンプできます
});

地理的位置インターフェイスを取得します

コードをコピーします コードは次のとおりです:

wx.getLocation({
タイムスタンプ: 0, // 位置署名のタイムスタンプ。6.0.2 より前のバージョンと互換性がある場合にのみ提供されます
nonceStr: '', // 位置署名のランダムな文字列。6.0.2 より前のバージョンと互換性がある場合にのみ提供されます
addrSign: '', // 位置署名。6.0.2 より前のバージョンと互換性がある場合にのみ提供されます。詳細については、付録 4
を参照してください。 成功: function (res) {
var longitude = res.longitude // 緯度、浮動小数点数、範囲は 90 ～ -90
; var latitude = res.latitude; // 経度、浮動小数点数、範囲は 180 ～ -180。
varspeed = res.speed // 速度、メートル/秒
var precision = res.accuracy // 位置精度
}
});

インターフェース操作

コードをコピー コードは次のとおりです:

右上隅のメニューインターフェイスを非表示にします
wx.hideOptionMenu();
右上隅にメニューインターフェイスを表示します
wx.showOptionMenu();
現在の Web ウィンドウ インターフェイスを閉じます
wx.closeWindow();
バッチ隠し機能ボタンインターフェイス
wx.hideMenuItems({
menuList: [] // 非表示にするメニュー項目。すべてのメニュー項目については付録 3 を参照
});
一括表示機能ボタンインターフェース
wx.showMenuItems({
menuList: [] // 表示されるメニュー項目。すべてのメニュー項目については付録 3
を参照 });
基本以外のボタン インターフェイスをすべて非表示にします
wx.hideAllNonBaseMenuItem();
すべての機能ボタンのインターフェースを表示
wx.showAllNonBaseMenuItem();
WeChat でスキャン
WeChat スキャン インターフェイスを開きます
wx.scanQRCode({
説明: 'scanQRCode 説明',
needResult: 0, // デフォルトは 0、スキャン結果は WeChat によって処理され、1 はスキャン結果を直接返します、
scanType: ["qrCode","barCode"], // QR コードと 1D コードのどちらをスキャンするかを指定できます。デフォルトではどちらも使用可能です
成功: function () {
var result = res.resultStr; // needResult が 1 の場合、QR コードをスキャンして返される結果
}
});

収穫アドレス

配送先住所の編集インターフェース

コードをコピーします コードは次のとおりです:

wx.editAddress(
タイムスタンプ: 0, // 位置署名のタイムスタンプ。6.0.2 より前のバージョンと互換性がある場合にのみ提供されます
nonceStr: '', // 位置署名のランダムな文字列。6.0.2 より前のバージョンと互換性がある場合にのみ提供されます
addrSign: '', // 位置署名。6.0.2 より前のバージョンと互換性がある場合にのみ提供されます。詳細については、付録 4
を参照してください。 成功: function (res) {
var userName = res.userName // 荷受人の名前
var telNumber = res.telNumber // 荷受人の電話番号
var postalCode = res.postalCode
; var courtName = res.provinceName // 全国標準配送先住所の第 1 レベルの住所
; var cityName = res.cityName // 全国標準配送先住所の第 2 レベルの住所
var countryName = res.countryName // 全国標準配送先住所の第 3 レベルの住所
var address = res.address; // 配送先住所の詳細情報
varnationalCode = res.nationalCode // 配送先住所の国コード
}
});

最寄りの配送先住所インターフェイスを取得します

コードをコピーします コードは次のとおりです:

wx.getlatestAddress({
タイムスタンプ: 0, // 位置署名のタイムスタンプ。6.0.2 より前のバージョンと互換性がある場合にのみ提供されます
nonceStr: '', // 位置署名のランダムな文字列。6.0.2 より前のバージョンと互換性がある場合にのみ提供されます
addrSign: '', // 位置署名。6.0.2 より前のバージョンと互換性がある場合にのみ提供されます。詳細については、付録 4
を参照してください。 成功: function (res) {
var userName = res.userName // 荷受人の名前
var telNumber = res.telNumber // 荷受人の電話番号
var postalCode = res.postalCode
; varprofitName = res.provinceName // 全国標準配送先住所の第 1 レベルの住所
; var cityName = res.cityName // 全国標準配送先住所の第 2 レベルの住所
var countryName = res.countryName // 全国標準配送先住所の第 3 レベルの住所
var address = res.address; // 配送先住所の詳細情報
varnationalCode = res.nationalCode // 配送先住所の国コード
}
});

WeChat ストア

WeChat 製品ページのインターフェースにジャンプします

コードをコピーします コードは次のとおりです:

wx.openProductSpecificView({
productId: '', // 製品 ID
viewType: '' // 0. デフォルト値、通常の製品詳細ページ 1. 製品詳細ページをスキャン 2. 製品詳細ページを保存
});

WeChat カード クーポン

店舗に適用されるカードとクーポンのリストを呼び出し、ユーザー選択リストを取得します

コードをコピーします コードは次のとおりです:

wx.chooseCard({
shopId: '', // StoreId
CardType: '', // カードタイプ
CardId: '', // カードクーポン ID
timeStamp: 0, // カード署名のタイムスタンプ
nonceStr: '', // カード署名のランダムな文字列
CardSign: '', //カードとクーポンの署名、詳細については付録 6
を参照してください。 成功: function (res) {
var CardList= res.cardList; // ユーザーが選択したカードリスト情報
}
});

カードとクーポンのインターフェースを一括追加

コードをコピーします コードは次のとおりです:

wx.addCard({
カードリスト: [{
カード ID: ''、
カード拡張子: ''
}], // 追加するカードとクーポンのリスト
成功: function (res) {
var CardList = res.cardList // カードとクーポンのリスト情報を追加しました
}
});

WeChat カード パッケージのカードとクーポンのインターフェイスを表示します

コードをコピーします コードは次のとおりです:

wx.openCard({
カードリスト: [{
カード ID: ''、
コード: ''
}]// 開く必要があるカードとクーポンのリスト
});

WeChat Pay

WeChat 支払いリクエストを開始します

コードをコピーします コードは次のとおりです:

wx.chooseWXPay({
タイムスタンプ: 0, // 支払い署名のタイムスタンプ
noncestr: '', // 支払い署名のランダムな文字列
package: '', // 注文詳細拡張文字列、詳細については付録 5
を参照してください。 paySign: '', // 支払い署名、詳細については付録 5 を参照
});