微信小程序：渲染流程、生命周期和触发顺序

小程序的生命周期分为 应用生命周期 、 页面生命周期

App() 必须在 app.js 中调用，必须调用且 只能调用一次 ，app.js中定义了一些应用的生命周期函数

（1）onLaunch: 初始化小程序时触发，全局只触发一次

（2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发

（3）onHide: 用户从前台切换到后台隐藏时触发

（4）onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

后台：点击左上角关闭，或者按了设备 Home 键离开微信，并没有直接销毁，而是进入后台

前台：再次进入微信或再次打开小程序，相当于从后台进入前台。

官方介绍 https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

js文件中定义了一些页面生命周期函数，下面简述下这些生命周期函数的方法作用

（1）onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

（2）onShow：加载完成后、后台切到前台或重新进入页面时触发

（3）onReady：页面首次渲染完成时触发

（4）onHide：从前台切到后台或进入其他页面触发

（5）onUnload：页面卸载时触发

官方介绍 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

通过console.log验证它们的触发顺序

以上是对生命周期粗略的认识，如有不足请指正~

参考链接 https://www.jianshu.com/p/2e48f2468d5f

微信小程序近期可谓是动作频出，仅最近新增的能力就有：

种种迹象表明，微信对小程序的期望值是很大，所以在它推出的几个月效果没到达预期的情况下，之前的很多『克制』也就逐渐变成『放肆』了 —— 不过不管小程序以后的发展到底怎样，对我们开发者来发，多了解一些总是没有坏处的。

他山之石，可以攻玉。

对于是技术人来说，多了解一些不同的技术、不同的开发模式、不同的架构思想，提高技术『广度』，对于自己的成长是十分必要的。

所以，本文就是从一个 Android 开发者的角度，从项目工程方便切入，来分析一下『微信小程序』跟『Android App』开发上的一些异同。

『微信小程序』开发是一个相对较新的技术，希望通过本文，能让你对它多一些了解。

因为内容是从Android开发的角度来谈的，所以我假设你已经对 Android 开发比较熟悉了。并且对微信小程序的开发也比较感兴趣，如果要是再能有些 javascript、css 的基础的话那就更好了！

Android 开发我们已经比较熟悉——

作为对比，进行微信小程序开发所用的语言是这些——

wxml (WeiXin Markup Language) 基本约等于是 xml。微信之所以没有直接使用 xml ，可能是为了以后扩展方便一些（野心很大）。

同理， wxss (WeiXin Style Sheets) 基本约等于是 css。也是微信扩展了一些功能，比如统一的尺寸单位 rpx 。

对于 Android 来说，对于页面的描述基本上在 xml 中定义的，比如：

这是一个简单的典型的示例，这个文件就是描述了两部分内容：

some.wxss:

很明显可以看出：wxml 是负责了 页面结构 的展示；而 wxss 则负责了对 页面样式 的定义。

这种把结构和样式分离的做法，其实是延续了网页开发中的习惯（html + css）。

这样做的好处起码有两个：

——看起来还是挺简单的结构:

这三个文件用以描述小程序 app 相关的内容，他们的命名是固定这样的，位置也固定是在根目录下。

app.js 基本相当于 Android 中的 Application 类，文件中主要是有一个 App() 函数，来进行小程序的初始化 *** 作。

app.json 的作用跟 Android 中的 AndroidMainifest.xml 文件很相似 —— 都是静态化的配置文件。

app.wxss 定义全局的样式 —— 其定义的样式会作用于每个页面。比如在 app.wxss 中加入：

就可以给所有的 text 控件添加 5px 的 padding 。

当然，页面本身的 xxPage.wxss 可以定义局部样式来覆盖全局样式。

根目录下的 utils 文件夹中有一个 util.js 文件，这个故名思意，是类似于 Java 中的一些工具类的存在。

utils 文件夹其实是一个非必须的结构，而它之所以出现在官方的 HelloWorld 工程中，是作为一个代表，表明了开发者在这里是可以自定义新的文件夹和结构的。微信小程序作为一个使用 js 来开发的平台，是可以使用许多第三方的 js 库的，对于这些第三方库，以及其他的图片资源等，都可以放到自定义的文件夹中。

pages 文件夹下包含两个子目录：index 和 logs ，两个目录的结构都是基本一样的，都是包含四个相同主名称的文件： xx.js、xx.wxml、xx.json、xx.wxss 这几个文件。

这样的一个典型结构表明它是一个小程序的页面，四个文件的作用分别是：

在视图的动态显示上，微信小程序使用了 数据绑定（data-binding） 的方式。

如果你之前使用过 AngularJS 或者 Vue.js 等这些流行的 js 框架，那么你肯定对 数据绑定 并不陌生。它是一种把一个控件的属性绑定到某个数据对象（view-model）的属性的方法，这样在改变数据对象属性的时候，所对应的控件属性也就会相应变化 —— 在开发中，这种方式会使得对 View 层的显示控制变得十分简单、自然。

基于此，软件工程的流行架构方式也在之前的 MVC 、 MVP 之外，又多了一个 —— MVVM（Model-View-ViewModel） 。

数据绑定 这种方式现在是如此的流行，以致于 Android 官方都出了一个 [Data Binding Library] ( https://developer.android.com/topic/libraries/data-binding/index.html ) 来支持数据绑定，但是由于成熟度等原因，目前还并没有成为主流，Android 中的主流视图显示方式，还是通过开发者手动给每个控件 set 数据。

—— 单从这一点上看，微信小程序的开发模式是比原生 Andorid 要『先进』一些的~