基于WeUI的Angular2开发

钟爱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- 开头，而有的并没有。其实，很容易理解这些区别。

所有组件、指令都需要 weui- 开头。
指令所需要的属性都需要 weui- 开头。
组件只允许标签（指：<weui-actionsheet></weui-actionsheet>）写法都不需要 weui- 开头。

最后

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