基於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 瞭解更多。