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

小程序的运行环境分成渲染层和逻辑层，其中 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.js 中调用 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

简单的页面可以使用 Page() 进行构造。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

*data 是页面第一次渲染使用的初始数据。

框架以栈的形式维护了当前的所有页面。可以使用 getCurrentPages() 函数获取当前页面栈。页面路由

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

*更推荐开发者采用 module.exports 来暴露模块接口

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
 
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中，使用 require 将公共代码引入

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

API 接口

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

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 类型的参数