核酸検出アプレットの実践的なチュートリアル

1 はじめに

流行の予防と制御の正常化に伴い、市民が核酸検査を便利に実施できるようにするために、核酸検査ポイントが多くの都市に登場しました。居住者は、最寄りの核酸検査ポイントに行って、コードをスキャンして登録することができます。核酸が完成した後、レポートはアプレットで直接取得できるため、非常に便利です。

このチュートリアルでは、この実際のシナリオを例として取り上げ、Microbuild のローコード ツールを組み合わせて核酸検出アプレットを作成します。アプレットは、オンライン予約とマイ予約の 2 つのセクションに分かれています。オンライン予約では、受験者の追加、予約場所の選択、予約日を選択できます。私の予定は、私が生成したレポートを表示できます。

2 データソースの設計

検出点データソース、受診者データソース、予約データソースの計3つのデータソースを設計

2.1 検知点データソース

ここに画像の説明を挿入

2.2 被験者のデータソース

ここに画像の説明を挿入

ここで、証明書の種類は、それ自体でオプション セットを作成する必要があります。オプションの種類は次のとおりです。

ここに画像の説明を挿入

同じ性別でもオプション セットを作成する必要があります。オプションの種類は次のとおりです。
ここに画像の説明を挿入

2.3 核酸予約データソース

直接検出位置を選択できるように、検出位置の関連付け関係を作成する必要があります。
ここに画像の説明を挿入

また、受験者との関連関係を作る必要があり、その人を直接選択することができます
ここに画像の説明を挿入

残りのフィールドは、次の図に示されています。
ここに画像の説明を挿入

3 モデルアプリの作成

レポートをアップロードする必要があるため、核酸検査機関向けのPC側管理アプリケーションを作成する必要があります。マイクロ ビルドは、モデル アプリケーションを作成することによって自動的に生成されます。

Weida コンソールにログインし、[適用] をクリックして、[新しいモデル アプリケーション] をクリックします。
ここに画像の説明を挿入

アプリケーションの名前を入力し、[新規] をクリックします
ここに画像の説明を挿入

作成したデータ ソースを確認して、モデル アプリケーションの作成を完了します。
ここに画像の説明を挿入

プラットフォームは、追加、削除、変更、および確認用のページを自動的に生成します。
ここに画像の説明を挿入

リリース ボタンをクリックすると、構成チェックが自動的に実行され、プロンプトが表示されたすべての問題を的を絞った方法で解決する必要があります。
ここに画像の説明を挿入

アプリケーションが正常に公開されたら、リンクをクリックしてエンタープライズ ワークベンチに入り、特定のコンテンツを表示できます。
ここに画像の説明を挿入

核酸検査機関は、一般的に利用者が閲覧できるように事前に機関の情報を入力する必要があります

4 アプレットを作成する

モデル アプリケーションを作成したら、アプレットを作成し、[適用] をクリックして、[新しいカスタム アプリケーション] をクリックする必要があります。
ここに画像の説明を挿入

アプリケーションの名前を入力し、アプレットを選択して作成を完了します
ここに画像の説明を挿入

その過程で、もう一度クリックして空白のページを作成する必要があります

ここに画像の説明を挿入
ここに画像の説明を挿入

5 ホームページ開発

ホームページには、機能をガイドするグリッド ナビゲーションが用意されています。まず、グリッド ナビゲーション コンポーネントをページに追加します。
ここに画像の説明を挿入

ナビゲーション設定のプロパティを変更し、メニューを検出ポイント、被検者、オンライン予約の 3 つのメニューに調整します
ここに画像の説明を挿入

アイコンをクリックしてページにジャンプします。3 つの新しいページを作成する必要があります。左上隅のページの横にある + 記号をクリックし、追加するページ名を入力します。検査ポイント、検査対象者、オンライン予約ページをそれぞれ追加

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

ページが追加されたら、宮殿ナビゲーションのメニューを対応するページに設定します。
ここに画像の説明を挿入

トップナビゲーションに加えて、ホームページとマイページを切り替えるボトムナビゲーションも追加する必要があります。タブバー コンポーネントを追加する
ここに画像の説明を挿入

