一、小程序组件分类
微信团队为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的,开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签,只不过标签名字不一样。官方把小程序的组件分为了 9 大类,分别是:
① 视图容器
② 基础内容
③ 表单组件
④ 导航组件
⑤ 媒体组件
⑥ 地图组件
⑦ 画布组件
⑧ 开放能力
⑨ 无障碍访问
官方地址:https://developers.weixin.qq.com/miniprogram/dev/component/
二、表单组件
1、按钮 button
![](https://i-blog.csdnimg.cn/blog_migrate/9e23b5eb7533e1253666b042656fbbc7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fb6b9101964f6eec203e776433bc4061.png)
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/4500d56969001f8ae164bcae70262e20.png)
2、input输入框
![](https://i-blog.csdnimg.cn/blog_migrate/b0f663680858661a06bd5779e8141cf7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/751900f33dd83676c10eeb0584b46828.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://i-blog.csdnimg.cn/blog_migrate/dacf4077c053de91be80d11ef8207f0e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f09dcd3cfb10bf943a3436176c8407ff.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://i-blog.csdnimg.cn/blog_migrate/93ddd9679d40988c1b57f9d2c8dedb6a.png)
Index.wxss代码:
![](https://i-blog.csdnimg.cn/blog_migrate/37ba0aaa17e06c746c3205c498674069.png)
Index.js代码:
![](https://i-blog.csdnimg.cn/blog_migrate/94d13cdd33cea332147e92c1240bf5f5.png)
执行效果:
![](https://i-blog.csdnimg.cn/blog_migrate/71739a24a9962545751b40b8d661a3e7.png)
本节难点:单向绑定,双向绑定,事件触发