これまでの 7 つの記事では PC 側の機能について説明しましたが、販売者にはモバイル側のバックエンド管理プログラムのセットを提供する必要もあります。WeChatではH5を利用してモバイルバックグラウンドプログラムを開発し、開発完了後はログインを可能にし、管理者が携帯電話上で操作できるようにします。
01 アプリケーションを作成する
WeChat バックエンドにログインし、[アプリケーションの作成] をクリックして、新しいカスタム アプリケーションを作成します。
02 設定メニュー
通常、モバイル プログラムにはナビゲーション メニューを提供しており、ここではグリッド ナビゲーションを使用してナビゲーション メニューを設定します。右側のコンポーネント領域からグリッド ナビゲーションを見つけて、中央の編集領域にドラッグし、
コンポーネントを選択して、右側の構成パネルに切り替えます。Gongge ナビゲーションは主にナビゲーション設定を行うことです
。メニューをクリックしてメニュー アイコンを選択し、メニュー テキストを設定します。1つ目のメニューを会員管理、2つ目のメニューを会員カード開設に設定しました。
03 カード冒頭ページを作成する
メニューをクリックすると、カードの開始ページにジャンプしたいので、最初にページを作成する必要があります。左側のページ作成アイコンをクリックしてページの名前を入力し
、ホームページに戻り、開いている設定ページに移動して、作成したばかりのページを選択します
04 カード冒頭ページの実装
フォーム コンテナを使用して、カード開始ページを実装します。コンポーネント領域からフォーム コンテナを見つけて、ページにドラッグします。フォーム コンテナは
データ ソースを選択する必要があり、ページは、カードのフィールドに基づいて自動的に生成されます。情報元。メンバーシップ カード データ ソースを選択します
。すべてのメンバーがリストされています。一般的なシナリオでは、携帯電話番号に基づいてメンバー情報を見つける必要があります。フォームコンテナの上に通常のコンテナを追加し、その中に単行入力コンポーネントを配置します。
検索テンプレートとして単行入力テンプレートを選択します。
次に、単行入力コンポーネントの隣にボタンコンポーネントを配置します。通常のコンテナを横配置に変更し、
ボタンの種類をリンクに変更します。
05 データ充填の実施
現在のロジックでは、検索ボックスに電話番号を入力し、メンバー情報と一致するように入力した後にクエリ ボタンをクリックし、メンバーのドロップダウン リストに入力します。
まず、コード領域に変数を作成します。
新しいカスタム変数を選択します。
変数の名前を電話に変更し
、検索ボックスに検証ルールを追加します。ルールの携帯電話番号を選択します。イベントを
追加します。値が変更されたら、それを変数に割り当ててクリックします
コード領域の + 記号は JavaScript メソッドを作成し
、次のコードを入力します
export default async function({
event, data}) {
try {
const data = await $w.cloud.callDataSource({
dataSourceName: "hyxx_u9t5lg8",
methodName: "wedaGetItemV2",
params: {
// 筛选内容，筛选内容推荐使用编辑器数据筛选器生成
filter: {
where: {
$and: [
{
sj: {
$eq: $page.dataset.state.telphone, // 获取单条时，推荐传入_id数据标识进行操作
},
},
],
},
},
select: {
$master: true, // 常见的配置，返回主表
},
},
});
console.log("请求结果", data);
$w.page.dataset.state.memberid = data._id
} catch (e) {
console.log("错误代码", e.code, "错误信息", e.message);
}
}
コードのロジックは、検索ボックスに入力された値に基づいてデータ ソースに移動してデータを照合し、取得したメンバー情報のデータ識別子を変数に代入することです。
これを行うには、メンバーのデータ ID を保存する別の変数を作成する必要があります。
変数をメンバーの選択された値にバインドします。最後に、クエリ ボタンのクリック イベントを構成します。
カスタム コードを
選択した後、フォームに追加します。コンテナは前のページに戻るイベントを追加します。
最終効果
ナビゲーションメニューの「会員カード開設」をクリックすると、会員カード開設ページにジャンプしますので、まず携帯電話番号を入力し、「照会」をクリックして会員情報を入力し、チャージ金額とカード開設日を入力してください。
要約する
この記事では、モバイル端末上でビジネス機能を開発する方法について、主にグリッド ナビゲーションとフォーム コンテナの 2 つのコンポーネントの使用方法を紹介します。また、変数の定義と割り当て、カスタム メソッドの作成と呼び出し、その他の操作についても紹介します。コード部分では、Weibo のデータ ソース メソッドを呼び出します。主にクエリ単一アイテムを呼び出します。
ローコード開発では依然としてコードの一部を記述する必要があり、JavaScript に習熟している必要があります。言語を学習すると、より快適にコードを作成できるようになります。興味がある場合は、エディタを開いて練習してください。