基礎(chǔ)描述

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

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

數(shù)據(jù)流

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

頁(yè)面生命周期 vs app生命周期

頁(yè)面的生命周期

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

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

路由

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

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

項(xiàng)目架構(gòu)

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

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

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

分析其他人的項(xiàng)目

1 組件化– wepy

特性

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

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

構(gòu)建

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

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

分析

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

compile.js
// 編譯文件的入口
// 針對(duì)各個(gè)文件類型，有各種文件的 編譯器。

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

compile-script.js
//

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

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

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

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

包裝小程序代碼分析

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

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

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

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

2 redux

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