(一)小程序结构框架介绍

1.项目文件结构

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。(详情查看微信开放文档)

pages文件夹：

用来存放编写的各个小程序的页面。每个子页面下含有四个同目录名文件，以上图为例：

1.index.js :

逻辑处理文件，通过调用对应存放页面的数据、事件处理函数等来创建并运行页面以完成逻辑交互，该文件中编写JavaScript代码以控制页面逻辑。（影响范围也仅限当前页面）

// page.js
Page({
  data:{}
  onLoad: function () {}//生命周期函数
})

2.index.json：

小程序页面配置文件（外部页面样式组件导入配置文件），可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项。（影响范围也仅限当前页面）

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "页面配置演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

3.index.wxml

页面布局文件，是小程序页面框架设计的一套标签语言，相当于html文件，结合基础组件、事件系统用来描述或构建出页面框架，设置页面的布局、数据绑定等。

<!--wxml-->
<view>文本内容</view>

4.index.wxss

用来定义页面中用到的各类样式，相当于css描述的是当前页面的样式，为了适应前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

.page {
  background: #79b7ff;
}

总结：框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层；WXML(WeiXin Markup language) 用于描述页面的结构；WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构；WXSS(WeiXin Style Sheet) 用于描述页面的样式；组件(Component)是视图的基本组成单元。

utils文件夹

用来存放工具性质的模块，如公共的wxss和js(存放json数据)等，避免每个页面重复工作。

app.js

小程序项目的入口文件。每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

app.json

小程序项目的全局配置文件。对小程序进行配置，包括小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等; 我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口及背景色，配置导航条样式，配置默认标题。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

app.wxss

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

project.config.json

项目的配置文件，用来记录对小程序开发工具所做的个性化配置。

project.private.config.json

项目私有配置文件，project.private.config.json 中的相同设置优先级高于 project.config.json。项目的改动优先同步到此文件中。

sitemap.json

用来配置小程序及其页面是否允许被微信索引。

//例1.所有页面都会被微信索引（默认情况）
{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}