WeChat クラウド開発管理ツールの入門チュートリアル

序文

WeChatクラウド開発管理ツールとは何ですか?
クラウド開発用のバックグラウンド管理ツールのセットとローコード開発ツールを提供します。開発者は、ローコードツールに基づいてビジネスデータベースに接続し、コンポーネントをドラッグアンドドロップしてフロントエンド UI を生成し、さまざまな管理アプリケーションをカスタマイズできます。

ここにいる学生の中には、クラウド開発コンテンツ管理 CMSとの違いは何ですか? と必ず尋ねる人もいます。
これは、より柔軟でカスタマイズ可能なコンテンツ管理として理解でき、マイクロビルドと組み合わせると、より簡単かつ柔軟に使用できます。
マイクロビルドについて知らない場合は、私が以前に書いたローコードプラットフォームのマイクロビルドチュートリアルを読んでください。

体験する

現在、WeChat クラウド開発管理ツールはまだ内部テスト中です。内部テストの許可を申請する必要がある場合は、ここをクリックして入口を申請してください

ホームページを開く

権限が正常に開かれたとき

最新バージョンの WeChat 開発者ツールをダウンロード/更新する
クラウド開発IDEコンソールに入る

3.「その他」の「管理ツール」を選択します。

4. 開いた後、マイクロビルドローコードプラグインプロンプトを開くかどうかを尋ねるプロンプトが表示されるので、「許可」を選択します。

テンプレートエクスペリエンス

このステップから、正式に管理ツールに入ります。最初に表示されるのはテンプレートページです。現在、よく使用されるテンプレートが組み込まれています。テンプレートの「ツールの表示/インストール」をクリックする必要があります。

これは携帯電話のアプリマーケットのようなもので、必要なものを自由にインストールでき、テンプレートさえあれば開発の効率が大幅に向上し、開発コストも大幅に削減できると感じています。アプリ開発者がアプリマーケットを自由に公開でき、有料のテンプレートも作成できるのと同じように、このテンプレートマーケットが開発者のアクセスとリリースをサポートできれば、まだまだ想像の余地はあります。

まず、効果を管理およびテストするカルーセル画像を選択します。

ヒント: 最初の読み込みは遅いので、辛抱強く待つ必要があります。

インストールが成功すると、管理用バックグラウンドアドレスと管理者アカウントのパスワードを取得できます。

リンクをコピーし、アカウントのパスワードを入力してバックグラウンド管理に入ります

管理背景にはシンプルなバナーがあり、管理背景ケースデータの
メニューはカルーセル画像管理、カルーセル画像管理です。

カルーセルをカスタマイズする必要がある場合は、今すぐ画像管理で画像をアップロードする必要があります

次に、カルーセルマップ管理に移動して追加します

では、アプレットはどのようにしてデータを取得するのでしょうか? クラウド開発 IDE コンソールに戻ると、データベースに追加のテーブル cloudbase-sample-banner が存在し、これには 3 つのデータが含まれていることがわかります。

データコードを取得するアプレット

wx.cloud
      .database()
      .collection("cloudbase-sample-banner")
      .where({
        status: "online",
      })
      .get({
        success: (res) => {
          this.setData({
            banner: res.data,
          });
        },
      });

コピー

テンプレートを編集する

では、カルーセル画像テンプレートがニーズを満たせない場合はどうすればよいでしょうか?
例：公式アカウントの記事を表示するには、カルーセルマップをクリックしてジャンプする必要がありますこのとき、記事パスフィールドを追加する必要があります上記の要件を踏まえて、修正してみましょうまず、公式アカウントの記事を表示するには、カルーセルマップをクリックしてジャンプし
ます管理ツール

カルーセル画像テンプレートをクリックして詳細を表示し、下部にある「編集ツール」を選択します

ここでは管理ページの「ページデザイン」を行うことができます

全ページのデータ表示はもちろんデータと切り離せないものです 2番目のメニューは「データソース」です

残りの 2 つのメニューは「マテリアル設定」と「アプリケーション設定」ですが、この 2 つのメニューは比較的シンプルなので、あまり紹介しません。

新しいフィールドを追加するには、「データソース」で「カルーセルの追加」を見つけて「編集」をクリックする必要があります。

