钟爱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 了解更多。
