第3章 微信小程序起步

第3章微信小程序起步小程序代码组成小程序应用能力小程序宿主环境小程序组件化01020403小程序代码组成小程序代码组成小程序开发与传统的前端开发有着很大的区别，不管什么类型的前端技术，都是由以下三种技术组成：静态标签文件（HTML），静态标签决定了前端页面的基本骨架是如何构成的；样式文件（CSS），样式文件可以让前端的页面凸显自身的美术风格；动态脚本文件（JavaScript），动态脚本可以让前端页面与用户进行交互。小程序代码组成小程序虽然与传统的前端开发有所区别，但是也脱离不了前端的固定模式。小程序拥有四种文件类型，分别是：wxml文件，类似于传统前端的HTML文件，用于静态标签的编写；wxss文件，与传统前端的CSS文件功能类似，用于页面样式的编写；js文件，与传统前端的JavaScript脚本功能类似，用于页面交互逻辑的编写；json文件，在传统前端页面开发中没有json文件，小程序的json文件主要用于页面配置，如页面标题、颜色、样式的配置等。小程序代码组成微信开发者工具中的页面文件：小程序代码组成WXML文件以.wxml作为后缀，一个完整的WXML语句由一段开始标签和结束标签组成，在标签中可以是内容，也可以是其他的WXML语句，这一点上与HTML是一致的。WXML基本语法如下：<!s/wxml/index.wxml--><text>pages/wxml/index.wxml</text>小程序代码组成WXSS（WeiXinStyleSheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，提升视觉上的效果。WXSS与传统前端开发中的CSS类似，为了更适合小程序开发，WXSS对CSS做了一个补充和扩展，例如尺寸单位、样式导入等。小程序代码组成小程序的JavaScript是由ECMAScript以及小程序的框架和API来实现的，与浏览器中的JavaScript相比没有BOM和DOM对象，所以类似于jQuery、Zepto这种浏览器类库是无法在小程序中运行起来的，同样的缺少Native模块和NPM包管理的机制。所以这就导致小程序中无法加载原生库，也无法直接使用大部分的NPM依赖包。小程序代码组成JOSN文件作为小程序中的静态配置文件，在小程序运行之前就决定了小程序的一些表现，需要注意的是小程序无法在运行过程中去动态更新JSON配置，如果JSON配置文件的内容发生了更改，需要重新编译当前的项目才能生效。小程序宿主环境小程序宿主环境小程序是基于双线程模型的，包括渲染层和逻辑层。小程序渲染层的界面使用了WebView进行渲染；逻辑层采用JsCore线程运行JS脚本。小程序宿主环境一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native转发。小程序宿主环境在小程序中，任何渲染层的行为事件都需要向开发者反馈，这种事件行为有可能是用户主动触发的，也有可能是组件状态改变而触发的，无论哪种状态的事件触发。无论哪种状态的事件触发行为，都需要被微信客户端捕获，然后由开发者在逻辑层中处理。小程序宿主环境小程序应用能力小程序应用能力原生CSS布局界面交互反馈HTTPS网络通信本地数据缓存连接设备硬件微信开放能力小程序提供的应用能力包括：小程序组件化小程序组件化小程序基于Exparser框架设计的小程序内置组件，涵盖了视图容器类、表单类、导航类、媒体类、开放类等几十种组件。小程序组件化在小程序中，每个组件都具有独立的逻辑空间，分别拥有自己的独立数据和setData方法调用。在使用自定义组件的小程序页面中，Exparser框架将接管所有的自定义组件注册和实例化。小程序的基础库中提供了Page和Component两个构造器，自定义组件使用的是Component构造器。小程序组件化常用的小程序UI组件库有以下几款：WeUI，是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信Web开发量身设计，可以令用户的使用感知更加统一。VantWeapp，是有赞移动端组件库Vant的小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速搭建小程序应用。iViewWeapp，是由TalkingData发布的组件