0.0.2 • Published 3 years ago

@mini-architecture/utils v0.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

mini-architecture

a full mini app architecture

Packages

  • android a project for user terminals, provides Javascript runtime

  • framework a lower-layer framework for mini apps

  • pack a tool for packing user mini-app project and framework

  • mini an example of mini-app

  • cli 🔥mini-architecture cli

  • devtools 🔥 a tool for developing, like weixin devtools

  • utils ma project utils

Start

1. required environment

  1. Node, Yarn

  2. Java

  3. Android, you can also download from Android Studio

  4. ADB

  5. Chrome when using devtools

2. 🔥quick start

  1. yarn global add @mini-architecture/cli

  2. ma-cli pack -e @mini -w

before you run, don't forget to connect mobile to you computer. It may be slow for the first time while you running

find more at @mini-architecture/cli

3. example

// index.html
<view>
  <button bindtap="bindEvent" class="btn">click me</button>
  <view class="{{bindCls}}">bind-data: {{hello}}</view>
  <button bindtap="goNext">go next page</button>
</view>

// index.js
Page({
  data: {
    hello: 'hello world',
    bindCls: 'view',
  },
  bindEvent() {
    this.setData({ hello: 'hello again' })
  },
  goNext() {
    ma.navigateTo({
      url: 'pages/demo/index',
      success() {},
    })
  },
})

find more at @mini-architecture/framework

4. dev

  1. clone
  • git clone git@github.com:lawler61/mini-architecture.git && cd mini-architecture
  1. install dependences
  • yarn

do not use lerna bootstrap cause the dependences are managed by yarn workspace

  1. develop
  • pack: yarn dev:pack

  • devtools client: yarn dev:dt:client

  • devtools launcher: yarn dev:dt:launch

  • cli: yarn dev:cli

  1. add dependence
  • for workspace: yarn add <dependence> -D -W

  • for a package: yarn lerna add <dependence> --scope <package>

5. quick install

install form built apk

Testing env

  1. OS: Mac

  2. Mobile: 小米10(android 10)

Blog post

mini-architecture:从零手撸一整套小程序架构

Records

TODO

  • build logs

  • package publish 改造

  • package dev & cli 调用

  • cli

  • devtools

  • custom devtools front end

  • other page api in android

  • worker service in devtools

  • maybe custom components

  • v8 thread worker

  • v8 thread debug tool with Android

  • all view page build in one html

References

  1. hera

  2. hera-cli

  3. EMP — 基于 Vue.js 的小程序引擎底层框架实现

  4. Polymer

  5. 深入理解 Chrome DevTools

  6. Chrome DevTools Frontend 运行原理浅析

  7. Getting Started with Headless Chrome

  8. Chrome DevTools Protocol