何为组件化
很久之前,古代人的文件都是一笔一划写的,后面懒得写字了,发明了活字印刷
现在,前端们懒得写重复的代码了,于是出现了组件化开发
某种程度上说,这两者有类似之处,把很多地方都会用到的相同的东西,单独抽出来做成一个独立的东西,哪里需要用到,就拿来用一下
组件化有很多好处
减少代码耦合
页面结构更加清晰直观
易于维护
…
引入并使用一个组件,无论如何会比你去之前的文件里复制粘贴要优雅的多不是么
如何组件化
组件化其实是一种思路,把一个很多地方都会用到的东西,抽取成组件
通常会按照组件的规则,将原本的代码改造成组件,变动并不大,但不代表直接复制粘贴就可以了
相反在真正的组件化改造中,确实会遇到不少麻烦,要考虑到的东西多了很多,大厂的ui组件库一个小小的按钮可能都有几十种属性
但是基础的组件化,其实也没那么难
在微信小程序中制作组件
这是微信小程序官方文档对自定义组件的介绍
组件与页面的结构相差无几,同样是4个文件,不过json文件中会用"component": true来表示这是一个组件,然后在组件的js中,与页面的结构也是不同的
可以在properties中声明组件的属性,在data中设置组件的初始数据,在method中声明方法
Component({
/**
* 组件的属性列表
*/
properties: {
name:{
// 属性的数据类型
type:String,
// 属性的默认值
value:'xz'
},
// 快速声明属性的方式
age:Number
},
/**
* 组件的初始数据
*/
data: {
initData:'组件的初始数据'
},
lifetimes: {
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () { // 在组件实例进入页面节点树时执行 },
moved: function () { // 在组件实例被移动到节点树另一个位置时执行 },
detached: function () { // 在组件实例被从页面节点树移除时执行 },
},
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () { // 组件所在的页面被展示时执行 },
hide: function () { // 组件所在的页面被隐藏时执行 },
resize: function () { // 组件所在的页面尺寸变化时执行 },
},
/**
* 组件的方法列表
*/
methods: {
// 组件的方法
sayHello(){}
}
})
在wxml文件中可以使用slot来接受页面传入的结构
要注意在组件中书写样式的时候,不要使用id选择器,属性选择器以及标签选择器,并且后代选择器也要尽量避免使用,只使用class选择器是比较好的选择
行内样式通常用于动态绑定样式,如果是静态的样式请使用class
<view class="my_component">
<text class="my_component-title">{{name}}</text>
<slot></slot>
</view>
在页面中注册即可使用
{
"usingComponents": {
"my-component":"/components/my_component/my_component"
}
}
<view>
<my-component name='jack' age="{{18}}"><text>页面传入的结构</text></my-component>
</view>
这样,一个简单的组件便完成了
组件传值
父传子
父传子通过子组件标签的属性来传递即可,传入到子组件对应设置的数据
<view>
<!-- 子组件设置了对应的properties即可接收到 -->
<my-component name='jack' age="{{18}}" showTip ><text>页面传入的结构</text></my-component>
</view>
子传父
子传父通过自定义事件来传值,也可通过this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法
<view>
<!-- 绑定组件设置的自定义事件 -->
<my-component bind:componetTap="onComponentTap"><text>页面传入的结构</text></my-component>
</view>
Page({
onComponentTap: function(e){
console.log(e.detail) // 自定义组件触发事件时提供的detail对象,在组件内部自行设置
}
})
自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项
<button bindtap="onTap">点击触发componentTap事件</button>
Component({
properties: {},
data:{initData:'组件内部的数据'}
methods: {
onTap: function(){
var myEventDetail = {componentData:this.data.initData} // detail对象,提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('componentTap', myEventDetail, myEventOption)
}
}
})
这样就可以从组件内部传递数据至父组件
最后附上一个目前业务中用到的简单的按钮组件,画风简陋让大伙见笑了…
<!--components/home/tool-btn/tool-btn.wxml-->
<view class="c_tool-btn" style="{{'background-color:'+bgc}}">
<!--角标-->
<view class="c_tool-btn-tip" wx:if="{{tip}}" >{{tip>=100?'99+':tip}}</view>
<view class="c_tool-btn-slot" style="{{'color:'+color}}">
<!-- slot接受一个icon -->
<slot></slot>
</view>
</view>
/* components/home/tool-btn/tool-btn.wxss */
.c_tool-btn {
width: 70rpx;
height: 70rpx;
border-radius: 35rpx;
position: relative;
}
.c_tool-btn-slot {
display: inline-block;
position: absolute;
font-size: 35rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.c_tool-btn-tip {
width: 30rpx;
height: 30rpx;
border-radius: 15rpx;
line-height: 30rpx;
text-align: center;
color: white;
background-color: red;
font-size: 22rpx;
position: absolute;
right: -8rpx;
top: -8rpx;
}
// components/home/tool-btn/tool-btn.js
Component({
/**
* 组件的属性列表
*/
properties: {
color:{
// 字体颜色
type:String,
value:'#b5b5b5'
},
bgc:{
// 背景颜色
type:String,
value:'#fbc36e'
},
tip:Number, // 数字角标
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
下一步的设想是增加一个type来改变为文字按钮或是圆角按钮,那样的话就需要根据传入的type返回不同风格的按钮即可