微慕专栏

微慕专栏信息

4.2 组件系统

小程序的视图是在WebView里渲染的,那搭建视图的方式自然就需要用到HTML语言。如果我们直接提供HTML的能力,那前面章节所介绍的为解决管控与安全而建立的双线程模型就成为摆设了。开发者可以利用A标签实现跳转到其它在线网页,也可以动态执行JavaScript等

4.1 双线程模型

在前面第二章中,我们就有提到过小程序是基于双线程模型的,在这个模型中,小程序的逻辑层与渲染层分开在不同的线程运行,这跟传统的Web 单线程模型有很大的不同,使得小程序架构上多了一些复杂度,也多了一些限制。

3.2 程序与页面

从逻辑组成来说,一个小程序是由多个“页面”组成的“程序”。这里要区别一下“小程序”和“程序”的概念,往往我们需要在“程序”启动或者退出的时候存储数据或者在“页面”显示或者隐藏的时候做一些逻辑处理,了解程序和页面的概念以及它们的生命周期是非常重要的。

3.1 渲染层和逻辑层

小程序的运行环境分成渲染层和逻辑层,第2章提到过 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分离是经过很多考虑得出来的模型,在第6章我们会详细阐述这个模型背后的原理以及产生的问题。在本章我们会先介绍这个模型的基本工作方式。

2.3 WXSS 样式

WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。

WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改。

2.2 WXML 模板

WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 “pages/index/index” 上新增一行 “pages/wxml/index” 保存文件。模拟器刷新后,读者可以在编辑器中找到 pages/wxml/index.wxml 文件,本小结的学习通过修改这个文件来完成。

2.1 JSON 配置

JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。

1.4 小程序开发准备

开发小程序的第一步,需要拥有一个小程序 AppID,后续的所有开发流程会基于这个 AppID 来完成。小程序的注册非常简单,只需几个操作。

1.3 小程序的特色

​ 对于普通用户,小程序实现了应用的触手可及,只需要通过扫描二维码、搜索或者是朋友的分享就可以直接打开,加上优秀的体验,小程序使得服务提供者的触达能力变得更强。

1.2 小程序介绍

从技术的维度看,小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时,微信就有相关的 JS API 了。

1.1 Hello World

在详细介绍小程序历史和技术细节前,请先跟随我们的步骤完成开发Hello World例子。

滚动至顶部