小程序学习02

不存在十全十美的文章 如同不存在彻头彻尾的绝望

目录

小程序的双线程模型

界面渲染过程 – wxml和DOM树

 界面渲染过程– 初始化渲染

 界面渲染过程 – 数据发生变化

 界面渲染的整体流程

小程序的启动流程

注册小程序 – 参数解析

 注册App时

小程序的打开场景

如何确定场景?

获取用户信息 – 保存全局变量

保存全局变量：

 注册小程序 - 代码演示

 注册页面

 注册一个Page页面

 Page实例生命周期

---

小程序的双线程模型

谁是小程序的宿主环境呢？微信客户端

宿主环境为了执行小程序的各种文件：wxml文件、 wxss文件、js文件

提供了小程序的双线程模型

双线程模型：

• WXML模块和WXSS样式运行于 渲染层，渲染层使 用WebView线程渲染（一个程序有多个页面，会使 用多个WebView的线程）。
• JS脚本（app.js/home.js等）运行于 逻辑层，逻辑 层使用JsCore运行JS脚本
• 这两个线程都会经由微信客户端（Native）进行中转 交互。

界面渲染过程 – wxml和DOM树

wxml等价于一棵DOM树，也可以使用一个JS对象来模拟（虚拟DOM）

 界面渲染过程– 初始化渲染

 

 界面渲染过程 – 数据发生变化

通过setData把msg数据从“Hello World”变 成“Goodbye”

• 产生的JS对象对应的节点就会发生变化
• 此时可以对比前后两个JS对象得到变化的 部分
• 然后把这个差异应用到原来的Dom树上
• 从而达到更新UI的目的，这就是“数据驱 动”的原理

 界面渲染的整体流程

1. 在渲染层，宿主环境会把WXML转化成对应的JS对象；
2. 将JS对象再次转成真实DOM树，交由渲染层线程渲染；
3. 数据变化时，逻辑层提供最新的变化数据，JS对象发生变化比较进行diff算法对比；
4. 将最新变化的内容反映到真实的DOM树中，更新UI；

小程序的启动流程

注册小程序 – 参数解析

• 在注册时, 可以绑定对应的生命周期函数, 在生命周期函数中, 执行对应的代码.
•  https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

 注册App时

1. 判断小程序的进入场景
2.  监听生命周期函数，在生命周期中执行对应的业务逻辑，比如在某个生命周期函数中获取微信用户的信息。
3. 因为App()实例只有一个，并且是全局共享的（单例对象），所以我们可以将一些共享数据放在这里。

小程序的打开场景

• 常见的打开场景：群聊会话中打开、小程序列表中打开、微信扫一扫打开、另一个小程序打开
• https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

如何确定场景?

• 在onLaunch和onShow生命周期回调函数中,会有options参数，其中有scene值

获取用户信息 – 保存全局变量

1. wx.getUserInfo – 即将废弃的接口；
2. button组件 – 将open-type改成getUserInfo，并且绑定bindgetuserinfo事件去获取；
3. 使用open-data组件展示用户信息；

保存全局变量：

 注册小程序 - 代码演示

 

 

 

 注册页面

 小程序中的每个页面, 都有一个对应的js文件, 其中调用Page方法注册页面示例

• 在注册时, 可以绑定初始化数据、生命周期回调、事件处理函数等。
• https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

 注册一个Page页面

1. 在生命周期函数中发送网络请求，从服务器获取数据；
2. 初始化一些数据，以方便被wxml引用展示；
3. 监听wxml中的事件，绑定对应的事件函数；
4. 其他一些监听（比如页面滚动、上拉刷新、下拉加载更多等）；

 Page实例生命周期