微信小程序wxml傳遞值總結（e.currentTarget，e.detail.value)

本文主要講解一下三個函數

e.currentTarget.dataset.index 獲取到 data-index 中的值

e.currentTarget.id 獲取到 id 中的值

e.detail.value.(***) 動態獲取 input 中的值

---

1. bindtap

Example 1.

JS文件中聲明的值

// js文件
recommendInfo: [
      {
        id: 'Java編程思想（第4版）',
        price: '¥ 79.00',
        img: 'https://img.alicdn.com/imgextra/i1/1049653664/TB1PU42OVXXXXcYXXXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg',
        monthSell: '月銷量208',
        transPrice: '快遞：0.0¥'
        ,num: 1
      },
      {
        id: 'PHP和MySQL Web開發原書第5版 ',
        price: '¥ 89.50',
        img: 'https://img.alicdn.com/imgextra/i3/1049653664/TB1n1y6XkUmBKNjSZFOXXab2XXa_!!0-item_pic.jpg_430x430q90.jpg'
        ,monthSell: '月銷量7',
        transPrice: '快遞：0.0¥'
        ,num: 2
      },
      {
        id:'利用Python進行數據分析（原書第2版'
        ,price:'¥ 59.50'
        ,img:'https://img.alicdn.com/imgextra/i1/1049653664/O1CN01p0JM7V1cw9irZtbqR_!!0-item_pic.jpg_430x430q90.jpg'
        ,monthSell:'月銷量227'
        ,transPrice:'快遞：0.0¥'
        ,num: 3
      },
      {
        id:'c++ primer plus 第6版中文版'
        ,price:'¥ 66.40'
        ,img:'https://img.alicdn.com/imgextra/i1/1049653664/TB19sxqveuSBuNjy1XcXXcYjFXa_!!0-item_pic.jpg_430x430q90.jpg'
        ,monthSell:'月銷量327'
        ,transPrice:'快遞：0.0¥'
        ,num: 4
      },
      {
        id:'雲去雲來+窗裏窗外'
        ,price:'¥ 111.00'
        ,img:'https://img.alicdn.com/imgextra/i3/2814700210/O1CN01xhJ0rJ1DQDjAckXku_!!0-item_pic.jpg_430x430q90.jpg'
        ,monthSell:'月銷量0'
        ,transPrice:'快遞：0.0¥'
        ,num: 5
      },
      {
        id:'科比自傳曼巴精神 中文版'
        ,price:'¥ 93.00'
        ,img:'https://img.alicdn.com/imgextra/i3/4090251125/O1CN01uaDooc1KBI9oiDWb7_!!0-item_pic.jpg_430x430q90.jpg'
        ,monthSell:'月銷量37'
        ,transPrice:'快遞：0.0¥'
        ,num: 6
      }
    ]

wxml代碼

// wxml文件
<view wx:for="{{recommendInfo}}" wx:for-item="i" >
  <view class="recommendBlock" bindtap="detail"
   	id="{{i.img}}">
    <navigator url="/pages/detail/detail">
      <image src="{{i.img}}"style="width:325rpx;
      height:325rpx"/>
      <text >{{i.id}}{{i.price}}\n</text>
      <text >{{i.monthSell}}\n{{i.transPrice}}</text>
    </navigator>
  </view>
</view>

JS函數代碼

 <view class="recommendBlock" bindtap="detail" id="{{i.img}}">

  detail: function(e){
    wx.setStorageSync('detailId', e.currentTarget.id);
  }

wx.setStorageSync(string key, any data)

key是必須是string類型，給你想儲存到緩存的數據起個名字；data是個人感覺是任何類型的。

e.currentTarget.id 獲取到 {{i.img}}

在我們想獲取緩存中數據頁面的JS文件中寫入函數

  getdetailId:function() {
    var goodID = wx.getStorageSync('detailId');
    this.setData({
      goodID: goodID // 賦值給data中的變量
    })
  }

光是這樣我們還獲取不了數據，我們要調用函數

//onReady 是初始化時調用的
 onReady: function () {
    this.getdetailId();
  }

Example 2.

wxml 代碼

<view class="inFo {{click === 0 ? 'on':''}}" bindtap="isClick" data-index="0">商品詳情</view>

JS代碼

  isClick: function(e) {
    var click = parseInt(e.currentTarget.dataset.index);// 轉化爲int型
    this.setData({
      click: click
    })
  }

e.currentTarget.dataset.index 獲取到 data-index 中的值

2. bindsubmit

wxml 代碼

        <form bindsubmit="formSubmit">
            <input value="{{address.name}}" name="name" placeholder="姓名" class="Reno1"/>
            <input value="{{address.phone}}" name="phone" placeholder="電話號碼" class="Reno1"/>
            <input value="{{address.detail}}" name="detail" placeholder="詳細地址" class="Reno1"/>
            <button form-type="submit" class="Reno2">保存</button>
        </form>

JS代碼

  formSubmit: function(e) {
    var value = e.detail.value;
    if(value.name && value.phone && value.detail) {
      wx.setStorage({
        key: 'address',
        data: value,
        success() {
          wx.navigateBack();
        }
      });
    }
    else {
      wx.showModal({
        title: '提示',
        content: '請將信息填寫完整',
        showCancel: false
      });
    }
  }

經過查找相關資料
e.detail.value.(***)是動態獲取 input 中的 value 意思

我們輸入 name 的值

<input value="{{address.name}}" name="name" placeholder="姓名" class="Reno1"/>

獲取 name 的值 e.detail.value.name