用微信小程序开店之三——小程序还有5秒准备就绪……全军出击

上一讲，简要讲述了微信小程序demo示例的生成，直观上感受了一下小程序的基本操作。本讲接着讲解：小程序基本组成及框架结构。

1、小程序基本组成

微信小程序 = javascript + 小程序代码框架 + 小程序组件 + 小程序API + 微信web开发者工具

2、小程序框架结构

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

框架提供了：视图层描述语言WXML、微信样式表WXSS，基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统。这样可以使开发者的精力都专注于数据与业务逻辑上。

3、框架代码文件结构

框架代码文件结构如下图所示：

（1）小程序全局整体描述文件

app.js文件：小程序主入口逻辑

app.json文件：小程序公共设置

app.wxss文件：小程序公共样式表

（2）小程序页面描述文件（以上图logs页面为例）

每个小程序页面均由4个文件组成，这四个文件的定义如下：

logs.js：页面逻辑

logs.wxml：页面布局结构

logs.wxss：页面样式表

logs.json：页面配置

注意：

1）如果页面样式表与“小程序公共样式表”有同名样式定义，则“页面样式表”中样式效果会覆盖“小程序公共样式表”中的同名样式定义。

2）为了方便开发者使用，减少开发者配置项，这4个文件必须同名。

4、框架代码文件简单举例

（1）app.json文件全局配置示例

全局配置项说明：

1）pages：小程序中添加/删除页面的总配置项。接受一个数组，每一项是字符串类型，用于指定小程序有哪些页面组成。每一项表示对应页面的“路径 + 文件名”信息。小程序开发过程中增加/减少页面时，都要对pages配置项进行修改。

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

举例：

3）tabBar：小程序还能支持多tab应用。通过设置tabBar配置项，可以指定小程序tab条在顶部（top）还是底部（bottom）出现。

注意：

i、当设置position为top时，则不显示tab icon（tab的图标）。

ii、tabBar中的list是数组，用于设定tab标签个数。只能支持2~5个tab标签，且tab标签按数组顺序排序。

4）networdTimeout：设置网络超时时间，单位：毫秒；

5）debug：是否开启调试模式，true、是；false、否；

（2）小程序页面的.json文件配置说明

小程序单独页面的json配置与app.json全局配置类似，且简单的多。需要注意的是：单独页面中配置window选项时，其效果会覆盖app.json中的window配置项。

好了，小程序的基本组成及框架结构就先讲到这里。各位吃瓜群众先消化一下，下节课我将使用具体代码实例为大家展示本节课中涉及到的常用配置项以及它们在实际程序中是如何使用的。

敬请关注：第四讲，“小程序是怎样炼成的”。