微信小程序开发深入解释

以下是开发文档和个人开发经验的组合，以解释微信小程序的关键部分（不是入门教程，具体入门读者可以看到官方网站），希望读者对微信小程序有一般的了解或启发。

本文与个人博客www.imhjm.com/article/597 .

同步

官方发展文件mp.weixin.qq.com/debug/wxado .

官方开发者社区开发者.weixin.qq.com/

运行环境

微信小程序在三端运行：用于调试的iOS，Android和开发人员工具。

三端脚本执行环境和用于呈现非本机组件的环境是不同的：

在iOS上，小程序的javascript代码在JavaScriptCore中运行，由WKWebView呈现。 Android环境中有iOS8，iOS9，iOS10，X5 JSCore解析了小程序 javascript代码，X5基于Mobile Chrome 53.在开发工具上呈现内核，小程序 javascript代码在nwjs中运行，由Chrome Webview呈现

参考：mp.weixin.qq.com/debug/wxado .

由于脚本执行环境不同，实际机器和开发人员工具的一些性能差异很大，特别是在本机组件方面（一些原始组件将在后面提到），iOS和Android都需要进行测试以确保该程序没有问题。

同时，因为它是在JsCore中执行的，所以JsCore没有窗口对象，所以没有窗口，文档等（这么多外部生态插件/库不能直接使用，需要稍微修改）

生命周期

小程序全局具有App，Page内置全局变量，用于注册小程序和注册页面

App实例生命周期onLaunch 监听小程序初始化，当小程序初始化完成时，会触发 onLaunch（全局只触发一次）onShow 监听小程序显示 当小程序汇海，或从后台进入前台显示，会触发 onShowonHide 监听小程序隐藏 当小程序从前台进入后台，会触发 onHide

前台和后台定义：当用户点击左上角关闭，或按设备Home键离开微信时，小程序不会直接破坏，而是进入后台;当它再次进入微信或再次打开小程序时，它将从后台进入前台。需要注意的是，只有当小程序进入后台一段时间，或者系统资源占用过高时，才会被破坏。

Page实例生命周期

具体读者可以在文档中看到“页面实例生命周期”，左侧是视图线程，右侧是逻辑层线程

您可以看到View Thread分为四个阶段

StartInitedReadyEnd

AppSevice Thread也分为四个阶段

StartCreatedActive（Alive）结束

我们可以简单地从图中分析“页面实例生命周期”

查看Thread和AppSevice Thread进入StartAppSevice Thread调用Page方法传递配置Created，调用onLoad（监听页面加载）和onShow（监听页面显示）方法，AppSevice Thread等待View Thread通知View Thread进入初始化阶段（Inited） ，Notify AppSevice Thread已初始化，然后AppSevice Thread传递给App实例中的初始化数据。 AppSevice Thread等待View Thread的下一个通知。 View Thread收到初始化数据后，第一个渲染页面（First Render）进入Ready阶段，渲染后通知AppSevice Thread，AppSevice Thread调用onReady方法，进入Active阶段。在AppSevice Thread Active阶段，调用一些setData方法，即将数据传递给View Thread中的渲染器（Rerender）以进行视图更新。当小程序切换到后台或当前的Page跳转（具体来说，路由部分或文档稍后）调用onHide方法时，进入Alive阶段，然后切换回前台调用onShow进入Active阶段，最后进入Page destroy，调用onUnload方法，页面卸载

通过对上述声明期的分析，我们可以得出以下结论：

onLoad只被调用一次，onShow页面显示第一个调用是First Render是传递给Page for Render的数据数据，onLoad阶段的setData实际上被发送到Active阶段以发送视图更新（即，在OnReady之后，如果onLoad阶段的setData与初始数据不同。可以看到页面闪烁

页面实例生命周期

数据驱动（响应的数据绑定）

从生命周期中也可以看出，微信小程序类似于vue和其他框架，它们是数据驱动的视图更新，修改逻辑层中的数据，以及查看层响应数据更新

双括号绑定数据 {{ message }} Page({ data: { message: 'Hello MINA!' }})

使用上面的双括号将数据绑定到视图

数据单向流动

微信小程序也是一个单向数据流，而不是双向绑定，比如你传入其基本组件的一些数据，不能同步到你的数据，而是调用一些监听器函数来获取（如滚动视图）滚动顶部，您可以通过视图传递数据更新滚动位置，但滚动时，您无法在两个方向上绑定到滚动顶部，但您需要侦听bindscroll才能获得它）

条件渲染&&列表渲染

条件渲染和列表渲染是数据驱动视图的重要组成部分，值得APP软件

一提到

1.条件渲染wx: if和hidden

Wx:如果会产生局部渲染，破坏条件块（或重新渲染）隐藏就是直接控制显示块/无

所以官方网站给出的结论是

通常，wx:如果具有更高的切换功耗并且隐藏具有更高的初始渲染成本。因此，如果需要频繁切换，使用hidden更好，如果条件不太可能在运行时更改，那么wx:如果更好。

2.列出渲染

{{idx}}: {{itemName.message}}