用angular开发小程序

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

目录规范

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

开发进度

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
• 新增装饰器
  • Page 页面
  • Command (可选)命令行
  • Option (可选)命令参数
  • It (可选)单元测试
  • Get (可选)发送get请求
  • Post (可选)发送post请求
  • Controller (可选)Api层，用于后端
• 生命周期
  • OnInit
  • DoCheck
  • OnDestroy
  • AfterContentInit
  • AfterContentChecked
  • AfterViewInit
  • AfterViewChecked

任务安排

开发重点 nger-compiler 到 nger-di 目标src目录中的文件，编译到各个平台，并运行。

• 扫描项目目录，并记录每个文件导出的有装饰器装饰的类及名称。
• 根据运行目标，去掉没有用的或者可以去掉的一些内容，例如@It,@Command,@Option等
• @Component装饰的类生成对应的Component(ComponentInstance)
• @Page装饰的类生成对应的Page(PageInstance)
• 搜集配置信息生成json文件
• 编译html生成wxml文件
• 编译scss/less/styl生成wxss文件
• 编译生成js文件

@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实现