微信小程序-基础篇(2)-流程、模板、配置

写在前面

这篇博客的内容比较浅显，主要是讲小程序的文件结构和执行流程，基础比较好的可以稍微看一遍了解一下就好，下一篇博文才开始讲述wxml语法的相关内容。

小程序组织结构

以上篇博文中创建的微信官方DEMO中，我们可以清晰的看到一个简单小程序的目录结构。 其中一些文件在每个小程序中都会出现，并扮演着相似的角色，比如：

小程序全局配置文件 app.json

这个配置文件是对小程序整体做一个配置，包括所有页面路径的定义，界面，底部TAB、网络超时时间等。 官方配置样例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

比较重要的配置如下： - 页面配置 参数：pages，类型：数组 数组内每一行都是【路径+文件名】代表一个页面，路径位置是相对app.json而言的相对路径，配置时省略.wxml 注意：第一行为入口页面，小程序首先加载第一行的页面。 - 界面配置 参数：window，类型：对象 作用：用于设置小程序的状态栏、导航条、标题、窗口背景色。 比较重要的几个配置项： navigationBarTitleText: ‘默认的标题名称’, navigationBarBackgroundColor: ‘#000’ 导航栏背景色 backgroundColor: ‘#fff’ 窗体背景色 - 底部TAB配置 参数：tabBar，类型：对象 作用：配置底部TAB的字体颜色，图片，边框等信息 比较重要的几个配置 color:’#000’ 说明：正常显示的时候，字体颜色 selectedColor: ‘#f00’ 说明：激活状态时字体颜色 position: ‘top’ 说明：top/bottom表示TAB在顶部或底部 list:

1

[{pagePath: '/pages/index', iconPath: '/img/xx.jpg', selectedIconPath: '/img/xx_2.jpg', text: '首页' },... ] 

说明：pagePath表示pages里的路径，iconPath表示正常情况下的图标，selectedIconPath表示激活状态下的图标,text表示显示的文字

• 完全参数说明：官方说明 注：每个页面都有以【页面名字】为名的局部配置文件*.json，但里边的配置项只能配置app.json中window配置里边的内容。

程序主逻辑_app.js_

这个.js文件主要是对小程序做一个全局的管理，主要任务就是实例化了一个App()对象，任何一个小程序都有且只能有一个APP()对象。 官方配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

App({
  onLaunch: function(options) {
    // Do something initial when launch.
  },
  onShow: function(options) {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

程序公共样式_app.wxss_

.wxss文件相当于网页开发中的CSS样式文件，拥有CSS的大部分特性。 app.wxss文件是全局自动加载的样式文件，所有页面都会生效。 小程序还对CSS做了扩展，可以通过import 来引入其他样式文件。

1
2

@import "./test.wxss";
p{text-alian:center;}

特殊优化：尺寸单位：rpx(responsive pixel)，不同手机屏幕会显示出不同的效果。

小结

在/目录下的app.json,app.js,app.wxss均为小程序初始化时用到的文件，分别代表全局配置文件，App()对象实例化文件，全局样式文件。 App()对象每个小程序只能有一个，实例化时可以指定回掉函数，小程序在对应状态下会自动执行。 wxss样式与CSS有区别，主要是：import “common.wxss”引入其他wxss文件，还有rpx尺寸单位，不同手机屏幕将显示出不同的效果。

执行流程

小程序的执行与普通WEB-APP执行方式不一样，小程序执行时，可以理解为如下三个步骤：

下载软件包，载入配置文件

小程序执行时会将软件包的所有内容下载到用户手机中，这也注定了软件包的体积不能过大，我记得微信上的限制是2M，所以像视频资源，大的图片资源最好就不要放进去了。 下载完成后，首先加载app.json配置，读取window,tab等界面配置，以及得到上文所讲的pages参数，为加载第一个页面做准备。

加载app.js，实例化APP()

实例化每个小程序都会有的唯一一个App()对象，执行onLaunch()回调进行准备工作，回调执行完毕后开始渲染第一个页面。

渲染页面

假设，我们的app.json中的pages配置第一条是_/pages/index/index_，那么小程序将加载页面文件_/pages/index/index.wxml_，然后加载和这个页面相关的_/pages/index/index.json_、_/pages/index/index.wxss_，_/pages/index/index.js_，分别代表页面配置文件，页面样式文件，页面js文件。 注：wxml语法和index.js中的Page()对象的使用将会在下一篇博客中讲解。

总结

本篇博客简单介绍了各个文件的作用，以及简述了小程序的执行流程和页面渲染流程，由于wxml语法和Page()对象这部分的知识会比较多，所以拆分到下一篇博客中讲述。