基礎描述

微信小程序分為app 實例和page實例 
分別通過 app() page() 調用。 
組成：

• 一個app , 有 json js wxss文件組成。
• 多個page, 有 js wxml wxss json 組成。

數據流

小程序 分為邏輯層和視圖層。 邏輯層用來處理數據和方面。 視圖層用來做展現。 邏輯層用setData來更新視圖層。 視圖層通過事件來驅動邏輯層。

頁面生命周期 vs app生命周期

頁面的生命周期

 * onload : 頁面加載  只調用一次
* onReady: 頁面初次渲染完成。
* onshow  頁面顯示，每次打開頁面都會調用
* onHide:  頁面隱藏，當navigateTo或底部tab切換時調用
* onUnload: 頁面卸載。 頁面出棧

server端剛開始時 先加載頁面，然后調用onshow 服務端等待。 前端發來通知我要數據，發送數據給前端頁面渲染。 渲染完成。前端發來通知 ，我好了。 server端把狀態改為onReady狀態。這時候可以通過setData來修改前端頁面了。

路由

小程序維護了一個頁面棧，類似于瀏覽器的location push 棧。

• 當初始化新app時，第一個頁面 onload onshow 然后入棧。
• to到一個新頁面，只有新頁面打開（onload onshow）
• 重定向， 舊的頁面出來，新的頁面進去。 舊(onHide) 新 （onload onshow）
• 返回， 就的頁面出來，新的頁面展示。舊（onHide）新（onshow）
• tab切換。 所有頁面出棧，

項目架構

根據前面的描述，微信只希望有一個app， 然后下面有很多page這樣的結構，然后將這個文件傳到微信端，發布。

但是我們開發的時候，

• 對于不能用組件化復用的 ？
• 數據難管理的 ？
• 不能用npm 第三方庫的 ？
• es6 呢？
• 不能用scss,
• 模塊化？
• 生產環境和開發環境不一致的問題？

分析其他人的項目

1 組件化– wepy

特性

• 支持 vue開發
• 支持自定義組件
• 支持 npm
• 支持 es6 
  ….

對所有東西都重新封裝了一遍。 
寫了很多方法，將依次對各個方法進行分析下

構建

wepy-cli 是wepy的構建工具。 通過babel編譯的，命令行。

github地址：https://github.com/hxw319726/wepy-cli

分析

wepy.js
// 腳手架的入口，主要做了這幾件事
// 生成一個目錄，下面拼了package.json ，
// 將template的文件拷貝到當前文件。
// 然后, 用command 定義了很多命令。

compile.js
// 編譯文件的入口
// 針對各個文件類型，有各種文件的 編譯器。

compile-wpy.js
// 編譯wpy文件 包含 app, page, component
// 將 wpy文件，解析成 ret={style: {}, template:{}, script:{}}
// 然后依次對各個模塊調用不同的編譯器。

compile-script.js
//

compile-style.js
// 獲取對應的compiler 主要是
// 然后依次對各個模塊調用不同的編譯器。
// 比如下面文件。wepy-compiler-less 
// 如果有component 將component 的css import進來

// wepy-compiler-less 文件
// 引用 less 然后用less對sass文件進行render一遍，輸出promise
import less from 'less';
import path from 'path';

export default function (content, config, file) {
return new Promise ((resolve, reject) => {
let opath = path.parse(file);
        config.paths = [opath.dir];

        less.render(content, config).then(res => {
            resolve(res.css);
        }).catch(reject);
    });
};

compile-template.js
//
// 然后依次對各個模塊調用不同的編譯器。

然后你就可用做以下事情了

• 你可以用這個腳手架創建一個項目目錄。包含了預加載的所有包。
• 你可以用vue的風格寫代碼了。 會將一個wpy文件拆開分別用編譯器進行編譯。
• 你可以用sass寫樣式了， less sass都經過less編譯過了
• 你可以用es6了，因為js都被babel編譯過了
• 你可以用組件化了。會將組建的內容插入。。
• 支持加載外部NPM包。 在編譯過程中會將require， 從node_modules當中拷貝出來

包裝小程序代碼分析

組要也就幾個文件。 當我們創建page的時候需要

            class A extend Page{}
class B extend Component{} 
class C extend APP{}

這些都是在wepy的包里面實現的。

• app.js 是實現了請求并發，并將除了事件之外的api都封裝了一層promise
• event.js 通過active字段判斷是否活躍
• base.js : 定義了createApp 和 createPage兩個方法。 createPage方法
  • 創建了一個page 實例
  • 在config 中是重新實現了onload onshow方法。
  • 將config的方法 和 page實例進行事件綁定。
• page.js

2 redux

將redux重新寫了一遍，然后引入到了微信中。