微信小程序开发之路(3)— 添加一个Button按钮点击事件
一、前言
之前文章我们设置的都是静态的页面,我们接下来需要增加一个点击Button按钮点击事件。
官方开发文档:小程序开发指南
二、增加一个Button按钮
将pages/hello/hello.wxml
文件修改为如下所示,
<!--pages/hello/hello.wxml-->
<button type="primary">HelloWrold</button>
点击编译后可以看到Button按钮已经添加到页面中了,
三、添加点击事件
我们需要在Button中添加一个点击事件属性,如下所示,其属性为bindtap
,属性值即为该点击时间的执行函数
<button type="primary" bindtap="onTapButton">HelloWrold</button>
然后我们需要在hello.js
中添加点击执行函数onTapButton
如下所示
/**
* Button按钮点击事件
*/
onTapButton: function () {
console.log("Helloworld.")
},
编译执行,我们在模拟器中点击按钮,可以在控制台终端看到输出了"Helloworld."字符串
四、添加次数显示
在hello.wxml
添加如下一行,用来显示点击次数,其中{{cnt}}
是使用了微信小程序的数据绑定功能,
<text>这是第{{cnt}}次点击按钮</text>
我们在hello.js
中添加cnt
的变量定义,其初始值设为0
,
然后我们在点击函数中修改其值,每点击一次便加一,然后使用setDat()
函数将其页面的显示值改变
/**
* Button按钮点击事件
*/
onTapButton: function () {
this.setData( {cnt : this.data.cnt + 1})
console.log("Helloworld." + this.data.cnt)
},
编译运行后可以看到如下所示运行成功的界面
五、附录
上一篇:微信小程序开发之路(2)— 新建一个Hello页面
下一篇:
更多推荐
微信小程序开发之路(3)— 添加一个Button按钮点击事件
发布评论