小程序学习---基本原理

一、启动

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地（所以说，其实小程序还是需要下载的，只是它的包很小，目前限制不能超过2M）。紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

这个配置说明在helloworld项目定义了两个页面，分别位pages/index/index 和 pages/logs/logs 目录。而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

整个小程序只有一个 App 实例，是全部页面共享的，更多的事件回调参考文档注册程序 App 

二、程序与界面

你可以观察到 pages/logs/logs 下其实是包括了4种文件的，微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js，你可以看到 logs.js 的大体内容就是:

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。有关于Page构造器更多详细的文档参考 注册页面 Page 。

三、详解文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

1、app结构，由3个文件构成

1）app.js 必备文件

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是用来注册小程序的。必须写在app.js中，有且只有一个（类似某些语言里的main函数）。里面的onLaunch等函数描述了app的生命周期，具体的生命周期函数可以参考文档app.js

2）app.json，必备文件。

{
  "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
}

这个文件的名字必须是app，用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。上面的代码列出了app.json包含的所有配置，我们可以看到上面的配置让app有两个“tab”标签，分别是“首页”和“日志”；还可以看到网络超时设置为10s。具体使用方法可以参考文档app.json

3）app.wxss，可选文件

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

这个文件类似css文件，名字必须是app，描述了app的样式。例如上面的代码配置了app的高度、布局方向等。这个文件的用法和css写法大致一样，也可以不设置此文件，系统会有默认的app样式

2、页面文件

    页面文件一般有4个文件构成：xxx.js,xxx.json,xxx.wxml,xxx.wxss。这四个文件的名字必须相同。

    1）xxx．wxml，必备文件

<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{log}}</text>
  </block>
</view>

这个文件描述了页面的结构，我们可以在里面添加一些“按钮”、“文字”、“图片”等组件，构成一个像网页一样的页面。在上面的文件中，我们只添加了一个文本框，启动这个页面之后，我们可以看到一行文字（注意显示的不是“{{log}}”，这个家伙是一个变量，具体值在下面的js文件）。小程序为我们提供了丰富的组件，每一个组件的具体用法参考文档 组件。至于wxml文件的格式，类似html，很简单的。

2）xxx．Js文件，必备文件

Page({
  data: {
    log: "你看到了日志"
  },
  onLoad: function () {
  }
})

这个文件描述了页面的逻辑行为，页面上的文字该显示什么、按钮按下之后的动作是什么、跳转的目的页面在哪里…这些逻辑都由js文件来控制。例如上面的代码我们可以看到，页面的“text”组件会显示“你看到了日志”。

这个js文件里面必须是Page(…)这样的格式（注意大小写），至于Page里面的参数，可以参考文档page。Page()函数是用来注册页面的，它的参数是一个object，其实你可以看出来，里面都是键值对，

3）xxx．wxss，可选文件

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

这个文件设置了wxml的样式，它规定了每个组件大小、位置、颜色等信息（你可以将它看做是web中的css文件）。从本质上来讲，并不是每一个页面都必须有样式文件，因为控件会有默认的样式；然而实际开发中，我们一定会为每个页面都准备好wxss文件的。例如上面代码，我们设置了页面的显示方向为垂直布局，内边距40rpx

       4）xxx．Json，可选文件

{
  "navigationBarTitleText": "查看启动日志"
}

       这个文件是一些配置信息，这里可以设置页面整体的显示效果，例如标题、标题颜色、背景颜色等。上面的代码我们设置了页面的标题是“查看启动日志”。

       其实这个文件就是app.json文件中的“windows”内容，这页面的json文件中，只能配置window，其配置方法和app.json是一样的。app.json会设置全局的窗口显示样式，而页面的json文件只设置自己的窗口。如果一个页面没有json文件，或者它的json文件只设置了window的一两条属性，那么剩余的window属性都会按照app.json来设置

四、运行机制

小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。 假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

1、小程序没有重启的概念

2、当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁

3、当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁

五、更新机制

小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。