小程序入门
这两周自己在研究小程序,由于之前也未曾接触过这一方面,为了加深自己的印象,决定写一篇学习笔记来记录自己的学习内容。
简介
小程序的来源
小程序是针对移动互联网的环境而出现的一款产品。最初由腾讯微信提出,而后阿里与百度均推出了自己的小程序架构。
张小龙在提出小程序之初,就很明确地提出了小程序的概念“用完即走,唾手可得”。与需要下载安装的大型的app来说,小程序应当是轻量迅捷的应用。而网页恰恰好与这个要求有一定的共性。
从技术层面上讲,传统网页在移动端的网页组件webview中的表现并不那么令人满意,主要反映在页面白屏、切换生硬、点击反馈迟滞。为了解决这个问题,微信一开始推出的是JS-SDK网页开发工具包。这个工具包优化一部分体验,但是这并没解决本质问题。
微信迫切地需要一个能够更简单高效、更快更贴近原生的系统来展示这一理念,而这就是小程序。
小程序与网页的区别
在微信官方教程里有详细解释过,其本质区别在于小程序分离了逻辑层和渲染层,使二者运行在不同的线程中,其运行环境与API与传统十分不一样。
小程序框架本身就能够快速加载和渲染,并且封装好了许多微信内部API,使得用户不需要去处理琐碎的工作,同时还能使用更多的数据。
小程序的架构
JSON
小程序的静态配置(如页面结构等)是用JSON编写,在运行过程中无法改动此文件。
WXML
WXML是类似HTML的标签语言,用途是组织页面的基本架构。其标签与HTML有较大不同,主要原因是将大多数常用结构封装起来,更加易于人们使用。
与HTML不同,WXML中还可以不仅可以进行数据绑定(利用双大括号使数据占位),还可以进行简单的逻辑运算和条件判断,还支持列表渲染。同时WXML还支持模版功能,即定义好模版 template
后可以在其他地方调用。
同时WXML的引用方式有 import
与 include
两种。前者只会导入某个文件中定义的 template
部分,不会导入在此文件中导入的 template
部分,即不会递归导入。后者include 可以将目标文件中除了
外的整个代码引入,相当于是拷贝到 include 位置。
WXSS
和WXML与HTML的关系一样,WXSS也与CSS的作用类似,但是为了更适合小程序开发,WXSS对CSS进行了补充和修改。
WXSS根据位置分为三种:
- 项目公共样式
- 页面样式
- 其他样式
项目公共样式文件处于根目录下,页面样式文件与页面文件同名同级,其他样式可以被前两者引用。
WXSS的尺寸单位为rpx,和android中的dp有异曲同工之处,但是rpx的转换更为细致。
JS
小程序的JS同样遵循ECMAScript标准,但与浏览器中和nodejs中使用的JavaScript最大的不同在于执行对象和运行环境,所以对后两者的用法不能照搬到小程序中。
小程序宿主环境
渲染层和逻辑层
上文提及过小程序的逻辑层与渲染层是分开运行在不同线程,而数据绑定则是为了让他们更快速地通信。在数据变化后,逻辑层构造出来一个新的结构树,与原结构树对比,渲染层则对比较后不一样的地方进行重新渲染。
程序(App)和页面(Page)
小程序中的这两个概念,如果对于写过安卓的人来说可能会觉得很眼熟。其生命周期的概念与应用和activity的生命周期的概念颇有相似之处。但是小程序的使用更加复杂一点,场景分类更加细致,还引入了场景值的概念。
同样的,页面也有页面栈的概念,不过页面栈的最大值被设为了10,这与activity不一样。同样页面之间也有很多方式进行跳转,与activity的启动方式有些类似。
事件冒泡与捕获
这一块与安卓中的父子控件的绑定事件的关系有些类似,可以参考理解。
小程序底层框架
双线程模型
传统网页是使用单线程进行,意味着渲染和逻辑处理不能同时进行。而小程序选用的是双线程模型,将渲染层与逻辑层分离,使其二者分别在不同的线程中运行。
如果了解过app的大概会知道有三种分类:
- Web App
- Native App
- Hybrid App
他们的之间的性能和易适配程度也是逐渐不同的,最明显提现性能的就是渲染表现。而他们渲染方式十分不一样。
小程序对比过三种不同的渲染方式后,决定采用混合渲染的方式,将简单的渲染交给web技术,而复杂的则通过客户端的api进行处理。
而由于web实在太过于灵活,并且JavaScript脚本可以做到的事情太多了。为了安全起见,小程序决定提供一个不包含任何浏览器接口、纯粹解释JavaScript的沙箱环境。由于客户端拥有单独的JavaScript解释引擎,所以可以将JavaScript单独放置到一个线程中去运行,里面所有的js代码都是小程序的业务逻辑,即逻辑层。而渲染所在的线程则是渲染层。
不过由于有不同线程之间的通信问题,所以小程序中间都是异步,并且存在延时,需要准备考虑其时序问题,通常是需要通过回调来确保时序。
组件系统
如果继续使用HTML,那么小程序将无法进行安全管控。同时HTML的能力有限,且标签众多、贴近底层,入门门槛高,不利于快速开发。所以小程序使用了一套自己设计的组件。在小程序架构里无法实现或者实现不好某类功能的,都会包含在这套组件里面。同时,小程序也支持自定义组件。
不同组件实例间的通信有WXML属性值传递、事件系统、selectComponent和relations等方式。其中,WXML属性值传递是从父组件向子组件的基本通信方式,而事件系统是从子组件向父组件的基本通信方式。
小程序还有一部分组件属于原生组件,这部分组件是由客户端渲染的组件。其渲染性能比webview要好,体验更好,能力更强。