1. 项目结构

1.1. 基本结构
    逻辑层和视图层
    Meow
    ├── app.json
    ├── app.js
    ├── app.wxss
    ├── images
    │   └── tab
    │       ├── tab_article_normal.png
    │       ├── tab_article_selected.png
    │       ├── tab_picture_normal.png
    │       ├── tab_picture_selected.png
    │       ├── tab_sound_normal.png
    │       ├── tab_sound_selected.png
    │       ├── tab_translate_normal.png
    │       └── tab_translate_selected.png
    ├── pages
    │   ├── index
    │   │   ├── index.json
    │   │   ├── index.js
    │   │   ├── index.wxml
    │   │   └── index.wxss
    │   └── logs
    │       ├── logs.json
    │       ├── logs.js
    │       ├── logs.wxml
    │       └── logs.wxss
    ├── utils
    │   └── util.js
    ├── project.config.json
    └── weui.wxss

1.2. app.json
    {
        "pages": [],
        "window": {},
        "tabBar": {},
        "networkTimeout": {},
        "debug": false
    }

1.3. app.js
    App({
        onLaunch: function() {

        },
        onShow: function() {
    
        },
        onHide: function() {
    
        },
        globalFunction: function() {
    
        },
        globalData: ''
    });

1.4. index.json
    {
        "navigationBarBackgroundColor": "#000000",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "index",
        "backgroundColor": "#fefefe",
        "backgroundTextStyle": "light",
        "enablePullDownRefresh": false
    }

1.5. index.js
    /*获取 app 实例*/
    const app = getApp();
    Page({
        data: {

        },
        onLoad: function() {
    
        },
        onShow: function() {
    
        },
        onReady: function() {
    
        },
        onHide: function() {
    
        },
        onUnload: function() {
    
        },
        onPullDownRefresh: function() {
    
        },
        onReachBottom: function() {
    
        },
        customFunction: function() {
    
        },
        customData: {
    
        }
    });
    /*获取页面栈*/
    const pages = getCurrentPages();

1.6. WXML
    数据绑定/条件渲染/列表渲染/模板/事件
    数据绑定：{{content}}
    条件渲染：wx:if
    列表渲染：wx:for
    模板：template 
        import/include
    事件：冒泡事件和非冒泡事件
        事件绑定(key(bind/catch)value(事件名))
        bind/catch
        touchstart
        touchmove
        touchend
        touchcancel
        BaseEvent
        CustomEvent
        TouchEvent

1.7. WXSS
    尺寸单位：rpx rem 750rpx 20rem iPhone6

2. 框架机理

2.1. ViewThread和AppServiceThread

2.2. 数据绑定和事件响应
    /*数据绑定*/
    <view>{{content}}</view>
    Page.prototype.setData({}); // this.data
    /*事件响应*/
    <view bindtap="myevent">点击执行逻辑层事件</view>
    Page({
        myevent: function() {
            console.log("点击了view");
        }
    });

2.3. JavaScript 1995 Brendan Eich 

2.4. 模块化
    命名冲突和文件依赖
    exports暴露接口，exports是module.exports的一个引用
    require(path)引入依赖

3. 界面布局

3.1. 传统布局
    a. 概念
        CSS: 外部样式表（<link/>）/内部样式表（<style/>）/内联样式表（style） + 标签名/.class/#id + selector {property: value;}
        标准文档流：从左到右，一点一点；从上到下，独占一行。
    b. 模型
        (top/right/bottom/left)-margin + border + padding + content-(width/height)
    c. display
        display: block;
        display: inline;
        display: inline-block;
    d. float
        float: left|right|none|inherit;
        clear: left|right|none|inherit|both;
    e. position
        position: static; /*default*/
        position: fixed; /*window*/
        position: relative; /*self*/
        position: absolute; /*parent/html*/

3.2. 弹性布局
    a. 概念
        display: flex;
        display: inline-flex;
        display: -webkit-flex; /*Safari*/
        float/clear/vertical-align /*unavailable*/
    b. 模型
        flex container-(main axis/main start/main end/cross axis/cross start/cross end)
        +
        flex item-(main size/cross size)
    c. flex container
        flex-direction: row;
        flex-wrap: nowrap;
        flex-flow: row nowrap;
        justify-content: flext-start;
        align-items: stretch;
        align-content: stretch;
    d. flex item
        order: 0;
        flex-grow: 0;
        flex-shrink: 1;
        flex-basic: auto;
        flex: 0 1 auto;
        align-self: auto;