《微信小程序开发》课件——第3章 微信小程序页面交互_76-99.pdf

02【案例3-2】计算器

案例分析

“计算器”微信小程序的页面效果如右图所示。

在计算器中可以进行整数和小数的加（+）、

减（－）、乘（×）、除（÷）运算。

案例分析

“计算器”微信小程序中某些功能键的作用。

①“C”按钮为清除按钮，表示将输入的数字全部清空；

②“DEL”按钮为删除按钮，表示删除前面输入的一个数字；

③“+/-”按钮为正负号切换按钮，用于实现正负数切换；

④“.”按钮为小数点按钮，表示在计算过程中可以输入小数进行计算；

⑤“=”按钮为等号按钮，表示将对输入的数字进行计算。

知识储备

1.data-*自定义属性

先定一个小

目标！

掌握data-*自定义属性，能够完成

data-*自定义数据的设置与获取

知识储备

1.data-*自定义属性

什么是data-*自定义属性？

知识储备

1.data-*自定义属性

微信小程序可以通过自定义属性来进行传参。

微信小程序中的data-*是一个自定义属性，

data-*自定义属性实际上是由data-前缀加

上一个自定义的属性名组成的，属性名中如

果有多个单词，用连字符“-”连接。

知识储备

1.data-*自定义属性

data-*自定义属性的属性值表示要传参的数据。

在事件处理函数中通过target或currentTarget

对象的dataset属性可以获取数据。

dataset属性是一个对象，该对象的属性与data-

*自定义属性相对应。

知识储备

1.data-*自定义属性

演示如何通过设置data-*自定义属性实现参数的传递

步骤1在pages/index/index.wxml文件中编写页面结构。

viewbindtap=demodata-name=xiaochengxudata-

age=6

步骤2

获取姓名和年龄

/view

view姓名：{{name}}/view

view年龄：{{age}}/view

知识储备

1.data-*自定义属性

演示如何通过设置data-*自定义属性实现参数的传递

步骤1在pages/index/index.js文件中编写页面逻辑。

Page({

data{name初始名字,age0},