基础描述
微信小程序分为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,
- 模块化？
- 生产环境和开发环境不一致的问题？
wzf ?分析其他人的项目
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-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重新写了一遍，然后引入到了微信中。
