用ng自由组合开发小程序

项目名称意义，用ng的人！I am a nger!

Warning! Warning! Warning! 这不仅仅是一个前端项目。

vue、react相继都有了小程序的开发框架，作为一个nger，也该为社区做点事情了! 很遗憾，由于ng和小程序的差异性，我们暂时没打算直接把ng项目转换成小程序，而是用ng的一套思想（依赖注入、装饰器等）来规范开发小程序!以达到一套代码多平台运行。

设计总纲

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

依赖环境

1. 安装nodejs
2. 安装docker
3. 安装docker-compose
4. npm install
5. docker-compose up -d
6. npm run cli start koa

目录规范

• addons 第三方插件目录
• attachment 附件目录
• config 配置目录
  • config.json 基础配置
  • key.json 作者信息
• data 数据目录,缓存，日志等
• src 当前开发目录
  • inc Controller存放目录
  • template 模板源码
  • typeorm 数据库相关
  • admin.ts 后台管理入口
  • app.ts 手机端管理入口
  • server.ts 服务端入口
  • package.json 模块信息
• template 模板打包后存放目录

开发文档

命名规则

• **PropertyAst是属性装饰器节点,对应的有is**PropertyAst方法
• **ClassAst是类装饰器节点,对应的有is**ClassAst方法
• **MethodAst是方法装饰器节点,对应的有is**MethodAst方法
• **ControllerAst是构造装饰器节点,对应的有is**ControllerAst方法
• **Parameter是方法参数装饰器节点,对应的有is**ParameterAst方法

核心思想

ng的依赖注入

开发进度

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初始化
• yarn cli test单元测试
• yarn cli start启动服务
• yarn cli publish发布到当前src模块应用商城

nger-core

核心库

• angular装饰器
  • Component
  • Directive 不支持
  • Pipe
  • Injectable
  • NgModule
  • ContentChild
  • ContentChildren
  • ViewChild
  • ViewChildren
  • Input
  • Output
  • HostBinding
  • HostListener
  • Host
  • Inject
  • SkipSelf
  • Self
  • Optional
  • Attribute
• typeorm装饰器
  • entity
    • ChildEntity
    • Entity
    • TableInheritance
  • columns
    • Column
    • CreateDateColumn
    • ObjectIdColumn
    • PrimaryColumn
    • PrimaryGeneratedColumn
    • UpdateDateColumn
    • VersionColumn
  • listeners
    • AfterInsert
    • AfterLoad
    • AfterRemove
    • AfterUpdate
    • BeforeInsert
    • BeforeRemove
    • BeforeUpdate
    • EventSubscriber
  • relations
    • JoinColumn
    • JoinTable
    • ManyToMany
    • ManyToOne
    • OneToMany
    • OneToOne
    • RelationCount
    • RelationId
  • transaction
    • Transaction
    • TransactionManager
    • TransactionRepository
  • tree
    • Tree
    • TreeChildren
    • TreeLevelColumn
    • TreeParent
  • other
    • Check
    • EntityRepository
    • Exclusion
    • Generated
    • Unique
• nest装饰器
  • Get (可选)发送get请求
  • Post (可选)发送post请求
  • Controller (可选)Api层，用于后端
• 其他装饰器
  • Page 页面
  • Command (可选)命令行
  • Option (可选)命令参数
  • It (可选)单元测试
• 生命周期
  • OnInit
  • DoCheck
  • OnDestroy
  • AfterContentInit
  • AfterContentChecked
  • AfterViewInit
  • AfterViewChecked

生态

模块及文档连接	作用
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

Controller

客户端运行时需要编译器转码

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<any>;
    @Post()
    setUserInfo: (username: string, age: number) => Promise<any>;
}

@Page

// TODO

@Page({
    path: `pages/index/index`,
    template: `<view></view>`
})
export class ImsPage{}

// pages/index/index.js

// pages/index/index.json

// pages/index/index.wxss

// pages/index/index.wxml

@Component

// **/ims-demo.ts
import {Component,Input,EventEmitter} from 'nger-core';

@Component({
    selector: 'ims-demo',
    template: `<view (onTap)="click"></view>`
})
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
<view onTap="click"></view>

ngIf

<ng-template [ngIf]="condiction"></ng-template>
<!-- to -->
<ng-template wx:if="{{condiction}}"></ng-template>

<ng-template [ngIf]="condiction" [ngIfELse]="elseBlock">condiction</ng-template>
<ng-template #elseBlock>elseBlock</ng-template>
<!-- to -->
<ng-template wx:if="{{condiction}}"></ng-template>
<ng-template wx:else>elseBlock</ng-template>

<ng-template [ngIf]="condiction" [ngIfThen]="thenBlcok" [ngIfELse]="elseBlock"></ng-template>
<ng-template #thenBlcok>thenBlcok</ng-template>
<ng-template #elseBlock>elseBlock</ng-template>
<!-- to -->
<ng-template wx:if="{{condiction}}">thenBlcok</ng-template>
<ng-template wx:else>elseBlock</ng-template>

ngFor

<ng-template ngFor let-item="it" let-i="index" [ngForOf]="items"></ng-template>
<!-- to -->
<ng-template wx:for="items" wx:for-item="it" wx:for-index="i"></ng-template>

多平台SDK统一接口

nger-platform-test

用于启动测试

nger-platform-cli

用于启动cli

nger-platform-express

express环境

nger-platform-koa

express环境

nger-platform-typeorm

typeorm环境

nger-platform-weapp

小程序运行

nger-di

依赖注入实现

nger-logger

带色打印工具

• Logger 接口
• ConsoleLogger Logger的console实现