微信小程序之修改按钮Button尺寸及绑定一个事件处理函数

事件绑定实现了信息有视图层向逻辑层的传递，逻辑层负责信息处理，最后将处理的结果（数据）通过数据绑定返回到视图层。

1.微信小程序button常见属性

2.button宽高等样式的调整

项目中常遇到需要修改按钮Button尺寸（宽度或高度），但在目前微信小程序的.wxss文件里设置Button宽度，无论如何调整width，Button的宽度都不会有变化。例如：

button {
   
  display: block;
  margin-top: 2vh;
  font-size: 3.5vh;
  width: 80vw
}

解决方案1
把 app.json里的 style: v2语句删掉。这样虽然也可以解决问题，但会导致全局的样式变化。

以下是官网对style的说明：

解决方案2
发现了另一种较好的解决方法，即在 标签中直接写 style，亲测可用：

<button style="width:60vw" bindtap="onSelectAnswerA">选项A</button>

3. 绑定一个事件处理函数 ( 摘自官方文档 )

什么是事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

在组件中绑定一个事件处理函数
普通事件绑定，如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me!