From 3d74bed5528c550be235d1cf96bbd31eb50eaf9e Mon Sep 17 00:00:00 2001 From: imeepos <1037483576@qq.com> Date: Wed, 1 May 2019 06:22:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E7=90=86=E5=BC=80=E5=8F=91=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + changelog.md => CHANGELOGS.md | 0 book.json | 176 ++++++++ docs/README.md | 408 +++++++++++++++++- docs/SUMMARY.md | 2 +- WechatIMG95.jpeg => docs/WechatIMG95.jpeg | Bin logo.png => docs/logo.png | Bin ...d-ng-template-lexical-binding-angular7.png | Bin ...3\347\273\237\346\246\202\350\277\260.png" | Bin readme.md | 6 +- 10 files changed, 588 insertions(+), 5 deletions(-) rename changelog.md => CHANGELOGS.md (100%) create mode 100644 book.json rename WechatIMG95.jpeg => docs/WechatIMG95.jpeg (100%) rename logo.png => docs/logo.png (100%) rename nested-ng-template-lexical-binding-angular7.png => docs/nested-ng-template-lexical-binding-angular7.png (100%) rename "nger\347\263\273\347\273\237\346\246\202\350\277\260.png" => "docs/nger\347\263\273\347\273\237\346\246\202\350\277\260.png" (100%) diff --git a/.gitignore b/.gitignore index 11a3baa..a3d80b7 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ /data/ /attachment /template/ +/dist/ /.temp /testing /**/.rts2_cache_cjs diff --git a/changelog.md b/CHANGELOGS.md similarity index 100% rename from changelog.md rename to CHANGELOGS.md diff --git a/book.json b/book.json new file mode 100644 index 0000000..c9b06b0 --- /dev/null +++ b/book.json @@ -0,0 +1,176 @@ +{ + "title": "Nger Help Docs", + "author": "imeepos", + "description": "Nger帮助文档", + "language": "zh-hans", + "root": "./docs", + "links": { + "sidebar": { + "Home": "https://meepo.com.cn" + } + }, + "plugins": [ + "theme-comscore", + "-lunr", + "-search", + "search-plus@^0.0.11", + "-highlight", + "-livereload", + "simple-page-toc@^0.1.1", + "github@^2.0.0", + "github-buttons@2.1.0", + "edit-link@^2.0.2", + "prism@^2.1.0", + "prism-themes@^0.0.2", + "advanced-emoji@^0.2.1", + "anchors@^0.7.1", + "include-codeblock@^3.0.2", + "ace@^0.3.2", + "emphasize@^1.1.0", + "katex@^1.1.3", + "splitter@^0.0.8", + "mermaid-gb3@2.1.0", + "tbfed-pagefooter@^0.0.1", + "expandable-chapters-small@^0.1.7", + "sectionx@^3.1.0", + "donate@^1.0.2", + "local-video@^1.0.1", + "sitemap-general@^0.1.1", + "anchor-navigation-ex@0.1.8", + "favicon@^0.0.2", + "todo@^0.1.3", + "3-ba@^0.9.0", + "terminal@^0.3.2", + "alerts@^0.2.0", + "include-csv@^0.1.0", + "puml@^1.0.1", + "musicxml@^1.0.2", + "klipse@^1.2.0", + "rss@^3.0.2", + "-sharing", + "sharing-plus@^0.0.2", + "graph@^0.1.0", + "chart@^0.2.0", + "ga", + "copy-code-button" + ], + "pluginsConfig": { + "theme-default": { + "showLevel": true + }, + "ga": { + "token": "" + }, + "prism": { + "css": [ + "prism-themes/themes/prism-base16-ateliersulphurpool.light.css" + ] + }, + "github": { + "url": "https://github.com/meepobrother/nger.git" + }, + "github-buttons": { + "repo": "meepobrother/nger", + "types": [ + "star", + "watch", + "fork" + ], + "size": "small" + }, + "include-codeblock": { + "template": "ace", + "unindent": true, + "edit": true + }, + "sharing": { + "douban": false, + "facebook": true, + "google": false, + "hatenaBookmark": false, + "instapaper": false, + "line": false, + "linkedin": false, + "messenger": false, + "pocket": false, + "qq": false, + "qzone": false, + "stumbleupon": false, + "twitter": true, + "viber": false, + "vk": false, + "weibo": false, + "whatsapp": false, + "all": [ + "facebook", + "google", + "twitter", + "weibo", + "instapaper", + "linkedin", + "pocket", + "stumbleupon", + "qq", + "qzone" + ] + }, + "tbfed-pagefooter": { + "copyright": "Copyright © 2019 S", + "modify_label": "该文件修订时间：", + "modify_format": "YYYY-MM-DD HH:mm:ss" + }, + "3-ba": { + "token": "" + }, + "donate": { + "wechat": "", + "alipay": "", + "title": "意思意思？", + "button": "赏", + "alipayText": "支付宝打赏", + "wechatText": "微信打赏" + }, + "simple-page-toc": { + "maxDepth": 3, + "skipFirstH1": true + }, + "edit-link": { + "base": "", + "label": "Edit" + }, + "sitemap-general": { + "prefix": "" + }, + "anchor-navigation-ex": { + "isRewritePageTitle": true, + "isShowTocTitleIcon": true, + "tocLevel1Icon": "fa fa-hand-o-right", + "tocLevel2Icon": "fa fa-hand-o-right", + "tocLevel3Icon": "fa fa-hand-o-right" + }, + "sectionx": { + "tag": "b" + }, + "favicon": { + "shortcut": "favicon.png", + "bookmark": "favicon.png" + }, + "terminal": { + "copyButtons": true, + "fade": false, + "style": "flat" + }, + "rss": { + "title": "Nger使用文档", + "description": "Nger文档资料.", + "author": "imeepos", + "feed_url": "", + "site_url": "", + "managingEditor": "super@ds-vip.top", + "webMaster": "super@ds-vip.top", + "categories": [ + "gitbook" + ] + } + } +} \ No newline at end of file diff --git a/docs/README.md b/docs/README.md index 3d07efe..a7928ff 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,2 +1,408 @@ -# Introduction +

