一、小程序简介

• 1.1 小程序技术发展史

小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。实际上，微信官方是没有对外暴露过如此调用的，此类 API 最初是提供给腾讯内部一些业务使用，很多外部开发者发现了之后，依葫芦画瓢地使用了，逐渐成为微信中网页的事实标准。2015年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。给所有的 Web 开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情。如下代码使用 WeixinJSBridge 预览图片。

• 1.2 小程序与普通网页开发的区别

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，如下表所示。

二、小程序代码构成

• 2.1 JSON 配置

（1）小程序配置 app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。pages字段：用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window字段：定义小程序所有页面的顶部背景颜色，文字颜色定义等。
（2）工具配置 project.config.json
小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等一系列选项。
（3）页面配置 page.json
这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此 page.json 让开发者可以独立定义每个页面的一些属性。

• 2.2 网页三件套

（1）WXML 模板
从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。和 HTML 非常相似，WXML 由标签、属性等等构成。
（2）WXSS 样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
1、新增了尺寸单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可。
2、提供了全局的样式和局部样式。你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3、此外 WXSS 仅支持部分 CSS 选择器。
（3）JS 逻辑交互
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。

# demo.wxml
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

# demo.js
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

三、目录结构

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

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下： 一个小程序页面由四个文件组成，分别是：

在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、.wxss。除此之外，只有后缀名在白名单内的文件可以被上传：wxs、png、jpg、jpeg、gif、svg、json、cer、mp3、aac、m4a、mp4、wav、ogg、silk、wasm、br、cert。

四、框架接口

• 4.1 小程序 App

（1）App (Object object)
注册小程序，接受一个 Object 参数，其指定小程序的生命周期回调等。
必须在 app.js 中调用，必须调用且只能调用一次。示例代码1如下。

（2）AppObject getApp (Object object)
获取到小程序全局唯一的 App 实例。示例代码2如下。

注意：不要定义于 App() 内的函数中，或调用 App 前调用 getApp() ，使用 this 就可以拿到 app 实例。通过 getApp() 获取实例之后，不要私自调用生命周期函数。

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

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

• 4.2 页面

（1）Page (Object object)
注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。实例代码1如下。

（2）PageObject[] getCurrentPages ()
注意：不要尝试修改页面栈，会导致路由以及页面状态错误。
不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
（3）Router
页面路由器对象。可以通过 this.pageRouter 或 this.router 获得当前页面或自定义组件的路由器对象。实例代码2如下。

// index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onShow: function() {
    // Do something when page show.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onResize: function() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

// index.js
Page({
  wxNavAction: function () {
    wx.navigateTo({
      url: './new-page'
    })
  },
  routerNavAction: function () {
    this.pageRouter.navigateTo({
      url: './new-page'
    })
  }
})

• 4.3 基础功能

（1）console
向调试面板中打印日志。console 是一个全局对象，可以直接访问。
在微信客户端中，向 vConsole 中输出日志。
console.debug ()：向调试面板中打印 debug 日志
console.log ()：向调试面板中打印 log 日志
console.info ()：向调试面板中打印 info 日志
console.warn ()：向调试面板中打印 warn 日志
console.error ()：向调试面板中打印 error 日志
console.group (string label)：在调试面板中创建一个新的分组
console.groupEnd()：结束由 console.group 创建的分组
（2）定时器
number setTimeout (function callback, number delay, any rest)
设定一个定时器。在定时到期以后执行注册的回调函数。
① function callback：回调函数
② number delay：延迟的时间，函数的调用会在该延迟之后发生，单位 ms。
③ any rest：param1, param2, ..., paramN 等附加参数，作为参数传递给回调函数。
④ 返回值：number，定时器的编号。可以传递给 clearTimeout 来取消该定时。
（3）Object WXWebAssembly
WXWebAssembly 类似于 Web 标准里的 WebAssembly，能够在一定程度上提高小程序的性能。

微信官方参考文档：https://developers.weixin.qq.com/doc/