微信小程序入门

小程序是什么

2017年，微信正式推出了小程序，允许外部开发者在微信内部运行自己的代码，开展业务

截至目前，小程序已经成为国内前端的一个重要业务，跟 Web 和手机 App 有着同等的重要性

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用

也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载

注意的是，除了微信小程序，还有百度小程序、微信小程序、支付宝小程序、抖音小程序，都是每个平台自己开发的，都是有针对性平台的应用程序

小程序的背景

⼩程序并⾮凭空冒出来的⼀个概念，当微信中的 WebView 逐渐成为移动 Web的⼀个重要⼊⼝时，微信就有相关的 JS-SDK

JS-SDK 解决了移动⽹⻚能⼒不⾜的问题，通过暴露微信的接⼝使得 Web 开发者能够拥有更多的能⼒，然⽽在更多的能⼒之外，JS-SDK的模式并没有解决使⽤移动⽹⻚遇到的体验不良的问题

因此需要设计⼀个⽐较好的系统，使得所有开发者在微信中都能获得⽐较好的体验：

• 快速的加载
• 更强⼤的能⼒
• 原⽣的体验
• 易⽤且安全的微信数据开放
• ⾼效和简单的开发

这些是JS-SDK做不到的，需要设计一个全新的小程序系统

对于小程序的开发，提供一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者开发出具有原生体验的服务

其中相比H5，小程序与其的区别有如下：

• 运⾏环境：⼩程序基于浏览器内核重构的内置解析器
• 系统权限：⼩程序能获得更多的系统权限，如⽹络通信状态、数据缓存能⼒等
• 渲染机制：⼩程序的逻辑层和渲染层是分开的

小程序可以视为只能用微信打开和浏览的H5，小程序和网页的技术模型是一样的，用到的 JavaScript 语言和 CSS 样式也是一样的，只是网页的 HTML 标签被稍微修改成了 WXML 标签

因此可以说，小程序页面本质上就是网页

其中关于微信小程序的实现原理，我们在后面的文章讲到

优缺点

优点：

• 随搜随用，用完即走：使得小程序可以代替许多APP，或是做APP的整体嫁接，或是作为阉割版功能的承载体
• 流量大，易接受：小程序借助自身平台更加容易引入更多的流量
• 安全
• 开发门槛低
• 降低兼容性限制

缺点：

• 用户留存：及相关数据显示，小程序的平均次日留存在13%左右，但是双周留存骤降到仅有1%
• 体积限制：微信小程序只有2M的大小，这样导致无法开发大型一些的小程序
• 受控微信：比起APP，尤其是安卓版的高自由度，小程序要面对很多来自微信的限制，从功能接口，甚至到类别内容，都要接受微信的管控

开发第一个小程序

账号配置

进入微信公众平台,进入小程序注册页面，根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序帐号之后，我们需要一个工具来开发小程序。

安装小程序开发工具

进入微信开发者工具（稳定版 Stable Build）下载地址与更新日志，安装微信开发者工具

创建一个小程序项目

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 “不使用云服务” （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

接下来我们来预览一下这个小程序的效果。

编译预览

点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序。

小程序项目结构分析

小程序项目结构分析：

• app.js文件是小程序的入口文件（小程序从该文件开始执行）。
• app.wxss文件是小程序的全局样式文件。
• pages文件夹用来放置小程序的页面。
  • wxml 模板文件，类似于HTML文件。
  • wxss 样式文件，类似于css文件。
  • js 文件，用于处理js的交互逻辑，与原生js作用类似。
  • json文件，用于当前页面的配置。
• utils文件夹用于提供一些工具方法。

├── app.js ............................................... 小程序入口文件
├── app.json ............................................. 小程序全局配置
├── app.wxss ............................................. 小程序全局样式
├── pages ................................................ 所有页面目录
│   ├── index ............................................ index页面目录
│   │   ├── index.js .................................... index页面业务逻辑
│   │   ├── index.wxml .................................. index页面布局结构
│   │   └── index.wxss .................................. index页面布局样式
│   └── logs ............................................. logs页目录
│       ├── logs.js ...................................... logs页面业务逻辑
│       ├── logs.json .................................... logs页面配置文件
│       ├── logs.wxml .................................... logs页面布局结构
│       └── logs.wxss .................................... logs页面布局样式
├── project.config.json ................................... 开发工具配置文件
└── utils ................................................. 公共逻辑
    └── util.js ........................................... 实用工具

小程序基本配置

网页编程采用的是HTML+CSS+JS这样的组合，其中HTML是用来描述当前这个页面的结构，CSS 是用来描述页面的样式，JS通常是用来处理这个页面和用户的交互。

在小程序中也有类似的处理方式，只是语法不同而已，相应的小程序中提供了WXML+WXSS+JS的方式。

• wxml（模板）
• wxss（样式）
• js（交互逻辑）
• json（配置文件）

全局配置

通过 app.json 文件对小程序进行全局配置，如页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.json 配置清单：

• 小程序默认打开的页面是pages中的第一个路径
• 所有的小程序页面都需要在pages下配置路径

