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

1. 全部组件、指令都须要 weui- 开头。
2. 指令所须要的属性都须要 weui- 开头。
3. 组件只容许标签（指：<weui-actionsheet></weui-actionsheet>）写法都不须要 weui- 开头。

最后

ngx-weui 会保持更新及组件的开发，若是您有兴趣能够至 Github 了解更多。