一、摘要:本文通过一个名为 banner 的自定义组件,来介绍自定义组件的样式、参数传入、组件生命周期、组件方法的使用
banner 组件实现的功能是置顶在页面顶部的一个横幅,里面的文字内容和点击后的跳转页面则作为参数传递进来
本文参考资料
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html
二、技术点:
1.组件生命周期 lifetimes
2.组件原型属性 properties
3.组件方法 methods
4.组件使用 样式类
三、项目开始
接上一文,我们仍然使用名为‘组件开发’的项目,在项目的components文件夹下边创建如下文件
这个banner文件夹就是我们的组件本体了
随后,我们在banner.json文件夹填写如下内容
表明他是一个组件
在banner.js文件内填写如下内容
下边三个新属性就是本文的主要内容,组件方法,组件原型属性,组件生命周期
我们来给组件定义一个名为text的原型属性,用来标识我们想让banner展示的文字
图中,因为原型属性在组件上的传入需要从字符串进行转换,所以需要显式指定类型,value的值则是它的默认值。属性也有其他声明方法,具体可参见官方文档
在banner.wxml中,我们直接把text显示出来
在app.json中,全局引用组件
之后我们在index.wxml中使用组件,注意这里的原型属性使用方式。
,
可以看到,我们在组件上定义的属性值被传入了组件,在不传入时则被设为了默认值,并且,原型属性也是组件的内部数据的一部分,也可以做数据绑定,随后我们可以看到,可以用this.data.XXXX的方式得到它的值
随后,我们来定义组件的样式类,在banner.wxss编写如下代码
.banner{ display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: red; color: white; width: 100%; height:100rpx; position: fixed; top: 0px; left:0px;
z-index: 1;
}
然后在banner.wxml的根节点绑定样式
保存,可以注意到我们的页面变成了这样,我们的基本样式就做好了
随后,我们为组件添加一个where原型属性,用以指示要跳转的页面路径,并且绑定一个方法到tap事件,
当用户没有填写where时,where将会是一个空字符串 ‘‘ ,因此我们在组件的attached生命周期函数中来判断where 的状态。如果是 ‘‘ 我们就给他当前页面的路径
完整代码如下
Component({ data:{}, methods:{ goto:function(){ wx.navigateTo({ url:this.data.where, }) } }, properties:{ text:{ type:String, value:"热烈欢迎" }, where:String }, lifetimes:{ attached:function(){ const pages=getCurrentPages() const page=pages[pages.length-1] if(this.data.where==‘‘) this.setData({ where:`/${page.route}` }) } } })
点击我们的banner组件,可以看到页面被路由到了当前页面
如果我们设置了where属性,比如正好默认项目为我们提供了一个logs页面。我们路由到这个页面看看
点击banner,可以看到成功进入logs
成功实现banner组件