示例代码：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/my/my",
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#262626",
    "navigationBarTitleText": "主页",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "backgroundColor": "#FECA49",
    "color": "#D78B09",
    "selectedColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/icons/home-default.png",
        "selectedIconPath": "static/icons/home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "卡券",
        "iconPath": "static/icons/ticket-default.png",
        "selectedIconPath": "static/icons/ticket-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/icons/face-default.png",
        "selectedIconPath": "static/icons/face-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

注意：

1. 在 app.json 中配置 tabBar 时所设置的图标只支持本地资源路径。不能使用网络路径。

页面配置

每个页面可以有不同的表现，通过 pages 目录下的 .json 文件，如 logs.json ，实现页面的局部配置。但是只能设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

示例代码：

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#eee",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "我的"
}

setData渲染机制

微信小程序基本原理

setData 工作原理

小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。

而 evaluateJavascript 的执行会受很多方面的影响，数据到达视图层并不是实时的。

常见的 setData 操作错误

频繁的去setData

频繁的去 setData在我们分析过的一些案例里，部分小程序会非常频繁（毫秒级）的去setData，其导致了两个后果：Android下用户在滑动时会感觉到卡顿，操作反馈延迟严重，因为 JS 线程一直在编译执行渲染，未能及时将用户操作事件传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层；渲染有出现延时，由于 WebView 的 JS 线程一直处于忙碌状态，逻辑层到页面层的通信耗时上升，视图层收到的数据消息时距离发出时间已经过去了几百毫秒，渲染的结果并不实时；

每次setData都传递大量的新数据

每次 setData 都传递大量新数据由setData的底层实现可知，我们的数据传输实际是一次 evaluateJavascript

后台态页面进行setData

脚本过程，当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程， 后台态页面进行
setData当页面进入后台态（用户不可见），不应该继续去进行setData，后台态页面的渲染用户是无法感受的，另外后台态页面去setData也会抢占前台页面的执行。

注册页面

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

使用 Page 构造器注册页面

简单的页面可以使用 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'
  }
})

详细的参数含义和使用请参考 Page 参考文档 。

在页面中使用 behaviors

基础库 2.9.2 开始支持，低版本需做兼容处理。

页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

// my-behavior.js
module.exports = Behavior({
  data: {
    sharedText: 'This is a piece of data shared between pages.'
  },
  methods: {
    sharedMethod: function() {
      this.data.sharedText === 'This is a piece of data shared between pages.'
    }
  }
})
// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
  behaviors: [myBehavior],
  onLoad: function() {
    this.data.sharedText === 'This is a piece of data shared between pages.'
  }
})

具体用法参见 behaviors 。

使用 Component 构造器构造页面

基础库 1.6.3 开始支持，低版本需做兼容处理。

Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。

此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

代码示例：

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

这种创建方式非常类似于 自定义组件 ，可以像自定义组件一样使用 behaviors 等高级特性。

生命周期

是什么

跟vue、react框架一样，微信小程序框架也存在生命周期，实质也是一堆会在特定时期执行的函数

小程序中，生命周期主要分成了三部分：

• 应用的生命周期
• 页面的生命周期
• 组件的生命周期

应用的生命周期

小程序的生命周期函数是在app.js里面调用的，通过App(Object)函数用来注册一个小程序，指定其小程序的生命周期回调

页面的生命周期

页面生命周期函数就是当你每进入/切换到一个新的页面的时候，就会调用的生命周期函数，同样通过App(Object)函数用来注册一个页面

组件的生命周期组件的生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发，通过Component(Object)进行注册组件

有哪些

App的生命周期

页面的生命周期

组件的生命周期

执行过程

应⽤的⽣命周期执行过程

• ⽤户⾸次打开⼩程序，触发 onLaunch（全局只触发⼀次）
• ⼩程序初始化完成后，触发onShow⽅法，监听⼩程序显示
• ⼩程序从前台进⼊后台，触发 onHide⽅法
• ⼩程序从后台进⼊前台显示，触发 onShow⽅法
• ⼩程序后台运⾏⼀定时间，或系统资源占⽤过⾼，会被销毁

⻚⾯⽣命周期的执行过程

• ⼩程序注册完成后，加载⻚⾯，触发onLoad⽅法
• ⻚⾯载⼊后触发onShow⽅法，显示⻚⾯
• ⾸次显示⻚⾯，会触发onReady⽅法，渲染⻚⾯元素和样式，⼀个⻚⾯只会调⽤⼀次
• 当⼩程序后台运⾏或跳转到其他⻚⾯时，触发onHide⽅法
• 当⼩程序有后台进⼊到前台运⾏或重新进⼊⻚⾯时，触发onShow⽅法
• 当使⽤重定向⽅法 wx.redirectTo() 或关闭当前⻚返回上⼀⻚wx.navigateBack()，触发onUnload

当存在也应用生命周期和页面周期的时候，相关的执行顺序如下：

• 打开小程序：(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onRead
• 进入下一个页面：(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady
• 返回上一个页面：(curr)onUnload --> (pre)onShow
• 离开小程序：(App)onHide
• 再次进入：小程序未销毁 --> (App)onShow(执行上面的顺序），小程序被销毁，（App)onLaunch重新开始执行.

页面路由

在小程序中所有页面的路由全部由框架进行管理。

页面栈

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：

开发者可以使用 getCurrentPages() 函数获取当前页面栈。

路由方式

对于路由的触发方式以及页面生命周期函数如下：

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

注意事项

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。