258资源分享网

微信小程序分为app 实例和page实例 
分别通过 app() page() 调用。 
组成：

一个app , 有 json js wxss文件组成。

多个page, 有 js wxml wxss json 组成。

小程序 分为逻辑层和视图层。 逻辑层用来处理数据和方面。 视图层用来做展现。 逻辑层用setData来更新视图层。 视图层通过事件来驱动逻辑层。

页面的生命周期

* 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,

模块化？

生产环境和开发环境不一致的问题？

分析其他人的项目

支持 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

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