【微信小程序】初识小程序

什么是微信小程序

按照微信之父张小龙的定义，小程序是一种不需要下载安装即可使用的应用。小程序实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。同时，体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无须安装卸载。

微信团队原计划称之为微信应用(App)号，不过由于Apple App Store的审核规则不允许包含应用分发、应用推荐，因此微信团队将之称为“小程序”。

小程序的开发框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。

小程序底层实现

小程序的底层实现可以用一句话进行概括：统一接口，不同实现。小程序到微信采用统一的接口，开发者只需考虑框架的语法和规则，不用关心底层如何实现。

小程序 VS HTML 5

1.开发语言不同

我们知道，小程序开发框架中脚本部分采用JavaScript语言进行开发。不过与HTML 5不同的是，框架提供自己的视图层描述语言WXML和WXSS，然后对这些文件进行编译，打包为类似于原生应用的形式进行分发。小程序的WXML标签语言和WXSS样式语言并非标准的HTML 5和CSS 3。

2.组件封装不同
小程序独立出来很多原生App的组件。在HTML5需要模拟才能实现的功能，在小程序里可以直接调用组件，如预览图片、录音等功能。

3.执行效率不同

HTML 5在加载时受限于网络环境，需要顺序加载HTML、CSS、JS，然后返回数据，最后渲染页面，并显示在浏览器中。用户经常需要等待很长时间，体验会受影响。

相比之下，小程序的两个线程——Appservice Thread和View Thread会同时进行、并行加载，甚至Appservice Thread会更早执行。当视图线程加载完通知Appservice时，Appservice会把准备好的数据用setData的方法返回给视图线程。

小程序的这种优化策略可以减少用户的等待时间，加快小程序的响应速度。

小程序结构概览

小程序由以下5个部分组成。

App：指小程序整个项目。

window：用于设置小程序的状态栏、导航条、标题、窗口背景色。

页面：一个App包含若干页面。微信规定，同时打开的页面最多不超过5个。

组件：框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。这些组件是构成页面的基本元素。

路由：不同页面之间的跳转称为路由。

小程序的生命周期

生命周期分为3个阶段：

第一阶段是App启动阶段，主要加载小程序window配置，注册程序和页面；
第二阶段是Page启动阶段，主要完成页面资源加载、页面渲染、页面挂载；
第三阶段是销毁阶段，主要完成页面隐藏、卸载和销毁。

小程序的项目架构

pages文件夹用于放置页面文件。

app.js是App的启动脚本，可以处理一些App启动过程中页面加载之前要处理的事情。

app.json是App的配置文件，配置项包括window、页面、tab菜单栏等。

app.wxss是App的公共样式，类似于css。

一个App可包含多个页面，页面的相对访问路径被配置在app.json里，每个页面可以包含[页面名].js、[页面名].wxml、[页面名].wxxs以及配置文件[页面名].json。其中，WXSS和json文件不是必要的。如果这两个文件存在，就会覆盖app.json和app.wxss的相同配置项。

一个框架程序主体部分由3个文件组成，必须放在项目的根目录：

一个框架页面由4个文件组成：

小程序配置

小程序有两种配置：
(1)全局配置文件，用于小程序的全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。
(2)页面配置文件，用于配置各个页面，将覆盖app.json的window配置项内容。

全局配置

全局配置列表：

1.Pages

Pages设置程序中所有页面，第一个页面为初始页面。
Pages每一项的命名为路径+文件名，一般为pages/dictionary/file。不需要加文件后缀。

2.window

window设置程序中默认页面的状态栏、导航条、标题、窗口背景色等

注意，如果页面需要启动下拉刷新，务必将enablePullDownRefresh设置为true。可以用onPullDownRefresh监听用户下拉刷新事件。

3.tarBar

tabBar可以配置多个tab页面，配置项包括指定tab栏的表现和tab切换时显示的对应页面。
tabBar的位置可以在顶部(top)或底部(bottom)

属性表：

list属性表

4.networkTimeout

设置各种网络请求的超时时间

5.debug

可以在开发者工具中开启debug模式，在开发者工具的控制台面板调试信息以info的形式给出，信息有Page的注册、页面路由、数据更新、事件触发等，可以帮助开发者快速定位一些常见问题。

页面配置

每一个小程序页面都可以使用.json文件对本页面的窗口表现进行配置，页面的配置只能设置app.json中的window配置项的内容，页面中的配置项会覆盖app.json的window中相同的配置项。页面的.json只能设置window相关的配置项，以决定本页面的窗口表现，所以无须写window键。

小结

本次主要介绍了小程序框架的底层实现、配置和逻辑层，讲解了小程序的项目目录架构、配置文件、生命周期、全局设置、页面设置等知识点。

---

参考资料：《微信小程序开发详解》