首页 > 编程语言 >微信小程序开发笔记 基础篇③——自定义数据dataset,事件触发携带额外信息

微信小程序开发笔记 基础篇③——自定义数据dataset,事件触发携带额外信息

时间:2023-04-20 22:44:46浏览次数:44  
标签:console 定义数据 微信 程序开发 dataset 充值 totalfee recharge



文章目录

  • 一、前言
  • 二、视频演示
  • 三、原理和流程
  • 四、注意事项
  • 五、全部源码
  • 六、参考


一、前言

微信小程序开发笔记——导读

  • 想要实现一个电费充值界面。
  • 多个不同金额的充值按钮,每个按钮都携带自定义数据(金额)
  • 点击不同金额的充值按钮,就会上传对应的数据(金额)。
  • 所以,本文主要使用到了微信小程序框架的视图层的事件系统的事件对象的dataset

二、视频演示


微信小程序 充值界面简单演示


三、原理和流程

  • 在对应的组件控件上面添加dataset属性
<view bindtap="rechargePriceClick" data-totalfee="10">
    <text style="font-size: 40rpx;">10</text>
    <text style="font-size: 26rpx;"> 元</text>
</view>
  • 那么它的点击事件回调函数里面就会回传这个属性
rechargePriceClick(e){
      console.log(e)
  },
  • 日志打印与验证

四、注意事项

微信小程序开发笔记 基础篇③——自定义数据dataset,事件触发携带额外信息_微信小程序

  • 验证
<view bindtap="rechargePriceClick" data-aUser="10" data-b-user="10">
    <text style="font-size: 40rpx;">10</text>
    <text style="font-size: 26rpx;"> 元</text>
</view>

微信小程序开发笔记 基础篇③——自定义数据dataset,事件触发携带额外信息_javascript_02

五、全部源码
  • recharge.js
Page({
  data: {
    totalFee: 0,
  },

  onl oad: function (e) {
    console.log("recharge onl oad")
  },

  rechargePriceClick(e){
      var _this = this
      console.log(e.currentTarget.dataset)
      this.setData({
        totalfee: e.currentTarget.dataset.totalfee
      })
      
    wx.showToast({
        title: "totalfee="+_this.data.totalfee,
        icon: 'none',
        duration: 1000
    })
  },

  rechargeClick(e) {
    var _this = this
    console.log("rechargeClick", this.data)  
    wx.showToast({
        title: "totalfee="+_this.data.totalfee,
        icon: 'none',
        duration: 1000
    }) 
  },
})
  • recharge.json
{
  "navigationBarTitleText": "电费充值",
  "usingComponents": {}
}
  • recharge.wxml
<view class="container">
    <view style="margin-top: 20rpx; margin-left: 50rpx; margin-right: 50rpx; align-items: center; display: flex; align-items: center; font-size: 40rpx;">
        <view class="button_frame {{totalfee=='10'?'button_select':'button_unselect'}}" style="margin-right: 30rpx;" bindtap="rechargePriceClick" data-totalfee="10">
            <text style="font-size: 40rpx;">10</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
        <view class="button_frame {{totalfee=='20'?'button_select':'button_unselect'}}" style="margin-right: 30rpx;" bindtap="rechargePriceClick" data-totalfee="20">
            <text style="font-size: 40rpx;">20</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
        <view class="button_frame {{totalfee=='50'?'button_select':'button_unselect'}}" bindtap="rechargePriceClick" data-totalfee="50">
            <text style="font-size: 40rpx;">50</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
    </view>
    <view style="margin-top: 20rpx; margin-left: 50rpx; margin-right: 50rpx; align-items: center; display: flex; align-items: center; font-size: 40rpx;">
        <view class="button_frame {{totalfee=='100'?'button_select':'button_unselect'}}" style="margin-right: 30rpx;" bindtap="rechargePriceClick" data-totalfee="100">
            <text style="font-size: 40rpx;">100</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
        <view class="button_frame {{totalfee=='200'?'button_select':'button_unselect'}}" style="margin-right: 30rpx;" bindtap="rechargePriceClick" data-totalfee="200">
            <text style="font-size: 40rpx;">200</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
        <view class="button_frame {{totalfee=='500'?'button_select':'button_unselect'}}" bindtap="rechargePriceClick" data-totalfee="500">
            <text style="font-size: 40rpx;">500</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
    </view>
    <view class="btnBox btnBox_electricBg" bindtap="rechargeClick">立即充值</view>
</view>
  • recharge.wxss
