微信小程序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