微信小程序的bindtap事件

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

在微信小程序中，要想获取元素的属性值，需要用到 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 
    });
  }

})