Vue logo

+

用ng自由组合开发小程序

+ +> 项目名称意义，用ng的人！I am a nger! + + +Warning! Warning! Warning! 这不仅仅是一个前端项目。 + +vue、react相继都有了小程序的开发框架，作为一个nger，也该为社区做点事情了! +很遗憾，由于ng和小程序的差异性，我们暂时没打算直接把ng项目转换成小程序，而是用ng的一套思想（`依赖注入`、`装饰器`等）来规范开发小程序!以达到一套代码多平台运行。 + +技术栈说明：Typeorm/Nestjs/Angular/Ngrx/JSX/Injector(依赖注入)/Decorator(装饰器)/Webpack/Less/Sass/Gulp... + +

系统架构

+ +面向终端用户对开发者友好的框架 + +

Vue logo

+ +> 用装饰器实现应用跨平台，如Controller装饰器，在前端就是发送http请求，在后端就是响应http请求 +> 主要目标nger-compiler根据平台需求,选择性的去除或修改代码,nger-platform-*提供装饰器解析器。 +> 将ng中的ngIf、ngFor通过编译器，拓展到其他运行环境，如小程序等。 + +

依赖环境

+ +1. [安装nodejs](https://nodejs.org/en/download/) +2. [安装docker](https://www.docker.com/products/docker-desktop) +3. [安装docker-compose](https://docs.docker.com/compose/install/) +4. npm install +5. docker-compose up -d +6. npm start + +## 目录规范 +- [addons 第三方插件目录](./addon) +- [attachment 附件目录](./attachment) +- [config 配置目录](./config) + - [config.json 基础配置](./config/config.json) + - [key.json 作者信息](./config/key.json) +- [data 数据目录,缓存，日志等](./data) +- [src 当前开发目录](./src) + - [inc Controller存放目录](./src/inc) + - [template 模板源码](./src/template) + - [typeorm 数据库相关](./src/typeorm) + - [admin.ts 后台管理入口](./src/admin.ts) + - [app.ts 手机端管理入口](./src/app.ts) + - [server.ts 服务端入口](./src/server.ts) + - [package.json 模块信息](./src/package.json) +- [template 模板打包后存放目录](./template) + +## 开发文档 + +- 核心概念 + - TypeContext 每个用装饰器装饰过得类都会有一个TypeContext,主要作用是查询装饰器参数。 + - NgModuleRef @NgModule装饰器装饰的类的运行时实例，每个NgModule在系统运行时创建 + - ComponentRef @Component装饰的类实例，需要NgModuleRef创建。 + - PipeRef @Pipe装饰的类实例，需要NgModuleRef创建。 + - DirectiveRef @Directive装饰的类实例，需要NgModuleRef创建。 + - PageRef @Page装饰的类实例，需要NgModuleRef创建。 + - ControllerRef @Controller装饰的类实例，需要NgModuleRef创建。 +- 内置周期钩子 + - APP_INITIALIZER 系统初始化时运行，依赖注入还没有注册完毕，可在此时动态插入或替换某注入服务。并自动执行NgModule类中的构建方法。Platform需要注入此类型钩子，才能正常运行。 + - APP_ALLREADY APP_INITIALIZER所有钩子执行完毕后执行。这时依赖注入已准备完毕，所有服务可通过injector的方式获取。这个周期内，不要修改依赖注入服务。 +## 核心思想 +> ng的依赖注入 + +## 开发进度 + +### [nger-cli](./packages/nger-cli) +> 命令行工具 +- [ ] `yarn cli build`构建打包 + - [ ] 手机h5 `yarn cli build h5` + - [ ] pc网站 `yarn cli build pc` + - [ ] 微信公众号 `yarn cli build wechat` + - [ ] 微信小程序 `yarn cli build weapp` + - [ ] 支付宝小程序 `yarn cli build alipay` + - [ ] 百度智能小程序 `yarn cli build swap` + - [ ] 字节跳动小程序 `yarn cli build tt` + - [ ] ios客户端 `yarn cli build ios` + - [ ] android客户端 `yarn cli build android` +- [ ] 初始化 `yarn cli init demo` +- [ ] `yarn cli init`初始化 +- [x] `yarn cli test`单元测试 +- [x] `yarn cli start`启动服务 +- [ ] `yarn cli publish`发布到当前src模块应用商城 + +### [nger-core](./packages/nger-core) +> 核心库 + +- [x] angular装饰器 + - [x] [Component](https://www.angular.cn/api/core/Component) + - [ ] [Directive 不支持](https://www.angular.cn/api/core/Pipe) + - [x] [Pipe](https://www.angular.cn/api/core/Pipe) + - [x] [Injectable](https://www.angular.cn/api/core/NgModule) + - [x] [NgModule](https://www.angular.cn/api/core/NgModule) + - [x] [ContentChild](https://www.angular.cn/api/core/ContentChild) + - [x] [ContentChildren](https://www.angular.cn/api/core/ContentChildren) + - [x] [ViewChild](https://www.angular.cn/api/core/ViewChild) + - [x] [ViewChildren](https://www.angular.cn/api/core/ViewChildren) + - [x] [Input](https://www.angular.cn/api/core/Input) + - [x] [Output](https://www.angular.cn/api/core/Output) + - [x] [HostBinding](https://www.angular.cn/api/core/HostBinding) + - [x] [HostListener](https://www.angular.cn/api/core/HostListener) + - [x] [Host](https://www.angular.cn/api/core/Host) + - [x] [Inject](https://www.angular.cn/api/core/Inject) + - [x] [SkipSelf](https://www.angular.cn/api/core/SkipSelf) + - [x] [Self](https://www.angular.cn/api/core/Self) + - [x] [Optional](https://www.angular.cn/api/core/Optional) + - [x] [Attribute](https://www.angular.cn/api/core/Attribute) +- [x] [typeorm装饰器](https://github.com/typeorm/typeorm/blob/master/README-zh_CN.md) + - [x] entity + - [x] ChildEntity + - [x] Entity + - [x] TableInheritance + - [x] columns + - [x] Column + - [x] CreateDateColumn + - [x] ObjectIdColumn + - [x] PrimaryColumn + - [x] PrimaryGeneratedColumn + - [x] UpdateDateColumn + - [x] VersionColumn + - [x] listeners + - [x] AfterInsert + - [x] AfterLoad + - [x] AfterRemove + - [x] AfterUpdate + - [x] BeforeInsert + - [x] BeforeRemove + - [x] BeforeUpdate + - [x] EventSubscriber + - [x] relations + - [x] JoinColumn + - [x] JoinTable + - [x] ManyToMany + - [x] ManyToOne + - [x] OneToMany + - [x] OneToOne + - [x] RelationCount + - [x] RelationId + - [x] transaction + - [x] Transaction + - [x] TransactionManager + - [x] TransactionRepository + - [x] tree + - [x] Tree + - [x] TreeChildren + - [x] TreeLevelColumn + - [x] TreeParent + - [x] other + - [x] Check + - [x] EntityRepository + - [x] Exclusion + - [x] Generated + - [x] Unique +- [x] nest装饰器 + - [x] `Get` (可选)发送`get`请求 + - [x] `Post` (可选)发送`post`请求 + - [x] `Controller` (可选)Api层，用于后端 +- [x] 其他装饰器 + - [x] `Page` 页面 + - [x] `Command` (可选)命令行 + - [x] `Option` (可选)命令参数 + - [x] `It` (可选)单元测试 +- [x] 生命周期 + - [x] `OnInit` + - [x] `DoCheck` + - [x] `OnDestroy` + - [x] `AfterContentInit` + - [x] `AfterContentChecked` + - [x] `AfterViewInit` + - [x] `AfterViewChecked` + +## 生态 +| 模块及文档连接 | 作用 | +|-------------------------------------------------|----------| +| [nger-module-gulp](./packages/nger-module-gulp) | gulp打包相关 | + +## 任务安排 +> 开发重点 nger-compiler 到 nger-di +> 目标src目录中的文件，编译到各个平台，并运行。 + +- [ ] 扫描项目目录，并记录每个文件导出的有装饰器装饰的类及名称。 +- [ ] 根据运行目标，去掉没有用的或者可以去掉的一些内容，例如`@It`,`@Command`,`@Option`等 +- [ ] `@Component`装饰的类生成对应的`Component(ComponentInstance)` +- [ ] `@Page`装饰的类生成对应的`Page(PageInstance)` +- [ ] 搜集配置信息生成`json`文件 +- [ ] 编译`html`生成`wxml`文件 +- [ ] 编译`scss`/`less`/`styl`生成`wxss`文件 +- [ ] 编译生成`js`文件 + +## TODO + +小程序适配思路 + +其实小程序和ng的适配度还蛮高的！ +- @Component正好和Component对应。不唯一，可以有任意个实例 +- App和NgModule对应。全局唯一 +- @Directive和小程序的指令对应，这里有区别ng中可以自定义指令，小程序不行。不唯一。 +- @Page和小程序的Page对应。全局唯一 + +### Controller +> 客户端运行时需要编译器转码 +```ts +import { Controller, Get, Post } from 'nger-core' +@Controller({ + path: '/' +}) +export class IndexController { + info: any = { + username: 'nger', + age: 28 + } + @Get() + userInfo() { + return this.info; + } + @Post() + setUserInfo(username: string, age: number) { + this.info = { + username, + age + } + } +} +// to +import { Get, Post, Controller } from 'nger-core' +@Controller({ + path: '/' +}) +export class NgerUserController { + @Get() + userInfo: () => Promise; + @Post() + setUserInfo: (username: string, age: number) => Promise; +} +``` + + +### @Page + +// TODO +```ts +@Page({ + path: `pages/index/index`, + template: `` +}) +export class ImsPage{} + +// pages/index/index.js + +// pages/index/index.json + +// pages/index/index.wxss + +// pages/index/index.wxml + +``` + +### @Component + +```ts +// **/ims-demo.ts +import {Component,Input,EventEmitter} from 'nger-core'; + +@Component({ + selector: 'ims-demo', + template: `` +}) +export class ImsDemo { + @Input() + title: string; + + @Output() + bindmyevent: EventEmitter; + + click(e){ + this.bindmyevent.emit(e); + } +} + +// to +// **/ims-demo.js +const instance = new ImsDemo(); +Component({ + behaviors: [], + data: { + instance: instance + }, + properties: { + // Input + title: instance.title + }, + lifetimes: { + created(){ + instance.ngOnInit() + }, + attached() { + instance.onViewInit() + }, + ready(){ + instance.onAfterViewInit() + }, + moved() { + instance.onMoved() + }, + detached() { + instance.onDestory() + }, + error() { + instance.onError() + }, + }, + pageLifetimes: { + show(){ + instance.onShow() + }, + hide(){ + instance.onHide() + }, + resize(){ + instance.onResize() + } + }, + methods: { + click: instance.click + } +}) +// **/ims-demo.json +{} +// **/ims-demo.wxss + +// **/ims-demo.wxml + +``` + +### ngIf + + +```html + + + +``` + +```html +condiction +elseBlock + + +elseBlock +``` + +```html + +thenBlcok +elseBlock + +thenBlcok +elseBlock +``` + +### ngFor + +```html + + + +``` + +## 多平台SDK统一接口 + +```ts + +``` + + +### [nger-platform-test](./packages/nger-platform-test) +> 用于启动测试 + +### [nger-platform-cli](./packages/nger-platform-cli) +> 用于启动cli + +### [nger-platform-express](./packages/nger-platform-express) +> express环境 + +### [nger-platform-koa](./packages/nger-platform-koa) +> express环境 + +### [nger-platform-typeorm](./packages/nger-platform-typeorm) +> typeorm环境 + +### [nger-platform-weapp](./packages/nger-platform-weapp) +> 小程序运行 + +### [nger-di](./packages/nger-di) +> 依赖注入实现 + +### [nger-logger](./packages/nger-logger) +> 带色打印工具 + +- [x] Logger 接口 +- [x] `ConsoleLogger` `Logger`的`console`实现 + + +## 资助 + +

Vue logo

diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index 263112f..6258708 100644 --- a/docs/SUMMARY.md +++ b/docs/SUMMARY.md @@ -1,4 +1,4 @@ -# Summary +# 目录 * [Introduction](README.md) diff --git a/WechatIMG95.jpeg b/docs/WechatIMG95.jpeg similarity index 100% rename from WechatIMG95.jpeg rename to docs/WechatIMG95.jpeg diff --git a/logo.png b/docs/logo.png similarity index 100% rename from logo.png rename to docs/logo.png diff --git a/nested-ng-template-lexical-binding-angular7.png b/docs/nested-ng-template-lexical-binding-angular7.png similarity index 100% rename from nested-ng-template-lexical-binding-angular7.png rename to docs/nested-ng-template-lexical-binding-angular7.png diff --git "a/nger\347\263\273\347\273\237\346\246\202\350\277\260.png" "b/docs/nger\347\263\273\347\273\237\346\246\202\350\277\260.png" similarity index 100% rename from "nger\347\263\273\347\273\237\346\246\202\350\277\260.png" rename to "docs/nger\347\263\273\347\273\237\346\246\202\350\277\260.png" diff --git a/readme.md b/readme.md index a7928ff..0febb6d 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,4 @@ -

Vue logo

+

Vue logo

用ng自由组合开发小程序

@@ -16,7 +16,7 @@ vue、react相继都有了小程序的开发框架，作为一个nger，也该 面向终端用户对开发者友好的框架 -

Vue logo

+

Vue logo

> 用装饰器实现应用跨平台，如Controller装饰器，在前端就是发送http请求，在后端就是响应http请求 > 主要目标nger-compiler根据平台需求,选择性的去除或修改代码,nger-platform-*提供装饰器解析器。 @@ -405,4 +405,4 @@ Component({ ## 资助 -

Vue logo

+

Vue logo