4.2 组件系统
小程序的视图是在WebView里渲染的,那搭建视图的方式自然就需要用到HTML语言。如果我们直接提供HTML的能力,那前面章节所介绍的为解决管控与安全而建立的双线程模型就成为摆设了。开发者可以利用A标签实现跳转到其它在线网页,也可以动态执行JavaScript等
微慕专栏信息
小程序的视图是在WebView里渲染的,那搭建视图的方式自然就需要用到HTML语言。如果我们直接提供HTML的能力,那前面章节所介绍的为解决管控与安全而建立的双线程模型就成为摆设了。开发者可以利用A标签实现跳转到其它在线网页,也可以动态执行JavaScript等
在前面第二章中,我们就有提到过小程序是基于双线程模型的,在这个模型中,小程序的逻辑层与渲染层分开在不同的线程运行,这跟传统的Web 单线程模型有很大的不同,使得小程序架构上多了一些复杂度,也多了一些限制。
从逻辑组成来说,一个小程序是由多个“页面”组成的“程序”。这里要区别一下“小程序”和“程序”的概念,往往我们需要在“程序”启动或者退出的时候存储数据或者在“页面”显示或者隐藏的时候做一些逻辑处理,了解程序和页面的概念以及它们的生命周期是非常重要的。
小程序的运行环境分成渲染层和逻辑层,第2章提到过 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分离是经过很多考虑得出来的模型,在第6章我们会详细阐述这个模型背后的原理以及产生的问题。在本章我们会先介绍这个模型的基本工作方式。
WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。
WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改。
WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 “pages/index/index” 上新增一行 “pages/wxml/index” 保存文件。模拟器刷新后,读者可以在编辑器中找到 pages/wxml/index.wxml 文件,本小结的学习通过修改这个文件来完成。