基础描述

微信小程序分为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重新写了一遍，然后引入到了微信中。