[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

一、摘要:本文通过一个名为 banner 的自定义组件,来介绍自定义组件的样式、参数传入、组件生命周期、组件方法的使用

banner 组件实现的功能是置顶在页面顶部的一个横幅,里面的文字内容和点击后的跳转页面则作为参数传递进来

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 [2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

本文参考资料

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

二、技术点:

1.组件生命周期 lifetimes

2.组件原型属性  properties

3.组件方法 methods

4.组件使用 样式类

三、项目开始

  接上一文,我们仍然使用名为‘组件开发’的项目,在项目的components文件夹下边创建如下文件

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

 这个banner文件夹就是我们的组件本体了

随后,我们在banner.json文件夹填写如下内容

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

 表明他是一个组件

在banner.js文件内填写如下内容

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

 下边三个新属性就是本文的主要内容,组件方法,组件原型属性,组件生命周期

我们来给组件定义一个名为text的原型属性,用来标识我们想让banner展示的文字

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

 图中,因为原型属性在组件上的传入需要从字符串进行转换,所以需要显式指定类型,value的值则是它的默认值。属性也有其他声明方法,具体可参见官方文档

在banner.wxml中,我们直接把text显示出来

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

 在app.json中,全局引用组件

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

之后我们在index.wxml中使用组件,注意这里的原型属性使用方式。

 [2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类 ,[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 可以看到,我们在组件上定义的属性值被传入了组件,在不传入时则被设为了默认值,并且,原型属性也是组件的内部数据的一部分,也可以做数据绑定,随后我们可以看到,可以用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的根节点绑定样式

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

保存,可以注意到我们的页面变成了这样,我们的基本样式就做好了

 [2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

随后,我们为组件添加一个where原型属性,用以指示要跳转的页面路径,并且绑定一个方法到tap事件,

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

当用户没有填写where时,where将会是一个空字符串  ‘‘  ,因此我们在组件的attached生命周期函数中来判断where 的状态。如果是 ‘‘  我们就给他当前页面的路径

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

 

 完整代码如下

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页面。我们路由到这个页面看看

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

 点击banner,可以看到成功进入logs

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

 成功实现banner组件

 

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

 

[2]微信小程序技能点-自定义组件-组件生命周期,方法,参数传入,样式类

上一篇:配置 ZABBIX 使用企业微信发送 Alert 消息


下一篇:YU-NO中的拼图小程序