.button_frame {
    width: 200rpx; 
    padding-top: 40rpx; 
    padding-bottom: 40rpx; 
    padding-right: 40rpx; 
    padding-left: 40rpx; 
    border-radius: 10rpx; 
    text-align: center;
}

.button_select {
    color: #ffffff;
    background-color: #58d4dc;
}

.button_unselect {
    color: black; 
    background-color: gainsboro;
}

觉得好,就一键三连呗(点赞+收藏+关注)




标签:console,定义数据,微信,程序开发,dataset,充值,totalfee,recharge
From: https://blog.51cto.com/u_16081772/6210784

相关文章

  • 微信小程序使用canvas2d实现拼图游戏
    根据周文洁微信小程序开发实战编写,但是微信更新了canvas接口,按照书上写的已经不能使用了。目录 改进后如下:app.wxss:1.container{2height:100vh;3color:#E64340;4font-weight:bold;5display:flex;6flex-direction:column;7align-i......
  • 微信Windows版 v3.9.0.28 多开&消息防撤回正式版绿色版
    微信,大家工作中生活中用的最多的一款应用;很多公司喜欢用微信来作为工作沟通的工具,官方原版只支持登陆一个微信,这对于需要在电脑上登陆多个微信账号的朋友来说肯定是极其的不方便。另外有的时候别人撤回了一些重要消息,会导致我们错失部分重要内容。而这个绿色特别版本就 支持多开,......
  • 微信小程序隐藏页面滚动条
    开发小程序时,经常会碰到页面长度超过屏幕高度,然后下拉时会出现滚动条,对于一些有强迫症的人来说是不可忍受的。网上看了好多,写的。都评论有起作用或者不起作用的。我在这分享一个全局隐藏滚动条的方式。样式代码我们在app.wxss中,写一个类选择器: .contain{height:100vh;......
  • 生日纪念日记录提醒管理流量主小程序开发
    生日纪念日记录提醒管理流量主小程序开发以下是可能包含在生日管理小程序中的功能列表:添加、编辑、删除联系人信息,包括姓名、生日、电话、备注等。显示今天、本周、本月或自定义日期范围内的所有生日。按照生日日期或姓名进行联系人的排序。发送生日祝福信息,支持短信、微信、邮件等......
  • [Wechat]概念辨析:微信的生态平台/运管平台
    0引言微信的各类XX社区、XX文档、XX平台,实在是太多,让人眼花缭乱。必须得理一理了。1微信公众平台https://mp.weixin.qq.com/即微信公众号(小程序/订阅号/服务号)的管理平台微信公众平台是运营者通过微信公众号为微信用户提供资讯和服务的平台;而微信公众平台开......
  • vue3微信公众号商城项目实战系列(12)项目发布到服务器上
    本篇介绍如何将vue3项目打包发布到服务器上,然后在微信公众号上打开。vue3发布之前需要对项目进行编译,编译时会在项目根目录下创建dist文件夹,编译后的文件会存放在这里。 在编译之前,我们在public目录下建一个config.js的文件,里面放如下的代码:constconfig={baseUr......
  • 微信小程序实现长按拖拽排序
    <viewclass="container"><movable-areaclass="item_box"style="width:{{boxWeight}}rpx;height:{{boxHeight}}rpx"><movable-viewclass="item{{selectId===item.id?'item_show':&#......
  • 2023年最新微信小程序抓包教程
    01开门见山隔一个月发一篇文章,不过分。首先回顾一下《微信绑定手机号数据库被脱库事件》,我也是第一时间得知了这个消息,然后跟踪了整件事情的经过。下面是这起事件的相关截图以及近日流出的一万条数据样本:个人认为这件事也没什么,还不如关注一下之前45亿快递......
  • h5项目怎么嵌入到微信小程序中
    背景:最近用vue开发了一个h5的项目,然后产品说想把它上到微信小程序里面去,ok,开干!第一步:web-view<!--index.wxml--><viewclass="container"><web-viewsrc="https://xxx.xxxx.com/"/></view>第二步:在小程序中配置域名白名单     第三步:可以正常开发,调试啦遇......
  • vue3微信公众号商城项目实战系列(9)购物车页面
    本篇显示购物车中的商品,购物车表结构如下,我们通过接口服务抓取登录用户的购物车信息。表名字段功能shoppingcartcart_id(int)购物车编号user_id(int)用户编号goods_id(int)商品编号goods_name(varchar)商品名称photo(varchar)商品图片price(decimal)......