總結微信小程式開發傳值取值的幾種方法

這篇文章主要介紹了微信小程式傳值取值的幾種方法總結的相關資料,這裡對這幾種方法進行了詳解，並附範例程式碼，需要的朋友可以參考下

微信小程式傳值取值

小程式裡常見的取值有以下幾種，一個完整的項目寫下來，用到的機率幾乎是100%。

• 列表index下標取值

• 頁傳值

• form表單取值

1. 列表index下標取值

# 實作方式是：data-index="{{index}}"挖坑及e .currentTarget.dataset.index來填坑即可

1.1 產生值

#

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

在刪除圖示與文字新增data-index="{{index }}"自訂屬性以及綁定點擊事件bindtap="delete"

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

實作delete方法，取到index下標值。

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

如果不使用e.currentTarget而使用e.target會怎麼樣？

將會導致僅點中89c662c6f8b87e82add978948dc499d2才能輸出index值，點子元素dc0870658837139040642baa5555a380或28f128881ce1cdc57a572953e91f7d0f將輸出NaN。

那target有什麼用呢，用於區分子元素與外部元素要分別處理時，比如換用戶頭像的場景，點擊頭像本身預覽大圖，而頭像所在的點整一行，將會是切換頭像。

關於二者差異的詳情說明，請參閱文件：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml /event.html

1.2 取出值

試圖從index資料找出對應元素刪除位址

// 找到当前地址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到編輯頁面，以讀取原始地址以供修改之用。

address/list頁面實作以下程式碼

<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
  });
},

address/add頁面實作onLoad(options)方法，從url路徑中取得objectId

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

然後就是存取網​​路以及渲染頁面了。

3. form表單取值

3.1 方式一，透過8b0563f2b998c6d0b1307ef69602a791與0d5a8d767214bf25558ef7380df9603a標籤搭配使用

佈局如下：

<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;
}

文檔來源：https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html

3.2 方式二，

透過943f6415be4dc012a831a401cd46a2f3實現

// 实现相应多个**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;
}

透過方式一與方式二的對比可以看出，雖然同樣都能實現取值的目標，但是它們的使用場景有所不同，前者適合與提交大量表單項目時，例如用戶完善個人資料，收貨地址填寫；而後者適合只做一兩個表單項目時，例如快遞單號錄入，綁定手機號碼。

如果需要類似ajax即時回應的，應該選用後者，因為input能使用97657f03b0e24b396cac09fd405cebe1來實現即時取到值，例如商品搜尋框輸入手機關鍵字，應出現iPhone7，Mate8等候選詞這樣的場景。

文件來源：https://mp.weixin.qq.com/debug/wxadoc/dev/component/input.html

小結：

列表index下標取值，頁面傳值，form表單傳值，第1種無時無刻在用，第2種也很常用，只是小程式頁面一般會較少，我現在這個項目也就是12個page，第3種相對用得少些，因為手機端畢竟不是生產力工具，用在註冊頁，評論頁等。

以上是總結微信小程式開發傳值取值的幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！