微信小程序系列2——小程序页面渲染和逻辑的关系
前言
小程序是基于双线程模型的,在这个模型中,小程序的逻辑层与渲染层分开在不同的线程运行,这跟传统的Web 单线程模型有很大的不同,使得小程序架构上多了一些复杂度,也多了一些限制,同时具备渲染快、加载快等优点。
小程序的运行环境分成渲染层和逻辑层,而WXML模板和WXSS样式工作在渲染层,JS脚本工作在逻辑层,小程序的渲染层和逻辑层分离。
一、渲染一个"Hello World"页面
WXML模板使用 view 标签,其子节点用 {{ }} 的语法绑定一个 msg 的变量
<view>{{ msg }}</view>
在 JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World”
Page({onLoad: function () {this.setData({ msg: 'Hello World' })}
})
从这个例子我们可以看到3个点:
1.渲染层和数据相关。
2.逻辑层负责产生、处理数据。
3.逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。
二、通信模型
小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型如图:
三、数据驱动
在开发UI界面过程中,程序需要维护很多变量状态,同时要操作对应的UI元素。随着界面越来越复杂,我们需要维护很多变量状态,同时要处理很多界面上的交互事件,整个程序变得越来越复杂。通常界面视图和变量状态是相关联的,如果有某种“方法”可以让状态和视图绑定在一起(状态变更时,视图也能自动变更),那我们就可以省去手动修改视图的工作。
这个方法就是“数据驱动”,下边我们来介绍一下小程序的数据驱动基本原理。
WXML结构实际上等价于一棵Dom树,通过一个JS对象也可以来表达Dom树的结构:
WXML可以先转成JS对象,然后再渲染出真正的Dom树,回到“Hello World”那个例子,我们可以看到转换的过程如图:
通过setData把msg数据从“Hello World”变成“Goodbye”,产生的JS对象对应的节点就会发生变化,此时可以对比前后两个JS对象得到变化的部分,然后把这个差异应用到原来的Dom树上,从而达到更新UI的目的,这就是“数据驱动”的原理,如图
四、双线程下的界面渲染
小程序的逻辑层和渲染层是分开的两个线程。在渲染层,宿主环境会把WXML转化成对应的JS对象,在逻辑层发生数据变更的时候,我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层,再经过对比前后差异,把差异应用在原来的Dom树上,渲染出正确的UI界面,如图
以上都是小程序采用双线程模型的方式渲染页面的整个过程。
持续更新中……
微信小程序系列2——小程序页面渲染和逻辑的关系相关推荐
- 【微信小程序系列】小程序简单连接后端数据库完整示例(附免费下载的源码)(Servlet)
[微信小程序系列]小程序简单连接后端数据库完整示例(附免费下载的源码)(Servlet) 登录页面 login.wxml <view class="page">< ...
- 小明系列问题――小明序列(LIS)
小明系列问题――小明序列 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit ...
- HDU 4521 小明系列问题——小明序列 LIS+动态规划
HDU 4521小明系列问题--小明序列 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u ...
- 微信小程序之旅一(页面渲染)
1.微信小程序条件渲染(wx:if):使用wx:if={{Boolean}}来判断是否需要渲染该代码块,使用wx:elif和wx:eise来渲染else块 <view wx:if="{ ...
- php 答题 一页一题,微信小程序答题,怎么设计页面渲染,答完一题,跳到下一题...
想要的效果 1.第一页只显示第一道题的内容,如图红框 2.答题后,点击下一题,内容显示第二道题的内容 代码 answer.wxml 全民答题 总共1/10题 {{index+1}}: {{item.t ...
- 微信小程序答题,怎么设计页面渲染,答完一题,跳到下一题
想要的效果 1.第一页只显示第一道题的内容,如图红框 2.答题后,点击下一题,内容显示第二道题的内容 代码 answer.wxml <!--pages/answer/answer.wxml--& ...
- hdu4521 小明系列的问题——小明序列(LIS变种 (段树+单点更新解决方案))
链接: huangjing 题目:中文题目 思路: 1:这个题目假设去掉那个距离大于d的条件,那么必定是一个普通的LIS.可是加上那个条件后就变得复杂了.我用的线段树的解法. . .就是採用延迟更新的 ...
- 微信小程序系列3——页面跳转详解
前言 首先,微信页面跳转的是一个页面栈进栈出栈的过程,也可以简单的理解对页面跳转的操作就是一个栈的操作. 微信小程序主要一下两类样式的跳转(JS.WXML控件): JS控制的跳转: navigat ...
- 微信小程序 本地mysql_微信小程序系列之使用缓存在本地模拟服务器数据库
微信小程序系列之使用缓存在本地模拟服务器数据库 现在将data.js这个文件视作是本地数据库的初始化数据,要做的第一件事就是讲这些初始化数据装进缓存中,以形成数据库的初始化数据 整个应用程序的生命周期 ...
最新文章
- 阿里老员工论坛炫耀:每年税前260万,还有三千万期权在握
- [转] GloVe公式推导
- c# 拼接lambda表达式 (转载)
- 图解Matlab向量和向量运算
- mysql索引 钱缀_mysql字符串前缀索引
- windows环境下运行.sh文件
- algorithm头文件下的常用函数
- jenkins blue ocean 与 pipeline
- phpgif图片包_php生成动态验证码gif图片
- 《重构-改善既有代码的设计》读书笔记
- PADS2007无模命令与快捷键
- idea 谷歌翻译
- 社会工程学利用的人性_社会工程学利用的人性弱点包括
- 基于台达PLC的步进电机控制<续一>
- 面试官问:你的缺点是什么,这么回答漂亮!(真实案例)
- [PyG] 1.如何使用GCN完成一个最基本的训练过程(含GCN实现)
- 计算机的手机储存在哪里,手机wps文件保存在哪里?
- 机器学习实战(11)——初识人工神经网络
- Android 权限表,危险权限
- CocosCreator 微信小游戏云函数简单使用
热门文章
- subscript on non-array or too many dimensions
- java的时间日期类_Java基础学习:日期时间类
- 淘宝API应用开发小试
- SQL——MySQL Driver
- Mybatis 解决数据库字段名和实体类属性名不一致问题
- 百度地图(HTML5新特性)-全面详解(学习总结---从入门到深化)
- 2020年度总结 | 葡萄城软件开发技术回顾
- 正则匹配以xx开头以xx结尾的单词
- 2019云计算公司排名 哪家的云服务器最好用?
- 海桂嘉积中学2021高考成绩查询,圆梦行动 “我想做记者,我想学计算机” 屯昌文武山村“高考姐妹花”的美好心愿...