作者：wszgrcy

來源：SegmentFault 思否社區(qū)

`Angular`開發(fā)小程序

通過修改Angular實現(xiàn)使用Angular開發(fā)小程序
本項目實現(xiàn)的目的很簡單也很純粹,就是告訴大家.框架無高低,使用的人,有高低

視頻簡介

https://www.bilibili.com/video/BV1wh411p7bB

開發(fā)模板

https://github.com/wszgrcy/angular-miniprogram-template

修改內(nèi)容

builder

修改用于支持自定義構(gòu)建

component 編譯時

通過提前解析獲得模板與樣式,轉(zhuǎn)換為小程序所需的

全局變量

用來支持ngZone與Angular默認(rèn)全局引用

platform

通過實現(xiàn)自定義的 platform,給予小程序的啟動上下文支持

renderFactory

原渲染工廠支持的是 dom 渲染,但是小程序不需要

主出口重建

主出口預(yù)先加載相關(guān)依賴,為后面的 page 做準(zhǔn)備

文件系統(tǒng)監(jiān)聽修改

需要在預(yù)處理結(jié)束時,清除文件緩存

增加內(nèi)容

組件與頁面的注冊函數(shù)

只有被注冊,還會自動的查詢依賴關(guān)系與生成

相關(guān)生命周期的傳遞

小程序自帶的一些生命周期

小程序相關(guān) token.

APP_TOKEN可以獲得 App 實例
COMPONENT_TOKEN,PAGE_TOKEN可以獲得組件對應(yīng)的小程序組件實例

已實現(xiàn)內(nèi)容

變更檢測
Input,Output
依賴注入
ng-content
ngIf,ngSwitch,ngFor

對于其他指令及自定義指令,暫未實現(xiàn)

小程序大部分功能

未實現(xiàn)

可實現(xiàn)的功能

http
管道
非結(jié)構(gòu)型指令
結(jié)構(gòu)型指令的非引用傳遞或有限傳遞
路由的部分實現(xiàn)
對于其他指令及自定義指令,暫未實現(xiàn)

對于其他指令及自定義指令,暫未實現(xiàn)

表單
自定義組件

不可能實現(xiàn)的功能

無限制的結(jié)構(gòu)型指令

除非模板運(yùn)行動態(tài)按需加載

其他平臺的支持

目前功能尚未完善,不對多余的平臺做支持
目前僅支持微信小程序,但是未來重構(gòu)完善后,會添加其他平臺的小程序支持

準(zhǔn)備做的

component 的 template 重寫

之前是通過完全重寫實現(xiàn)的值綁定與更新,但是是因為有一個技術(shù)沒法實現(xiàn)所以才采取點方案.
目前已經(jīng)可以通過替換調(diào)用函數(shù)實現(xiàn)這個,所以重新 template
重寫后將會使管道,表單,非結(jié)構(gòu)型指令的支持

點擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動和交流，掃描下方”二維碼“或在“公眾號后臺“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -

Angular開發(fā)小程序