在现在前端领域,最常见的话语就是组件化、工程化的内容。所有的框架都在朝着这方面发展。作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发。
在我们的日常开发中,可以封装一些常用的组件达到复用效果,可以大大提高我们的工作效率。今天我们学习一下如何在微信小程序中封装自己的组件。
首先我们在app.json
中新建一个页面,组件自己的结构和普通页面的机构是一样的,同样由.js
、.json
、.wxml
、wxss
组成,所以我们像注册一个普通页面一样注册它。
我们来试着封装一个一键返回顶部的按钮。
首先进去页面的json
文件,把component
属性设置为true
。
{
"component":true
}
wxml
代码如下:
<view class="inner" bindtap="scrollTop">
{
{btnFont}}
</view>
wxss
代码如下:
page {
height: 2000rpx;
}
.inner {
width: 160rpx;
height: 160rpx;
line-height: 160rpx;
border-radius: 50%;
background-color: rgb(45, 150, 233);
text-align: center;
font-weight: bold;
position: fixed;
right: 40rpx;
bottom: 40rpx;
}
wxml
和wxss
的代码和普通页面的格式一模一样。
js
内容如下:
Component({
properties: {
btnFont: {
type: String,
value: 'default value'
}
},
data: {
someData:{
}
},
methods: {
scrollTop() {
if(wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop:0
})
}else {
wx.showModal({
title:'提示',
content:'当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试!'
})
}
}
},
lifetimes: {
},
})
我们来看一下它和普通页面的js
结构上有什么区别?
普通的页面的js
文件中是由Page({})
涵盖的,而组件的js
文件是由Component({})
涵盖的。对象中的内容也略有不同。
Component
对象中的全部属性如下:
定义段 | 类型 | 是否必填 | 描述 | 最低版本 |
---|---|---|---|---|
properties | Object Map | 否 | 组件的对外属性,是属性名到属性设置的映射表 | |
data | Object | 否 | 组件的内部数据,和properties 一同用于组件的模板渲染 |
|
observers | Object | 否 | 组件数据字段监听器,用于监听properties 和data 的变化 |
2.6.1 |
methods | Object | 否 | 组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用 | |
behaviors | String Array | 否 | 类似于mixins和traits的组件间代码复用机制 | |
created | Function | 否 | 组件生命周期函数-在组件实例刚刚被创建时执行,注意此时不能调用 setData |
|
attached | Function | 否 | 组件生命周期函数-在组件实例进入页面节点树时执行 | |
ready | Function | 否 | 组件生命周期函数-在组件布局完成后执行 | |
moved | Function | 否 | 组件生命周期函数-在组件实例被移动到节点树另一个位置时执行 | |
detached | Function | 否 | 组件生命周期函数-在组件实例被从页面节点树移除时执行 | |
relations | Object | 否 | 组件间关系定义 | |
externalClasses | String Array | 否 | 组件接受的外部样式类 | |
options | Object Map | 否 | 一些选项(文档中介绍相关特性时会涉及具体的选项设置,这里暂不列举) | |
lifetimes | Object | 否 | 组件生命周期声明对象 | |
pageLifetimes | Object | 否 | 组件所在页面的生命周期声明对象 | |
definitionFilter | Function | 否 | 定义段过滤器,用于自定义组件扩展 |
Component
对象的属性有很多,最常用的就是properties
,data
,methods
,lifetimes
其实properties
,如果你学习过Vue
的话,这个东西的作用和props是一模一样的,我们可以在这里设置组件属性的格式。比如我们这个按钮,我想让按钮的文字动态显示,在页面中使用的时候动态设置,所以我们在wxml
中用{
{}}
设置内容为btnFont
,在js
的properties
中设置它的接收格式和默认值。
因为这个按钮的功能是返回顶部,所以我们在组件封装的时候就可以把事件绑定上,在scrollTop
方法中,我们写入了返回顶部的代码。
到这里,我们就可以完成了一个组件的封装。
接下来就是引入了,首先我们要先进入引入页面的json
文件中
{
"usingComponents": {
"ScrollTop":"../testDemo/testDemo"
}
}
usingComponents
属性就是用来挂载组件的,属性的key
就是组件的名字,value
就是组件的路径
然后直接去wxml
中使用即可。
<ScrollTop btnFont="返回顶部" style="display:{
{
isHidden}}"></ScrollTop>
有部分js内容需要在使用页面中写,比如监听当前窗口距离顶部的高度。
data: {
isHidden:'none'
},
onPageScroll(e) {
console.log(e);
if(e.scrollTop !== 0) {
this.setData({
isHidden:'block'
})
}else {
this.setData({
isHidden:'none'
})
}
},
这样我们就完成了封装自己的组件并且应用到实际场景中的内容。
有任何问题都可以联系我哦!
QQ:505417246
微信:18331092918
微信公众号:Code程序人生
个人博客:https://Creator12333.github.io