WeChatミニプログラム開発⑥「名刺編集」ページ開発

名刺を編集するには 2 つのパスがあり、名刺を追加するプロセスと名刺を変更するプロセスに分かれています。ユーザーが新しい名刺を手動で追加するプロセスは次のとおりです:

まず、新しいビジネスにジャンプしますカードページ1現在の userId の .wx.navigateTo は値でジャンプします。ユーザーが新しいルートを選択するように設定するには、手動が true です。
垂直 追加すると垂直方向のスライド、削除すると左右のスライドになります。全体的な構造は次のとおりです:

attribute など、WeChat に付属する入力コンポーネント検証を使用することも非常に簡単です。たとえば、私の名前の長さは最大です。 5 桁なので、数字の 5 を使用します。

さらに、proptText はプロンプトが必要なコンテンツです。
多くの入力ボックスでもデータの動的な変更をサポートしているため、非常に便利です。

背景画像は直接設定されます。

フォームを送信してジャンプしてください。 送信フォームは、組み込みのbindsubmitイベントコンポーネントを使用します。formType="submit"をボタンコンポーネントに追加するだけです。フォーム送信機能を使用する場合、入力にはname属性を追加する必要があります。メソッドはキーと値のペアの形式で渡されます。

ループ だけです。将来的にはラジオボタンが必要になるかもしれません。

データ バインディング と検証効果もあります。

名刺プロセスのレンダリングと要件を変更する 名刺を変更すると、ユーザーが変更できるように、以前に入力されたすべての個人情報が一度にレンダリングされます。

このカード画像モジュールは、画像をアップロードする際に当面の問題があります。ここでは、wx.navigateTo が提供するジャンプする必要があるページを制御するために使用することをお勧めします。 3 つのジャンプ ルート は適切にパッケージ化されており、多くのジャンプ ページには 値の受け渡し などが含まれており、統合された管理を実現し、目に見えないバグを回避できます。 :

名前 携帯電話必須モジュール:

個人情報モジュール、直接サイクル (ブロック) アウト:

データをオンロードするときに必須フィールドとオプションのフィールドを要求します:

• requiredGroup 必須の中国語情報

• notRequiredGroup トピックの中国語情報

• requiredGroupEn 必須の英語情報

• notRequiredGroupEn トピック英語の情報

//请求名片对应的公司的中文信息的属性组数据，分为必填和选填//选题项变量以 no 开头requester.getOfflineCardInfoGroupFields(userId, cardId,function (res) {//debuggervar userName = res.card.userName;var mobile = res.card.mobile;var requiredGroup = res.requiredGroupCh;var notRequiredGroup = res.notRequiredGroupCh;var requiredGroupEn = res.requiredGroupEn;var notRequiredGroupEn = res.notRequiredGroupEn;var reqLen = requiredGroup.fields.length;var nreqLen = notRequiredGroup.fields.length;var reqLenEn = requiredGroupEn.fields.length;var nreqLenEn = notRequiredGroupEn.fields.length;self.setData({userName: userName,mobile: mobile,requireFields: requiredGroup.fields,notRequireFields: notRequiredGroup.fields,requireFieldsEn: requiredGroupEn.fields,notRequireFieldsEn: notRequiredGroupEn.fields,l1: reqLen,l2: nreqLen + reqLen,l3: reqLenEn + nreqLen + reqLen});self.forceUpdate();}, function (code, msg) {console.info("code=" + code + "&msg=" + msg);});

中国語と英語の情報は必須およびオプションです。入力してレンダリングします:

ここでのフォーム送信データの変換は少し複雑です (ビジネスのニーズに応じて実行します。ここでのメソッドの学習に時間を費やす必要はありません)。取得されるのは配列であり、それが変換され、バックグラウンドで必要なデータ形式に従って渡されます。

今日は、ホームページA、B、Cの固定小数点ジャンプ機能の実装方法を遡って考えてみます。

1つ目は、右側の小さなインデックスレイアウトとデータバインディングです。 データバインディングは、名刺リストの文字と同じです。 文字の下に名刺がある場合は、それになります。存在しない場合は、レンダリングする必要はありません。文字は右側に表示されるものと同じです:

データの並べ替え、group.name データと同じ:

これは、# が id としての設定 (つまり、id="#") をサポートしていないため、変換が行われました。

クリックイベント: 現在の ID を取得し、データ toView を現在の ID にバインドします。

1. WeChat ミニ プログラムのソース コードのダウンロードを完了します

2. タブバーの変更アイコンをクリックします

以上がWeChatミニプログラム開発⑥「名刺編集」ページ開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。