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

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

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

新しい名刺ページ 1 基本的なレイアウトは次のとおりです:

userId を取得します。

また、ユーザー入力の長さを制限できる maxLength

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

具体的には、ニーズに応じていくつかの検証設定を実行し、ユーザーが入力した値を取得して、操作を実行することもできます。

組み込みモーダルボックスプロンプトコンポーネントはここにバインドされています。

ここで、modalHidden2 はモーダル ボックス スイッチです。

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

実際の効果は、以前よりも多くのことを節約でき、一連の互換性の問題を考慮する必要がないことがわかりました。

最後に、写真をアップロードするためのアバターがありますが、バックエンドサーバーにアップロードする際にまだ問題が発生しています。これは不完全なベータ版が原因であるはずです。

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

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

この時点で、編集ページ 2 にジャンプします。このページは、ユーザーが入力した携帯電話番号に基づいて、一致する企業を識別します。ページは非常にシンプルで、データ

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

には、いくつかの

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

実際のレンダリング効果を確認できます。

このロジックは基本的に最初の編集ページのロジックと同じですが、ここでは最初の 2 つのステップについてのみ説明します。 3 ページ目、これについてはここでは説明しません。

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

このカード画像モジュールは、画像をアップロードする際に当面の問題があります。ここでは、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 にバインドします。

まず、名刺のアルファベット順のインデックスはすべてスクロール ビューにあります。このスクロール ビューは 100% と 100vh に設定する必要があります。 y 軸のスクロール スイッチがオンになっている場合、scroll-into-view はその子要素の ID にジャンプする必要があります。

を見てみましょう:

この group.name==sortmsg は、A==A,B==B と同等です。

上部にいくつかのメニューバーがある場合は、レイアウトに注意する必要があります。そうしないと、メニューバーの高さが下にオフセットされてしまいます。アルファベット順のインデックスで調整する必要がある この問題は、同じレベルに移動することで回避できます（ここではトップメニューがテンプレートで区切られています。テンプレートを区切るときに注意する必要があります。バインドする必要がある一部のデータ）ここでのテンプレートは無効になります)。

ジャンプ機能は基本的に実装されています(その他は#下)。

【関連おすすめ】

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

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

3. WeChat ミニ プログラムのデモ: Lezhu

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