微信小程序_自定义组件_初体验

本文链接： https://blog.csdn.net/mynewdays/article/details/89675461

自定义组件是微信小程序中重要的组成部分，是实现模块化开发的重要手段

个人认为，自定义组件是区分菜鸟与高手的分水岭

第一篇先介绍小程序自定义组件的基本使用

自定义组件的使用可以分为如下几个步骤

创建组件
编写组件
引用组件
使用组件

下面以一个星级展示的小案例，说明上面四个步骤

创建组件

组件的引文名称为 component，我们的小程序可能会定义以及使用很多组件，所以建议将所有组件放到一个统一的目录下

在项目根目录下新建目录 components

然后在其中新建目录 star，再右键，新建 component

输入名称 star，新建完成，目录结构如下

组件的页面结构与普通page一样，也是由 .wxml、.wxss、.json和.js组成
与普通page相比，组件的 json 文件中，多了如下代码，表明当前是组件，而不是页面

编写组件

逻辑层

首先编写逻辑层

在逻辑层中编写代码注意一下几点

视图层中绑定的方法和用户自定义方法必须写在 methods 中
逻辑层中的proerties 选项中的属性可以通过组件的使用者赋值，换句话说，组件中的属性是组件与组件的调用者之间通信的桥梁
组件的逻辑层中也有data，这个与page中的data没有什么不同

首先编写根据评分，生成星际的自定义方法，此方法的逻辑是：根据分数1-10的不同值，生成对应的星际，最低1星、最高5星

methods: {
    computeStar(score) {
      var starCount = 1
      if (score >= 1 && score < 2) {
        starCount = 1
      } else if (score >= 2 && score < 4) {
        starCount = 2
      } else if (score >= 4 && score < 6) {
        starCount = 3
      } else if (score >= 6 && score < 8) {
        starCount = 4
      } else if (score >= 8 && score <= 10) {
        starCount = 5
      }
      return starCount
    }
  }

在组件的 data 中定义变量 starCount

  data: {
    //总共循环5次，此数组控制循环的总次数
    starArr: [1, 2, 3, 4, 5], 
    starCount: 0 //黄星的数量
  },

然后在组件的attached 事件中编写代码，关于此事件，做如下几点说明：

组件的生命周期与page的生命周期不同，在组件中没有onload、onshoe等事件，取而代之的是created 、attached 等事件
attached 事件其实相当于page中的onload 事件，在组件完全初始化完毕，进入页面节点时执行
attached事件的执行时机比页面的onload事件要完，请牢记这一点，后面要用到这一点
小程序官方文档建议，生命周期函数应该在 lifetimes 字段内声明

  lifetimes: {
    attached() {
      var res = this.computeStar(this.properties.score)
      this.setData({
        starCount: res
      })
    }
  },

说明：上面代码中的 this.properties.score 作用是从组件的 properties 字段中获取 score 属性的值，然后作为参数传递给自定义方法，properties 字段定义如下

  properties: {
    score: Number
  },

视图层

<block wx:for="{{starArr}}" wx:key="key">
  <image wx:if="{{index+1<=starCount}}" class='star_img' src="/images/icon/star.png"></image>
  <image wx:else class='star_img' src="/images/icon/chat.png"></image>
</block>

上面代码逻辑：、

一共循环五次，生成五个星
starCount的值是多少，就生成几个黄星，剩下的就生成灰星

样式代码

.star_img{
  width: 12px;
  height: 12px;
  margin-right: 2px;
}

使用组件

在pages中新建页面 index

在index.json 中加入如下代码，引入组件

{
  "usingComponents": {
    "star_component":"/components/star/star"
  }
}

其中，建为组件名称，值为组件路径

在 index.wxml 中使用自定义的组件名称使用此组件，并为组件中的 properties 字段内的属性 score 赋值

<star_component score="5"></star_component>

编译程序，查看生成结果