WeChat開発における値の受け渡しと取得のいくつかの方法の紹介

この記事では、主に関連情報を紹介し、WeChat ミニ プログラムで値を転送および取得するいくつかの方法をまとめています。これらの方法の詳細な説明と添付のサンプル コードは、

WeChat ミニ プログラムを参照してください。値の受け渡し

小さなプログラムで一般的な値は次のとおりです。完全なプロジェクトを書き留めると、それらが使用される確率はほぼ100%です。

• リストインデックスの添え字値

• ページ転送値

• フォームフォームの値

1. リストインデックスの添え字値

実装方法は次のとおりです: data-index=" {{index} }" を入力し、e.currentTarget.dataset.index を入力します

1.1 値を生成します

<image src="../../../images/icon_delete.png" /><text>删除</text>

削除アイコンとテキストに data-index="{{index}}" カスタム属性を追加し、クリック イベントをバインドしますbintap="delete "

<image src="../../../images/icon_delete.png" /><text>删除</text>

を使用して delete メソッドを実装し、インデックスの添字値を取得します。

delete: function (e) {
  var index = parseInt(e.currentTarget.dataset.index);
  console.log("index" + index);
}

e.currentTarget の代わりに e.target を使用するとどうなりますか?

では、 をクリックすることによってのみインデックス値が出力され、クリック要素 または をクリックすると NaN が出力されます。

それでは、ターゲットの用途は何でしょうか? ユーザーのアバターを変更する場合など、サブ要素を外部要素と区別するために使用されます。アバター自体をクリックすると、大きな画像がプレビューされます。 、アバターが配置されているクリックされた行が切り替えアバターになります。

1.2 値を取得する

インデックスデータから対応する要素を見つけてアドレスを削除してみる

// 找到当前地址AVObject对象
var address = that.data.addressObjects[index];
// 给出确认提示框
wx.showModal({
  title: '确认',
  content: '要删除这个地址吗？',
  success: function(res) {
    if (res.confirm) {
      // 真正删除对象
      address.destroy().then(function (success) {
        // 删除成功提示
        wx.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 2000
        });
        // 重新加载数据
        that.loadData();
      }, function (error) {

      });
    }
  }
})

2. ページ上の値を渡す

からアドレスIDを渡す配送先住所一覧ページから編集ページへ移動し、元の住所を読み込んで変更します。

アドレス/リストページは次のコードを実装します

<view class="container" data-index="{{index}}" bindtap="edit"><image src="../../../images/icon_edit.png" /><text>编辑</text></view>

edit: function (e) {
  var that = this;
  // 取得下标
  var index = parseInt(e.currentTarget.dataset.index);
  // 取出id值
  var objectId = this.data.addressObjects[index].get(&#39;objectId&#39;);
  wx.navigateTo({
    url: &#39;../add/add?objectId=&#39;+objectId
  });
},

アドレス/追加ページはonLoad(options)メソッドを実装し、URLパスからobjectIdを取得します

onLoad: function (options) {
  var objectId = options.objectId
}

その後、ネットワークにアクセスしてページをレンダリングします。

3. フォームフォームの値

3.1 方法 1、 と組み合わせて使用​​します。レイアウトは次のとおりです。

<form bindsubmit="formSubmit">
  <input name="detail" placeholder="详情地址" />
  <input name="realname" placeholder="收件人姓名" />
  <input name="mobile" placeholder="手机号码" type="number"/>
  <button formType="submit" type="primary">Submit</button>
</form>

js 値:

formSubmit: function(e) {
  // detail
  var detail = e.detail.value.detail;
  // realname
  var realname = e.detail.value.realname;
  // mobile
  var mobile = e.detail.value.mobile;
}

3.2 メソッド 2、

は によって達成されます。

// 实现相应多个**Confirm方式
detailConfirm: function(e) {
  var detail = e.detail.value;
}
realnameConfirm: function(e) {
  var realname = e.detail.value;
}
mobileConfirm: function(e) {
  var mobile = e.detail.value;
}

メソッド 1 とメソッド 2 の比較から、値の目標は達成されていることがわかります。ただし、前者はユーザーの個人情報の入力や配送先住所の入力など、多数のフォーム項目を送信する場合に適しており、後者は 1 つまたは 2 つのフォームにのみ適しています。

特急

番号入力、バインドなどの項目 携帯電話番号を設定します。 ajax と同様の即時応答が必要な場合は、入力で を使用して値を即座に取得できるため、後者を選択する必要があります。たとえば、携帯電話のキーワードを入力した場合です。製品

検索

ボックスを選択すると、iPhone7、Mate8、その他の候補単語が表示されます。 概要:

リストインデックス添字値、ページ値転送、フォームフォーム値転送、最初のタイプは常に使用され、2番目のタイプも非常に一般的に使用されますが、一般的に小さなプログラムページは少なく、私の現在のプロジェクト つまり 12 ページです。結​​局、携帯電話は登録ページやコメント ページなどで使用されるため、比較的使用されません。

【関連推奨事項】

1.

WeChatパブリックアカウントプラットフォームのソースコードダウンロード

2.

PigCmsマイクロ電子商取引システム運用バージョン（独立したマイクロストアモール+3レベルの流通システム）

3.

WeChat 接続王 v3.4.5 Advanced Business Edition WeChat ルービック キューブ ソース コード

以上がWeChat開発における値の受け渡しと取得のいくつかの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。