一、小程序组件分类
微信团队为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的,开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签,只不过标签名字不一样。官方把小程序的组件分为了 9 大类,分别是:
① 视图容器
② 基础内容
③ 表单组件
④ 导航组件
⑤ 媒体组件
⑥ 地图组件
⑦ 画布组件
⑧ 开放能力
⑨ 无障碍访问
官方地址:https://developers.weixin.qq.com/miniprogram/dev/component/
二、表单组件
1、按钮 button
![](https://img-blog.csdnimg.cn/img_convert/502ec77e1553f15abc66481cf14b6599.png)
![](https://img-blog.csdnimg.cn/img_convert/13a08c3df5decf26f84b5c40f6e94c6a.png)
示例代码:
![](https://img-blog.csdnimg.cn/img_convert/eef82e37f79c28764e52cd772c70f9bc.png)
2、input输入框
![](https://img-blog.csdnimg.cn/img_convert/0cf4374e36830b4cb7c47c7b7bbfa567.png)
![](https://img-blog.csdnimg.cn/img_convert/3bb9cc3e527b56607617ad47b4394088.png)
3、事件
1、什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息,如 id,dataset, touches。
事件的使用方式
在组件中绑定一个事件处理函数。
如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view id="tapTest"data-hi="Weixin" bindtap="tapName"> Click me!</view>
在相应的Page定义中写上相应的事件处理函数,参数是event。
Page({
tapName: function(event) {
console.log(event)
}
})
2、事件分类
事件分为冒泡事件和非冒泡事件:
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
![](https://img-blog.csdnimg.cn/img_convert/4b5d0338d923b473d400d479f83d6aa5.png)
![](https://img-blog.csdnimg.cn/img_convert/19552bbc08ffc20670a61b757b61f83c.png)
注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form 的submit事件,input 的input事件,scroll-view 的scroll事件,(详见各个组件)
3、普通事件绑定
事件绑定的写法类似于组件的属性,如:
<view bindtap="handleTap">
Click here!
</view>
简易双向绑定
双向绑定语法
在 WXML 中,普通的属性的绑定是单向的。例如:
<input value="{{value}}" />
如果使用 this.setData({ value: 'leaf' }) 来更新 value ,this.data.value 和输入框的中显示的值都会被更新为 leaf ;但如果用户修改了输入框里的值,却不会同时改变 this.data.value 。
如果需要在用户输入的同时改变 this.data.value ,需要借助简易双向绑定机制。此时,可以在对应项目之前加入 model: 前缀:
<input model:value="{{value}}" />
这样,如果输入框的值被改变了, this.data.value 也会同时改变。同时, WXML 中所有绑定了 value 的位置也会被一同更新, 数据监听器 也会被正常触发。
示例代码:简易计算器
Index.wxml代码:
![](https://img-blog.csdnimg.cn/img_convert/bccfa5c433eedc8dab05e2eb1a3703b2.png)
Index.wxss代码:
![](https://img-blog.csdnimg.cn/img_convert/b6bb01b2c961cfd2b82f1ed3dc1c43ad.png)
Index.js代码:
![](https://img-blog.csdnimg.cn/img_convert/1f8d60ae39fc1933ea2688bcbfdfe31a.png)
执行效果:
![](https://img-blog.csdnimg.cn/img_convert/109772986de1049c57abc418346da35f.png)
本节难点:单向绑定,双向绑定,事件触发