IoT アプレットの開発とデバッグ

開発マシンバインディングアプレットAPPID

開発マシンとは、IoT アプレットの開発時にアプレットの機能としてデバッグされる IoT デバイスを指します。アプレット コンテナの開発者モードを通じて IoT デバイスが APPID にバインドされると、IoT デバイスは開発マシンとみなされます。

開発者モードに入る

Dragonfly シリーズのデバイスが開発者モードに入る

  • Dragonfly デバイスには、電源を入れると 4G カードが搭載されており、電源を入れるとデフォルトで 4G モバイル データ トラフィックを介してインターネットに接続されます。Wi-Fi環境で使用する必要がある場合は、デバイスの電源を入れるときに電源ボタンを長押しして「システム設定」>「ネットワーク設定」に入り、Wi-Fiに接続することをお勧めします。Qingting デバイスの 4G カード料金の説明: 4G カードの使用は 1 年以内は無料です。料金の有効期限が切れたら通知をお待ちください。
    ユーザーがプライベート 4G カードに変更することはお勧めできません。他の 4G カードは Alipay によってテストされていないため、安定性は保証できません。
    ここに画像の説明を挿入
  • 電源ボタンを長押ししてシステム設定ページに入り、「このマシンについて」をクリックしてから、アプレットコンテナを連続 8 回クリックしてアプレット構成を開き、Alipay IoT アプレット設定ページに入り、クリックして開発者モードに入ります。開発者モードとは、Dragonfly デバイスの開発およびデバッグ モードを指します。このモードに入ると、Dragonfly デバイスはミニ プログラム開発ツール (IDE) によってオンラインであると認識され、IoT アプレットをデバイスにプッシュできるようになります。デバッグ中。
    ここに画像の説明を挿入

デスクトップレジデバイス/大画面セルフサービスデバイスが開発者モードに入る

1. デバイスの電源を入れ、Wi-Fi または有線ネットワークに接続します。
2. 起動後にシステムのデスクトップに入り、[システム設定] > [このマシンについて] をクリックして入力します。アプレット コンテナを 8 回連続でクリックして
アプレット設定を開き、Alipay IoT アプレット設定ページに入り、クリックして開発者モードに入ります。

アプレットAPPIDのバインド

ページの下部にある [開発ミニ プログラムの追加] をクリックし、ミニ プログラムの APPID を入力して送信します。
注:
• 開発マシンは、将来、コンテナ、レジ、およびシステムの新しいバージョンを優先的にプッシュします。デバイスが開発に使用されなくなった場合は、開発者モード ページに入り、APPID の右側にある [削除] をクリックしてバインドを解除してください。現在、デバイスを介してのみアクティブにバインドを解除できます。
• 小規模プログラム APPID は最大 10 台の IoT デバイスを開発マシンとしてバインドできますが、同じ IoT 小規模プログラムを IoT デバイスに配布する場合、デバイスの数に制限はありません。IoT デバイスにバインドできるアプレット APPID に制限はありませんが、デバイスで同時に実行できるアプレットは 1 つだけです。
注:
デバッグ中、デバイスは次の開発者モード ページに留まる必要があります。そうしないと、デバッグのためにアプレットがデバイスにプッシュされない可能性があります。
ここに画像の説明を挿入

IDE構成

ミニ プログラムに関連付けられた Alipay アカウントを選択します

ミニ プログラムの開発を支援する開発者がさらに必要な場合は、オープン プラットフォーム コンソールに移動し、対応するミニ プログラムをクリックして管理バックグラウンドに入り、管理 > メンバー管理 > 開発メンバー > 開発メンバーの追加 を選択し、開発者のAlipayアカウント。
注: メイン アカウントはデフォルトで管理者であるため、管理者を開発メンバーとして追加する必要はありません。
ここに画像の説明を挿入

IoT アプレットを作成する

1. IDE インターフェイスでミニ プログラム プロジェクトを作成するか開きます。
ここに画像の説明を挿入
2. 新しいプロジェクトの場合は、IDE ホームページの右側にある + ボタンをクリックした後、ポップアップ ページで端末タイプとして Alipay IoT を選択し、次へをクリックして基本テンプレートを選択し、プロジェクトに名前を付けます次のステップで作成を完了します。
ここに画像の説明を挿入
3. 作成したプロジェクトを開きたい場合は、最初のステップで [プロジェクトを開く] をクリックして、開くプロジェクト ファイルを選択します。
4. プロジェクト ページに入ったら、モバイル端末で Alipay クライアントを開き、管理者または開発者アカウントにログインし、コードをスキャンして IDE にログインする必要があります。
ここに画像の説明を挿入

アプレットを関連付けて開発マシンをバインドする

IDE にログインした後、IDE プロジェクト インターフェイスの左上隅にある関連アプレットをクリックして選択し、ポップアップ ボックスで開発マシンにバインドされているアプレットを選択します。IDE の IoT アプレット プロジェクトは、識別して、現在のログイン IDE アカウントにバインドされている開発者と関連付けられるモードの IoT デバイスをクリックしてデバイスを選択し、バインドされている開発マシンを選択します。
ここに画像の説明を挿入
説明する

  • デバイスが見つからない場合は、開発者モード ページがアプレット APPID に正常にバインドされていることを確認した後、IDE に再度ログインします。
  • デバイスがオフラインであることを示すメッセージが表示された場合は、デバイスが
    開発者モード ページにあるかどうかを確認します。