タブバーコンポーネントのレイアウトモードをテキストモードに変更、タブリストをホームページとマイニングに変更、選択したページをホームページに設定
ここに画像の説明を挿入

上記のページ作成方法に従って、別のマイページを作成する
ここに画像の説明を挿入

次に、メニュー項目のジャンプを対応するページに変更します
ここに画像の説明を挿入

6 検知ポイントページの展開

検出ポイント ページにデータ リスト コンポーネントを追加する
ここに画像の説明を挿入

データ モデルを変更してポイントをチェックする
ここに画像の説明を挿入

Simple List Title を選択し、テキスト コンテンツを検出ポイント名としてバインドします。
ここに画像の説明を挿入
ここに画像の説明を挿入

これが単純なリスト コンテンツであることを確認し、フィールドを詳細なアドレスとしてバインドします
ここに画像の説明を挿入
ここに画像の説明を挿入

7 受験者一覧ページの開発

検出ポイントのページに情報を表示するだけで、データはPC側で入力します。受験者情報は、利用者が入力する必要があります。データを記録するときは、誰がデータを入力したかを識別する必要があります.この識別は、アプレットの openid です。

初心者の場合は、ログインするためにユーザー名とパスワードの入力をユーザーに要求するなど、出てきたらすぐにアクセス許可を自分で実装する必要がある場合があります。これは一般的にマインドセットによるもので、従来の開発思考でインターネットアプリケーションを適用すると、必然的に迂回につながります。

通常、アプレットのユーザーは、開いた時点で匿名でログインしているため、ログインしないと操作やデータベースへのアクセスができません。次に、アプレットを開いたときにログイン情報を取得する必要があります。つまり、ユーザーの openid を取得します。

どうやってこれを行うのですか?通常、グローバルライフサイクルの起動方法で取得します。左上隅にある 6 つのドットをクリックし、ローコード エディターをクリックします。
ここに画像の説明を挿入

開いたインターフェイスでライフサイクルをクリックして、openid を取得するコードを記述します。
ここに画像の説明を挿入

openid を取得するには、他のページで使用する必要がある場合は、その値をグローバル変数に格納する必要があります. このためには、最初に変数 openid にグローバル変数を作成する必要があります.
ここに画像の説明を挿入
ここに画像の説明を挿入

ローコード エディターのライフサイクルに次のコードを入力して、ユーザーの openid を取得します。

