刘流的博客

在小程序中使用自定义组件

小程序
Word count: 728Reading time: 3 min
2020/08/22 Share

1. 新建组件

  1. 新建文件夹 components。
  2. 在 components 里新建 like 文件夹。
  3. 在 like 文件夹上右键，新建 components 就可以快速创建一个组件了。

    2. 引用组件

我们有一个 classic 页面文件夹，在 classic.json 里面就可以引入组件。 "l-like" 是组件名称，可以自定义，其后面的是组件的路径。

1
2
3
4
5
{
  "usingComponents": {
    "l-like": "../components/like/index"
  }
}

不仅仅可以在一个页面里面引入组件，当一个组件在多个页面中使用时，可以直接在 app.json 里面引入，这样就可以直接在其他的页面引入了。

3. 使用组件

使用组件和使用标签是一样的，我们在页面文件 classic.wxml 使用刚刚定义的组件 

1
<l-like></l-like>

4. 相对路径和绝对路径

小程序中使用绝对路径是 / .使用相对路径 ../ 返回上一级路径

5.组件只能继承极少数全局样式

只有 font color 属性会从组件外继承到组件内。

6.组件最好不要有留白间距

组件最好不要留有空白间距，因为这个会让组件变大。使用 line-height 可以消除字体的留白间距。

给元素设置了display: flex 之后，容器的子元素虽然失去了block属性的作用，但是其本身的block特征并没有消失，设置 inline-flex 可以让元素的宽度自适应

7.给组件添加事件

绑定事件：
bind:tap="onLike" 也可以使用 catch:tap="onLike"
bind 不会阻止事件向上冒泡，catch 会阻止事件向上冒泡。

1
<view bind:tap="onLike"></view>

8. 数据的使用

使用数据的原则，如果数据仅是组件内部使用的话，那么就将数据定义在 data 里面，如果要与外部发生交互的话，那么就将定义在 properties 里面。

属性的定义：

1
2
3
4
5
6
7
8
9
10
11
properties: {
    count:{
      // 必须要填的属性
      type:Boolean,
      // 非必需，属性的初始值，
      value: false,
      // 非必须，
      observer(newVal, oldVal, changedPath) {
      }
    }
  }

使用方式：
无论是定义的属性或者是数据的使用方式都是一样的。
在 index.js 里面定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Component({
  properties: {
    count:{
      type:Number
    },
    like:{
      type:Boolean
    }
  },
  data: {
    yesSrc:'images/like.png',
    noSrc:'images/like@dis.png'
  },
  methods: {
      onLike(){
        // 获取属性 count
        let count = this.properties.count
        let like = this.properties.like

        // 先改变 like 的状态
        like = !like
        // 根据 like 的状态改变 count 数
        count = like?count+1:count-1
        // 更新数据 使用 this.setData
        this.setData({
          count,
          like,
        })
      }
  }
})

在 index.wxml 中使用：

1
2
3
4
<view bind:tap="onLike" class="container">
    <image  class="img" src="{{like?yesSrc:noSrc}}"></image>
    <text class="text">{{count}}</text>
</view>

Author：John Doe

原文链接：http://example.com/2020/08/22/2020-08-22-mp-cmp/

发表日期：August 22nd 2020, 12:00:00 am

更新日期：August 30th 2020, 7:44:23 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 1. 新建组件
  2. 2. 2. 引用组件
  3. 3. 3. 使用组件
  4. 4. 4. 相对路径和绝对路径
  5. 5. 5.组件只能继承极少数全局样式
  6. 6. 6.组件最好不要有留白间距
  7. 7. 7.给组件添加事件
  8. 8. 8. 数据的使用
Total : 16
2020
小程序 NodeJS ES6 杂记 HTML CSS JavaScript
CSS 小程序 Node JavaScript 杂记 HTML 前端