基礎(chǔ)描述

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

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

數(shù)據(jù)流

小程序 分為邏輯層和視圖層。 邏輯層用來處理數(shù)據(jù)和方面。 視圖層用來做展現(xiàn)。 邏輯層用setData來更新視圖層。 視圖層通過事件來驅(qū)動邏輯層。

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

頁面的生命周期

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

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

路由

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

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

項目架構(gòu)

根據(jù)前面的描述，微信只希望有一個app， 然后下面有很多page這樣的結(jié)構(gòu)，然后將這個文件傳到微信端，發(fā)布。

但是我們開發(fā)的時候，

• 對于不能用組件化復(fù)用的 ？
• 數(shù)據(jù)難管理的 ？
• 不能用npm 第三方庫的 ？
• es6 呢？
• 不能用scss,
• 模塊化？
• 生產(chǎn)環(huán)境和開發(fā)環(huán)境不一致的問題？

分析其他人的項目

1 組件化– wepy

特性

• 支持 vue開發(fā)
• 支持自定義組件
• 支持 npm
• 支持 es6 
  ….

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

構(gòu)建

wepy-cli 是wepy的構(gòu)建工具。 通過babel編譯的，命令行。

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

分析

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

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

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

compile-script.js
//

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

// wepy-compiler-less 文件
// 引用 less 然后用less對sass文件進(jìn)行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
//
// 然后依次對各個模塊調(diào)用不同的編譯器。

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

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

包裝小程序代碼分析

組要也就幾個文件。 當(dāng)我們創(chuàng)建page的時候需要

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

這些都是在wepy的包里面實現(xiàn)的。

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

2 redux

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