export default {
    
    
  async onAppLaunch(launchOpts) {
    
    
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    const {
    
     OPENID, FROM_OPENID } = await app.utils.getWXContext()
    let userId = FROM_OPENID || OPENID
    if (!userId) {
    
    
      const {
    
     wedaId } = await app.cloud.getUserInfo()
      userId = wedaId
    }
    app.dataset.state.openid = userId
    console.log("openid",app.dataset.state.openid)
  },
  onAppShow(appShowOpts) {
    
    
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    
    
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    
    
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    
    
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    
    
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}

ユーザーの openid を取得したら、ページ機能を開発します. まず、データ リスト コンポーネントを追加し、データ モデルが被検者を選択します。
ここに画像の説明を挿入

弊社検知ポイントのデータは、どなたでもご利用いただけますので、フィルター条件を設定する必要はございません。受験者にとっては、ユーザーが自分で追加したデータのみをクエリできることを願っているため、ユーザーの現在の openid に従ってフィルタリングする必要があります。
ここに画像の説明を挿入

フィールドには openid を選択し、条件には equal を選択し、値には変数を選択して、グローバル変数の openid から値を取得します。検査ポイント ページのデータ バインド方法に従って、検査対象者の名前と証明書番号をそれぞれ対応するフィールドにバインドします。
ここに画像の説明を挿入

リストクエリの他に、受験者の情報を追加する機能もあり、下部にボタンを追加したり、スタイルを固定に設定したり、下部に固定したりできます。
ここに画像の説明を挿入

最初に受験者用の新しいページを作成し、ボタンにクリック イベントを追加して、新しいページにジャンプします。
ここに画像の説明を挿入

8 受験者専用ページの新規開発

新しいページの開発は比較的簡単で、フォーム コンテナを追加し、受験者のデータ ソースを選択するだけで、プラットフォームが自動的にページを生成します。
ここに画像の説明を挿入

ユーザーの openid をグローバル変数に保存しました。ここでは、openid の入力値にバインドし、スタイルを hidden に設定する必要があります。

ここに画像の説明を挿入
ここに画像の説明を挿入

9 核酸予約ページの開発

核酸予約の新規ページもフォームコンテナを使用し、データソースは核酸予約を選択
ここに画像の説明を挿入

Openidの設定方法は受験者の新規ページと同じ
ここに画像の説明を挿入

テスト場所、テスト対象者、および予約時間フィールドのみをユーザーに公開し、残りは非表示にします。
ここに画像の説明を挿入

発生した問題は、検出ポイントを選択するときにデータ ID が表示されることです。名前を表示する必要があります。検出ポイントのデータ ソースを変更し、メイン カラム フィールドを検出ポイント名に変更する必要があります。
ここに画像の説明を挿入

同様に、件名の主な列フィールドも設定します
ここに画像の説明を挿入

もう一度選択するときは正しいです。
ここに画像の説明を挿入

もう1つの問題は、私たちの受験者は全員、ミニプログラムのユーザー自身が入力したデータである必要がある人です. 現在ログインしているユーザーの openid でデータをフィルタリングする必要があります. 検査対象者のドロップダウン選択コンポーネントを選択し、オプションフィルター条件を選択します.
ここに画像の説明を挿入

フィールドのopenidとグローバル変数のopenidを一致させるフィルター条件を追加してフィルタリングする
ここに画像の説明を挿入

これにより、ユーザーは予約時に自分で入力したデータのみを見ることができます。

10 マイページ開発

マイページの機能は、現在のユーザーが予約したレコードのステータスとレポートステータスをリスト形式で表示することです。最初にモデル変数を作成して、現在ログインしているユーザーのレポート データをクエリします。最初に変数識別子を入力してください
ここに画像の説明を挿入

データソースは核酸予約を選択し、メソッドはクエリリストを選択します
ここに画像の説明を挿入

フィルター条件を追加する必要があります。フィールドの openid をグローバル変数の openid と等しくします。
ここに画像の説明を挿入

最終設定結果
ここに画像の説明を挿入

変数を定義したら、コンポーネントを作成する必要があります. レベルに応じて、まず通常のコンテナーを配置し、通常のコンテナーに別の通常のコンテナーを追加し、その中にテキスト コンポーネントを 2 つ配置します。
ここに画像の説明を挿入

最初のテキスト コンポーネントのテキスト コンテンツを状態に変更し、内側のレイヤーで通常のコンテナーを選択し、スタイルをフレックス レイアウトに設定し、両端を揃えます。
ここに画像の説明を挿入

次に、4 つのコンポーネントのクローンを作成します
ここに画像の説明を挿入

検査対象者、検査結果、サンプリング時間、報告時間のテキストの内容を変更します
ここに画像の説明を挿入

最も外側の通常のコンテナーで、ループ表示をバインドし、定義したばかりの変数をバインドします。
ここに画像の説明を挿入
ここに画像の説明を挿入

ループがバインドされた後、フィールドをループ変数の右側のテキストに順番にバインドできます。
ここに画像の説明を挿入

11 ユーザーと認可の作成

すべての機能が開発されたら、ソフトウェアをビジネス担当者に配布して使用する必要があります。アカウントを作成し、ビジネス担当者に権限を割り当てる必要があります。[ユーザー] をクリックし、[新しいユーザー] をクリックして、ユーザー情報を追加します。
ここに画像の説明を挿入
ここに画像の説明を挿入

アカウントを追加したら、どのページにアクセスできるかを制御するロールを追加する必要があります
ここに画像の説明を挿入

設定は管理者のバックグラウンド アプリにアクセスできます
ここに画像の説明を挿入

データ ソース アクセス権をアクティブ化する
ここに画像の説明を挿入

Enterprise Workbench へのアクセスを有効にする
ここに画像の説明を挿入

権限が有効化されると、ユーザーを追加できます

12 リリースとプレビュー

PC 側のアプリケーションについては、直接アクセスできるデフォルトのドメイン名が Weida によって設定されています。アプレットをリリースする必要がある場合は、ナビゲーション バーのリリース ボタンをクリックして正式にリリースします。

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/u012877217/article/details/126814186