入力パラメータを追加します。パスパラメータは記事のパスを表します（カルーセル情報の編集操作も同様です）。

次にコードを変更し、パラメータを取得して追加する場所に属性パスを追加します。

最後に、[メソッドテスト] をクリックしてデータを追加し、効果を確認します。

バックグラウンド管理ページまたはクラウド開発 IDE データベースを通じて、データが正常に追加されたことが確認できます。

追加メソッドが変換されました。次のステップはクエリメソッドを変更し、[クエリカルーセルリスト] を選択し、[出力パラメータ] でサブセットを追加します。クエリデータは複数であるため、配列になっており、クエリして表示したいのは、内部のデータオブジェクトです。(カルーセルマップ情報をクエリする操作は似ていますが、サブセットの代わりにパラメーターを追加する点が異なります)

どのフィールドが追加されるかは、どのようなフィールドが表示されるかです

データソース部分は完了です。
次のステップでは、バックグラウンド管理ページの「追加」と「クエリ」を変更し、「ページデザイン」メニューに切り替えて
「カルーセルの追加」をクリックしてレイアウト構造を確認します。フォームコンテナには多くのコンポーネントが含まれています

記事のパスを入力する必要があるため、単一行の入力コンポーネントを上部からレイアウトにドラッグできます。

次に、表示タイトルとバインドフィールドを変更します。

編集が完了したら、右上隅の「プレビュー」をクリックし、「ライブプレビュー」をクリックします。

このようにして、別ウィンドウを開いて機能テストを行うことができます追加・変更が完了したら、「リスト表示」を変更し、「データテーブル」コンポーネントを選択し、「列管理」にパスを追加します。

リスト表示効果

変更が完了したら、右上隅の「公開」をクリックして、オンラインバージョンの背景を同期する必要があります。

カスタムテンプレート

また、現在のテンプレートではビジネスニーズを満たせない状況もあり、例えば以下の「クラウドデータベース管理」テンプレートは汎用的なjsonしか表示できず、クエリもファジーにできないため、現時点ではカスタマイズする必要があります。

次にアクティビティ一覧を自分で表示させ、ファジークエリを作成するのですが、この要件は最もよく使われる操作と言えます。

データにアクセスする

「クラウドデータベース管理」テンプレートに基づいてクエリアクティビティリストページを追加します。まず「データソース」に切り替え、+ 記号をクリックして「カスタムコード」を選択します。

名前とIDを入力し、「作成」をクリックします。

メソッドの追加

クエリコード、その他の操作については、クラウドベースノード SDK ドキュメントを参照してください。

const cloudbase = require("@cloudbase/node-sdk");

const envId = "<云开发环境ID>";
const collectionName = "<云数据库集合名>";

const app = cloudbase.init({
  env: envId,
});

const db = app.database();

module.exports = async (event, context) => {
  let { pageNo, pageSize } = event;
  if (pageNo < 1) pageNo = 1;

  // 查询条件先固定为空，即查询集合内的所有数据
  const query = db.collection(collectionName).where({});

  const recordsRes = await query
    .skip((pageNo - 1) * pageSize)
    .limit(pageSize)
    .get();
  const totalRes = await query.count();

  return {
    records: recordsRes.data,
    total: totalRes.total,
  };
};

コピー

入力パラメータ設定: pageSize、pageNo
出力パラメータ設定: 「メソッドテスト」を使用してテストを実行し、出力パラメータマッピングを使用します。

データ表示

「ページデザイン」に切り替えて、右上隅の+記号をクリックします。

データテーブルコンポーネントをレイアウトにドラッグアンドドロップします。

データテーブルのデータソースを設定する

リスト内のデータが表示されますが、時間フィールドが繰り返されており、ヘッダーがフィールド名であることがわかりますが、これはユーザーには理解できない可能性があります。

属性列管理で不要なフィールドを削除できます

属性タイトルを変更することもできます。その効果は次のとおりです。

提案

1. より多くの開発者シナリオに対応するには、テンプレートをより充実させる必要がある
2. 自己完結型テンプレートのビジネス思考は包括的ではなく、単純すぎるため直接的ではない 3.
カスタムテンプレートの操作は複雑すぎるため、以下のように簡素化する必要がある:基本的な追加、削除、クエリおよび変更コードを生成します。