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

一、摘要：本文通过一个名为 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组件