我们称微信客户端给小程序所提供的环境为宿主环境。

小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层(View)，JS 脚本工作在逻辑层(App Service)。小程序框架

框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

1.微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

2.紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

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

写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

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

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

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

  // app.js 注册小程序
  App({
    onLaunch (options) {
      // Do something initial when launch.
    },
    onShow (options) {
      // Do something when show.
    },
    onHide () {
      // Do something when hide.
    },
    onError (msg) {
      console.log(msg)
    },
    globalData: 'I am global data'
  })

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

  // xxx.js
  const appInstance = getApp()
  console.log(appInstance.globalData) // I am global data

一个小程序页面由四个文件组成

1. js 页面逻辑
2. wxml 页面结构
3. json页面配置
4. wxss 页面样式表

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

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

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

注册页面 Page Page(Object object)

[官方文档]组件汇总

• 组件是视图层的基本组成单元。
• 组件自带一些功能与微信风格的样式。
• 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
  

<tagname property="value">
  Content goes here ...
</tagename>

例如，你需要在界面上显示地图，你只需要这样写即可：

  <map></map>

使用组件的时候，还可以通过属性传递值给组件

  <map longitude="广州经度" latitude="广州纬度"></map>

用户点击了地图上的某个标记，你可以在 js 编写 markertap 函数来处理：

  <map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

要获取用户的地理位置时，只需要：

  wx.getLocation({
    type: 'wgs84',
    success: (res) => {
      var latitude = res.latitude // 纬度
      var longitude = res.longitude // 经度
    }
  }

调用微信扫一扫能力，只需要：

  wx.scanCode({
    success: (res) => {
      console.log(res)
    }
  })

多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题 小程序的API

1.我们约定，以 on 开头的 API 用来监听某个事件是否触发

这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

  wx.onCompassChange(function (res) {
    console.log(res.direction)
  })

2.我们约定，以 Sync 结尾的 API 都是同步 API
3.大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数