小規模なプログラム開発

単一画面アプレット

例えば、開発するデバイスがDragonflyシリーズの1画面デバイスや大画面セルフサービスシリーズなど、1画面のみのデバイスの場合、主に以下の3つのステップに分かれます。

ページタイトルバーの設定

アプレットを作成した後、最初にアプレットのページ タイトル バーを構成し、アプレット フレームでウィンドウ構成を表示できます。

小規模プログラム機能開発

IoT アプレットは、さまざまな機能の実現に役立つ一連のIoT アプレット コンポーネントIoT アプレット APIを提供します。さらに、IoT アプレットは、Alipay アプレットの一般的な基本コンポーネント拡張コンポーネント、およびアプレット APIもサポートしますが、2 つのアプレットはキャリアが異なるため、したがって、サポートについては実際のテストを参照してください。
注: Alipay アプレットは、IoT アプレットのコンポーネントと API をサポートしていません。

実機プレビューデバッグ

アプレットの機能開発が完了したら、実機上でプレビューやデバッグを行う必要があるため、IDE上でプレビューまたはデバッグ機能を選択し、開発したアプレットをIoTデバイスにプッシュします。
注: 実デバイスのプレビュー/デバッグがプッシュされた後、再プッシュする場合は、デバイスの開発者モードを終了しないでください。
注: IoT アプレットが開発され、レビューのために提出された後、Alipay のレビュー担当者はアプレットの包括的なレビューを実施します。アプレットのログイン インターフェイスがある場合は、このページにアカウント番号またはサービス プロバイダーの連絡先情報を入力してください。これにより、レビュー担当者がログイン アカウントを取得するために連絡できるようになります。

デュアルスクリーンアプレット

デュアルスクリーンアプレット名のコンセプト

機器範囲: Dragonfly シリーズ デュアル スクリーン デバイス (Dragonfly F4 Plus など)、デュアル スクリーン デスクトップ POS。
2 つのアプレット: メイン画面アプレット (主機能)、二次画面アプレット (補助機能)。
ここに画像の説明を挿入

フロントスクリーンとリアスクリーンのアプリケーションを追加する

セカンダリ画面アプレットの app.json に、次のパラメータを追加します。

//.json
"window": {
  "extScreenApp": "YES"
  // 表示在副屏添加了商家ping'应用的接口。	
}

メイン画面アプレットの app.js ファイルの onLaunch に次のコードを追加します。

// .js
App({
    
    
  onLaunch(options) {
    
    
    // 第一次打开
    my.ix.addExtensionApp({
    
    
        appId: "****************",
        // 填入副屏小程序的 APPID
        type: "screen",
        success: (res) => {
    
    
                console.log("addExtensionApp success:", res)
                },
        fail: (res) => {
    
    
                console.log("addExtensionApp fail:", res)
                },
    })
  }
});

デュアルスクリーンメッセージングを有効にする

2 つの画面は相互にメッセージを送受信できます。メッセージの送信後、宛先はメッセージを監視する必要があるため、送信者と受信者はそれぞれ次の 2 つのインターフェイスを呼び出す必要があります。

  1. 送信者はメッセージ送信インターフェイスを呼び出します。
my.ix.sendBuddyMessage({
    
    
  target: "****************",
   // 填入目标小程序的 APPID。
  data: {
    
     payFinish: true },
  success: (res)=>{
    
    
  },
  fail: (res)=>{
    
    
  }
})
// 可以在不同地方调用消息发送接口。
  1. 受信者はメッセージ監視インターフェイスを呼び出します。
// .js
my.ix.onBuddyMessage({
    
    
  success: (res) => {
    
    
    console.log(res)
  }
})
// 多次调用消息监听接口则会注册多个监听器,一旦调用则会持续监听,建议仅在需要的地方调用。	

メッセージ監視インターフェイスが複数の場所で呼び出される場合、繰り返しの呼び出しを避けるために、対応する場所でログアウト リスナーを呼び出すことをお勧めします。

// .js
my.ix.offBuddyMessage();

打ち上げ前テスト

1. 図に示すように、IDE で [詳細] をクリックし、2 つの無視オプションのチェックを外し、[プレビュー] をクリックしてネットワーク機能が正常かどうかをテストします。Web ビューで Web ページを開けないなど、ネットワーク リクエストが異常な場合は、IDE で下図に示すようにドメイン名情報をクリックして httpRequest ドメイン名のホワイトリストを追加すると、H5 ドメインを表示および構成できます。名前。
2. レビューに提出する前に、実機でプレビューおよびテストする場合は、必ず 2 つの無視オプションのチェックを外してください。そうしないと、レビュー側で不正な操作が発生する可能性があります。
ここに画像の説明を挿入

参考資料:ロットアプレットの公式ドキュメント

おすすめ

転載: blog.csdn.net/qzmlyshao/article/details/130777789