钟爱Angular

WeUI在微信上的表现真的很惊艳,极大简化微信UI的纠结。如果你和我一样一时找不到合适的UI,WeUI未尝不是一种选择。

一直以来大厂对React比较钟爱,官网也提供 React-Weui 版本;而对于像我这类钟爱Angular的人而言,或者说团队里面对Angular比较熟悉的情况下,如果能有一套比较标准的UI,在微信端开发应用也会极爽。

当然啦,Angular版本的WeUI在Github上也有好几套,但要么是还处于2.x时代、要么就是缺少维护。因此,不得以重复造了一套轮子,其名:ngx-weui

如何使用

下面会有点啰嗦,在这之前可以看一眼示例

样式

ngx-weui 除了官网不提供的UI组件样式外,但有些组件又很常用撸了点非官网的样式外,不带任何样式。因此,在使用前务必先引用weui.css,或者直接在 index.html 中引用官网CDN版本。

<link href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" rel="stylesheet">

安装与注册

npm install ngx-weui --save

ngx-weui 默认情况下可以直接使用:

import { WeUiModule } from 'ngx-weui';

@NgModule({
    imports: [ WeUiModule.forRoot() ]
})
export class AppModule { }

注册所有的模块。

当然,如果你明确知道只使用其中几个模块的话,可以针对模块进行导入,这样也可以简化包大小,比如导入一个弹出式菜单模块:

import { ActionSheetModule } from 'ngx-weui/actionsheet';

@NgModule({
    imports: [ ActionSheetModule.forRoot() ]
})
export class AppModule { }

使用

ngx-weui 本身并没有像 react-weui 版本那样,对样式也进行组件化。关于这一点好坏,和语言环境有很大关系。

用一句比较简单的话来讲,react在运行时决定组件,而angular在编译时决定组件。

正因此如此,所以我决定不对样式也组件化,因为这样完全没有意义。所以 ngx-weui 只对功能性进行组件化。

怎么区分这一点呢?比如说 weui-cell 表示一个单元格,这样样式本身只是为组织我们DOM结构,并不附加任何功能性质,因此并不会像react一样有一个相对应的 Cell 组件。

当然,像Toast本身是需要触发产生的,则 ngx-weui 会有一个对应的组件叫 weui-toast

<weui-button (click)="successToast.onShow()">Toast From Component</weui-button>
<weui-toast #success></weui-toast>
@ViewChild('success') successToast: ToastComponent;

默认Toast组件创建后是被隐藏的,所以这里需要定义一模板变量用于存储这个组件实例,才能调用该组件的 onShow() 方法。

恩,上面的写有点奇怪,因为不是很优雅,我的意思是说需要先在HTML模板中放置一个 weui-toast 组件,然后再定义一个模板变量,最后需要的时候调用显示方法。

所以,提供另一种 Service 形式写法,为什么呢?很简单,很多时候我们希望在 Class 里直接一个 Toast 显示告知用户你有问题,这个时候还要去HTML模板创建再显示,显得编码太过于笨拙。

constructor(public srv: ToastService) {
    // success
    srv.success();
    // loading
    srv.loading();
}

怎样,注入 Service 类,一行代码简洁、优雅!

全局默认配置项说明

有一些模块(比如:actionsheet、button等),虽然已经有一些默认的配置,但你可以通过全局注册来改变它。

比如,默认按钮的类型是 primary(成功样式)。

<weui-button>成功样式按钮</weui-button>
<weui-button weui-type="warn">警告样式按钮</weui-button>

可以在NgModule改变默认配置项,默认所有按钮为警告样式。

import { NgModule } from '@angular/core';
import { WeUiModule, ButtonConfig } from 'ngx-weui';

@NgModule({
    imports: [
        WeUiModule.forRoot()
    ],
    providers: [
        // 重置默认按钮样式为:warn
        { provide: ButtonConfig, useFactory: ()=> { return Object.assign(new ButtonConfig(), { type: 'warn' }); } }
    ]
})

这种方式,可以简化通用操作。

是否允许全局配置的模块,可以在API文档中见【可用于[全局配置]】字样的类,都属性可用于全局配置类。

一些细节但又有用的点

命名说明

HTML模板中组件名、属性名的命名有的是以 weui- 开头,而有的并没有。其实,很容易理解这些区别。

  1. 所有组件、指令都需要 weui- 开头。
  2. 指令所需要的属性都需要 weui- 开头。
  3. 组件只允许标签(指:<weui-actionsheet></weui-actionsheet>)写法都不需要 weui- 开头。

最后

ngx-weui 会保持更新及组件的开发,如果您有兴趣可以至 Github 了解更多。