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

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

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

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

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样式了,开发页面又快了一步。

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