二.常用组件
9.微信小程序表单组件单选框 radio
(1)radio标签需要和父元素radio-group标签一起使用
(2)绑定事件时需要给radio-group绑定change事件
(3)radio组件的常见属性:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | <radio/>标识。当该<radio/>选中时，<radio-group/>的change 事件会携带<radio/>的value |
|
| checked | Boolean | false | 当前是否选中 |
| disabled | Boolean | false | 是否禁用 |
| color | Color | radio的颜色，同css的color |
(4)一个小例子:
设置单选框：男女性别。并且选择之后可以在页面上显示所选择的内容。
<!--pages/demo10/demo10.wxml-->
<radio-group bindchange="radioChange">
<radio value="男" color="#f40">男</radio>
<radio value="女" color="#f40">女</radio>
</radio-group>
<view>您的选择是:{
{
gender}}</view>// pages/demo10/demo10.js
Page({
data: {
gender:""
},
radioChange: function(e){
this.setData({
gender:e.detail.value});
}
})效果如下:
10.微信小程序表单组件多选框 checkbox
(1)checkbox标签需要和父元素checkbox-group标签一起使用
(2)绑定事件时需要给checkbox-group绑定change事件
(3)checkbox组件的常见属性与radio组件相同。
(4)一个小例子:
设置多选框：水果挑选。并且选择之后可以在页面上显示所选择的一个或者多个框中内容。
<!--pages/demo11/demo11.wxml-->
<checkbox-group bindchange="checkboxChange">
<checkbox wx:for="{
{list}}" wx:key="id" value="{
{item.value}}" color="#f40">
{
{
item.name}}
</checkbox>
</checkbox-group>
<view>
你所选择的是: {
{
fruit}}
</view>// pages/demo11/demo11.js
Page({
data:{
list:[{
id:0,name:"苹果",value:"apple" },
{
id:1,name:"葡萄",value:"grape" },
{
id:2,name:"香蕉",value:"banana"}],
fruit:[]
},
checkboxChange: function(e){
this.setData({
fruit: e.detail.value});
}
})效果如下:
三.自定义组件
1.什么是自定义组件？
- 小程序中常常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到，逻辑也相对独立。然而，用传统的小程序开发方法来实现这样的模块是非常繁琐的。
- 面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为“自定义组件”。通过这个特性，开发者就能够将这样的交互模块抽象成界面组件，使界面代码组织变得非常灵活。
2.使用场景
（1） 多个页面用到同样的东西
（2） 页面功能很多,很复杂,使用组件来拆分逻辑
3.自定义组件组成
类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。
4.创建自定义组件
(1)新建自定义组件文件夹components以及引用这个自定义组件的页面文件夹demo1
注意:
要编写一个自定义组件，首先需要在tabs. json 文件中进行自定义组件声明
（将 component 字段设为 true 可将这一组文件设为自定义组件）：
{
"component": true
}(2)声明组件
demo1页面要使用自定义组件tabs,因此需要在页面的配置文件中声明。
例子如下:
//pages/demo1/demo1.json
{
"usingComponents": {
"tabs":"../components/tabs/tabs"
}
}(3)使用组件
<!--pages/demo1/demo1.wxml-->
<tabs></tabs><!--pages/components/tabs/tabs.wxml-->
<text>pages/components/tabs/tabs.wxml</text>页面效果:
(4)自定义组件—>父向子传递数据
父组件(页面)向子组件传递数据通过标签属性的方式来传递
- 在子组件上接收
properties中存放的是要从父组件中接收的数据
// pages/components/tabs/tabs.js
Component({
/** * 组件的属性列表 */
properties: {
},
})
- 把这个数据当成是data中的数据直接使用即可
举个例子:
父组件WXML:
<tabs aaa="a123a"></tabs>子组件WXML:
<view>{
{
aaa}}</view>子组件JS:
Component({
properties: {
aaa:{
//type表示 要接收的数据类型
type:String,
//value表示 默认值
value:""
}
}
})(5)自定义组件—>子向父传递数据
-
子组件向父组件传递数据通过事件的方式传递
方法：在子组件的js文件里加入一个自定义事件，父组件的WXML绑定自定义事件，父组件的js中写回调函数。
注意：自定义事件:
this.triggerEvent("父组件自定义事件的名称",要传递的数据) -
页面.js文件中存放事件回调函数 存放在data同层级下；
组件.js文件中存放事件回调函数的时候必须存放在methods中 -
点击事件触发时，触发父组件中的自定义事件，同时传递给父组件
-
数组的forEach方法的语法:
array.forEach(function(currentValue, index, arr), thisValue)
| 参数 | 描述 |
|---|---|
| currentValue | 必需。当前元素 |
| index | 可选。当前元素的索引值。 |
| arr | 可选。当前元素所属的数组对象。 |
| thisValue | 可选。传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值 |
举个例子：
父组件JS：
// pages/demo1/demo1.js
Page({
data: {
in: 0
},
handle:function(e){
console.log(e.detail);
//e.detail的值就为index的值。
}
})父组件WXML:
<!--pages/demo1/demo1.wxml-->
<tabs binditemChange="handle"></tabs>子组件JS:
// pages/components/tabs/tabs.js
Component({
data: {
index: 1234455554545
},
methods: {
handleItemData:function(){
this.triggerEvent("itemChange",this.data.index);
}
}
})子组件WXML:
<!--pages/components/tabs/tabs.wxml-->
<button bindtap="handleItemData" style="border:1px solid black">
点我
</button>效果:
点击之后的控制台显示：
(6)自定义组件—>solt
solt标签其实是一个占位符，插槽。
等到父组件调用子组件的时候再传递标签过来，最终这些被传递的标签就会替换solt插槽的位置。
举个例子:
子组件WXML:
<!--pages/components/tabs/tabs.wxml-->
<slot></slot>父组件WXML:
<!--pages/demo1/demo1.wxml--
<tabs>
<view>这是父组件传递过来的</view>
</tabs>效果:
(7)组件的其他属性
Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。
| 定义段 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| properties | Object Map | 否 | 组件的对外属性，是属性名到属性设置的映射表 |
| data | Object | 否 | 组件的内部数据，和properties一样用于组件的模板渲染 |
| observers | Object | 否 | 组件数据字段监听器，用于监听properties与```data``的变化 |
| methods | Object | 否 | 组件的方法，包括事件响应的函数和任意的自定义方法 |
| created | Function | 否 | 组件生命周期函数，在组件实例刚刚被创建时执行 |
| attached | Function | 否 | 组件生命周期函数，在组件实例进入页面节点树时执行 |
| ready | Function | 否 | 组件生命周期函数，在组件在视图层布局完成后执行 |
| moved | Function | 否 | 组件生命周期函数，在组件实例被移动到节点树另一个位置时执行 |
| detached | Function | 否 | 组件生命周期函数，在组件实例被从页面节点树移除时执行 |
(8)一个demo
父组件JS:
// pages/demo2/demo2.js
Page({
data: {
List:[{
id:0,name:"首页",isActive:true},
{
id:1,name:"原创",isActive:false},
{
id:2,name:"分类",isActive:false},
{
id:3,name:"关于",isActive:false},
]
},
handle:function(e){
var list=this.data.List;
var index=e.detail;
list.forEach(function(v,i){
v.isActive=false;
if(i==index){
v.isActive=true;
}
})
this.setData({
List:list })
}
})父组件WXML:
<!--pages/demo2/demo2.wxml-->
<Tab List="{
{List}}" binditemChange="handle">
<block wx:if="{
{List[0].isActive}}">内容1</block>
<block wx:if="{
{List[1].isActive}}">内容2</block>
<block wx:if="{
{List[2].isActive}}">内容3</block>
<block wx:if="{
{List[3].isActive}}">内容4</block>
</Tab>
父组件JSON:
{
"usingComponents": {
"Tab":"../components/Tab/Tab"
}
}子组件JS:
// pages/components/Tab/Tab.js
Component({
properties: {
List:{
type:Array,
value:[]
}
},
methods: {
handleitemChange: function(e){
var index=e.currentTarget.dataset.index;
this.triggerEvent("itemChange",index);
}
}
})
子组件WXML:
<!--pages/components/Tab/Tab.wxml-->
<view class="itemAll">
<view wx:for="{
{List}}"
wx:key="id"
class="item {
{item.isActive?'active':''}}"
bindtap="handleitemChange"
data-index="{
{index}}" >
{
{
item.name}}
</view>
</view>
<slot></slot>子组件WXSS:
/* pages/components/Tab/Tab.wxss */
.itemAll{
display:flex; padding: 10rpx 0;}
.item{
flex:1; display:flex; justify-content:center; align-items:center;}
.active{
color:#f40; border-bottom:6rpx solid #f40;}效果:
四.小程序的生命周期
1.应用生命周期
App(Object object)代表注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。
Object object为参数，常见参数如下：
| 属性类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|
| onLaunch | function | 否 | 生命周期回调——监听小程序初始化。 |
| onShow | function | 否 | 生命周期回调——监听小程序启动或切前台。 |
| onHide | function | 否 | 生命周期回调——监听小程序切后台。 |
| onError | function | 否 | 错误监听函数。 |
| onPageNotFound | function | 否 | 页面不存在监听函数。 |
| onUnhandledRejection | function | 否 | 未处理的 Promise 拒绝事件监听函数。 |
2.页面生命周期
Page(Object object)表示注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
Object object为参数，常见参数如下：
| 属性 | 类型 | 说明 |
|---|---|---|
| data | Object | 页面的初始数据 |
| onLoad | function | 生命周期回调—监听页面加载 |
| onShow | function | 生命周期回调—监听页面显示 |
| onReady | function | 生命周期回调—监听页面初次渲染完成 |
| onHide | function | 生命周期回调—监听页面隐藏 |
| onUnload | function | 生命周期回调—监听页面卸载 |
| onPullDownRefresh | function | 监听用户下拉动作 |
| onReachBottom | function | 页面上拉触底事件的处理函数 |
| onShareAppMessage | function | 用户点击右上角转发 |
| onPageScroll | function | 页面滚动触发事件的处理函数 |
| onResize | function | 页面尺寸改变时触发 |
| onTabItemTap | function | 当前是 tab 页时，点击 tab 时触发 |