上篇《微信小程序自定义组件化UI框架开发尝试！》我说过自己为了缩小小程序的代码量，自定义组件使用，抛弃了第三方组件（ColorUI和iView 等）的使用，自己根据项目需要自定义了UI框架组件，现在记录一下我自定义文本组件的笔记。

在开发组件之前，先让大家看看我的组件目录：ui>dist+index+main.wxss ，如下图：

微信小程序自定义组件封装之文本组件篇-QUI-Notes

组件开发三步走：创建组件、开发组件和调用组件。

1.创建组件

新建页面 font，然后进入index.json，创建组件：

{
  "component": true
}

2.开发组件

通过wxml+wxss+js，根据自己的功能编写自己的组件，例如我的文字组件：字体可以自定义大小、粗细、颜色、对齐方式以及多行隐藏

wxml:

<view class="ui-font {{size?'ui-size-'+size:''}} {{weight?'ui-fw-'+weight:''}} {{color?'ui-color-'+color:''}} {{align?'text-align-'+align:''}} {{hidden?'ui-text-'+hidden:''}} ">
  <slot>{{innerText}}</slot>
</view>

wxss:

.ui-font{font-size: 28rpx;color: #333333;text-align: justify;}
.ui-size-default{font-size: 28rpx;}
.ui-size-10{font-size: 22rpx;}
.ui-size-11{font-size: 24rpx;}
.ui-size-12{font-size: 26rpx;}
.ui-size-13{font-size: 28rpx;}
.ui-size-14{font-size: 30rpx;}
.ui-size-15{font-size: 32rpx;}
.ui-size-16{font-size: 34rpx;}
.ui-size-17{font-size: 36rpx;}
.ui-size-19{font-size: 40rpx;}
.ui-size-20{font-size: 42rpx;}

.ui-fw-1{font-weight: 200;font-weight: lighter;}
.ui-fw-2{font-weight: 400;}
.ui-fw-3{font-weight: 500;font-weight: Bold;}

.ui-color-111{color: #111;}
.ui-color-666{color: #666;}
.ui-color-999{color: #999;}
.ui-color-fff{color: #fff;}
.ui-color-main{color: var(--mc);}
.ui-color-fu{color: var(--mf);}
.ui-color-ad1{color: var(--ad1);}

.text-align-left{text-align: left;}
.text-align-center{text-align: center;}
.text-align-right{text-align: right;}

.ui-text-1{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ui-text-2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.ui-text-3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical;}

js：

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: '默认按钮',
    },
    size: {
type: String,
value: 'default'
    },
    weight: {
type: String,
value: '4'
    },
    color: {
type: String,
value: 'default'
    },
    align: {
type: String,
value: 'default'
    },
    hidden: {
type: String,
value: 'default'
    },
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

这样组件的第二步就编写完成了，那么第三步，如何调用组件？

3.调用组件

在目标页面的index.json里面引入我们刚刚写好的组件：

{
  "usingComponents": {
    "ui-font":"/ui/dist/font",
  }
}

然后在目标页面的index.wxml里面调用组件：

<ui-font size="15" color="main">UI主色调:main</ui-font>

  • size：自定义文字大小，默认13号字体，属性值选择10~20字号范围；
  • weight：自定义字重，默认正常字体，属性值有1（细体）,2（正常）,3（加粗）；
  • color：字体颜色，可根据项目主色，先去组件内自定义颜色，然后再使用，默认#333333，可选111,666,999.....
  • align：字体文本对齐方式，可选left(左对齐)、center(居中对齐)、right(右对齐)；
  • hidden：多行文本隐藏，可选择1（单行隐藏）,2（两行隐藏）,3（三行隐藏）

不足之处

目前文本组件功能还算齐全，用起来直接加参数，控制就可以了，不过也有一定的不足。

例如：
1.间距无法调整，只能再外包裹一层view，加margin或padding;
2.文本的行间距需要的可以新增属性和样式，然后实行行间距控制。

这样就实现了微信小程序自定义文本组件了，用起来很爽，终于不用再一个个写class，单独追加css样式了，开发页面又快了一步。

之前作为新手很讨厌组件，因为看着很难理解，现在发现一个小程序用组件开发的话，真香，还真没有逃过“真香定律”。