微信小程序的bindtap事件

微信小程序的bindtap事件

在微信小程序中，要想获取元素的属性值，需要用到 bindtap事件，如果想要正确获取到属性值，对属性的命名还有一定要求

如下是正确的方式data-money-Num="9.93"：

 <view class="weui-msg__desc msg_text">我的<text class="msg_text">余额9.93元，</text><navigator url="javascript:void(0);" class="weui-msg__link" bindtap="allDraw" data-money-Num="9.93">全部提现</navigator></view>

如果写成data-moneyNum="9.93”就获取不到了，所以要么全小写，要使用驼峰命名方式，就必须中间加 - (短横杠)

下面是完整的饿示例：

wxml:

<view class="page">

    <view class="weui-msg">

        <view class="weui-msg__icon-area">

            <!-- <icon type="success" size="64"></icon> -->

            <image src="../../images/money.png"></image>

        </view>

        <view class="weui-msg__text-area">

           <view class="weui-msg__title weui-msg__titles">提现金额</view>

            <view class="weui-msg__title weui-msg__titless">￥

              <input type="digit" value="{{moneyNum}}" style="display:inline-block" confirm-type="done" bindinput="bindedit"></input>

            </view>

            <view class="weui-msg__desc msg_text">我的<text class="msg_text">余额9.93元，</text><navigator url="javascript:void(0);" class="weui-msg__link" bindtap="allDraw" data-money-Num="9.93">全部提现</navigator></view>

        </view>

        <view class="weui-msg__opr-area">

            <view class="weui-btn-area">

                <button class="weui-btn" type="primary" bindtap="paytousr">提现</button>

            </view>

        </view>

    </view>

</view>

js:

// pages/wallet/withdraw.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    moneyNum: null,

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

  },

  bindedit: function (event){

    this.setData({

      moneyNum: this.money(event.detail.value)  //money匹配金额输入规则，返回输入值

    });

  },

  money(val) {

    let num = val.toString(); //先转换成字符串类型

    if (num.indexOf('.') == 0) { //第一位就是 .

      num = '0' + num

    }

    num = num.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符

    num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的

    num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");

    num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数

    if (num.indexOf(".") < 0 && num != "") {

      num = parseFloat(num);

    }

    return num

  },

  /**

   * 提现

   */

  paytousr: function (e) {

    if(this.data.moneyNum==null){

      wx.showToast({

        title: '请输入正确的金额',

        icon:'none'

      })

      setTimeout(function(){

        wx.hideToast()

      },2000)

      return false;

    }

    //此处还应该判断提现金额是否大于余额

    var tmp_my_id = wx.getStorageSync('my_id')

    var tmp_my_session = wx.getStorageSync('my_session')

    wx.request({

      url: '自己的接口',

      method: 'POST',

      dataType: 'json',

      header: {

        'content-type': 'application/json' // 默认值

      },

      data: {

        my_id: tmp_my_id,

        my_session: tmp_my_session,

        my_fee: this.data.moneyNum*100 // 用户输入的元比如，1.01元，，你这边转化成分

      },

      success: function (res) {

        var data = res.data;

        console.log(data); // errCode=0 是服务器端把数值保存到数据

        if(data.errCode==0){

          wx.showToast({

            title: '提现成功',

            icon: 'none',

          })

          setTimeout(function () {

            wx.hideToast()

          }, 2000)

        }else{

          wx.showToast({

            title: '提现失败',

            icon: 'none',

          })

          setTimeout(function () {

            wx.hideToast()

          }, 2000)

        }

      },

      fail: function (res) {

        console.log('login fail')

      },

    })

  },

  /**
　　* 全部提现
　　*/

  allDraw:function(event){

    var moneyNum = event.currentTarget.dataset.moneyNum

    console.log(moneyNum)

    this.setData({

      moneyNum: moneyNum

    });

  }

})