12_心理咨询_微信小程序项目实战_数据交互_深入理解小程序

前言

        我们实现静态页面，只需要稍微懂一点HTML/CSS即可或者零基础都可以，但是如果想要进行数据交互，需要对小程序有一定的理解；

    小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。    

一、小程序简介

        小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

        目前有很多种小程序：微信小程序、支付宝小程序、今日头条小程序、百度小程序等，如果公司需要开发各种小程序，难道我们都需要学习一遍吗？最早之前，大家肯定要学习各种小程序，但是维护不方便；目前主流的开发小程序的技术uni-app，是用来开发安卓、ios、各种小程序；

        uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

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

        小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

        1、网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应；在小程序中，二者是分开的，分别运行在不同的线程中。

        2、网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。小程序缺少相关的DOM API和BOM API。

        3、网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端。

二、小程序代码构成

        小程序的文件无非就四种：
                .json 后缀的 JSON 配置文件
                .wxml 后缀的 WXML 模板文件
                .wxss 后缀的 WXSS 样式文件
                .js 后缀的 JS 脚本逻辑文件
        接下来我们分别看看这4种文件的作用。

2.1 JSON 配置

        JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

        我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

小程序配置 app.json

        app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

        我们之前已经做过讲解，不再多说；

工具配置 project.config.json

        通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

        考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

页面配置 page.json

        这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

        如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

JSON 语法

        JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

        JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
                数字，包含浮点数和整数
                字符串，需要包裹在双引号中
                Bool值，true 或者 false
                数组，需要包裹在方括号中 []
                对象，需要包裹在大括号中 {}
                Null
        还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

2.2 WXML 模板

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

        同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。

WXML和HTML的区别

        WXML和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：

        1、标签名字有点不一样
                往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。
        小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。

        2、多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
                在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

2.3 WXSS 样式

        WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

        1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

        2、提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

        此外 WXSS 仅支持部分 CSS 选择器；

2.4 JS 逻辑交互

        一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

三、小程序宿主环境

        我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。

3.1 渲染层和逻辑层

        首先，我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

        小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。

3.2 程序与页面

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

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

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

        这个配置说明在 QuickStart 项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

        于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

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

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

        整个小程序只有一个 App 实例，是全部页面共享的（重点）。

3.3 组件

        小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序。

        就像 HTML 的 div, p 等标签一样，在小程序里边，你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上，例如，你需要在界面上显示地图，你只需要这样写即可：

<map></map>

        如果大家想要在地图上显示当前地理位置，需要结合位置API来进行操作，还要授权；

3.4 API

        为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。

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

wxml：

<map longitude="{{longitude}}" latitude="{{latitude}}"></map>

js：

data: {
    latitude:"",
    longitude:""
},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
    var _this = this;
    // 获取用户的地理位置
    wx.getLocation({
        type: 'wgs84',
        success: (res) => {
            var latitude = res.latitude // 纬度
            var longitude = res.longitude // 经度

            _this.setData({
                latitude:latitude,
                longitude:longitude
            })
        }
    })
},

app.json:

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
    }
  }

四、小程序协同工作

        在中大型的公司里，人员的分工非常仔细，一般会有不同岗位角色的员工同时参与同一个小程序项目。为此，小程序平台设计了不同的权限管理使得项目管理者可以更加高效管理整个团队的协同工作。

        以往我们在开发完网页之后，需要把网页的代码和资源放在服务器上，让用户通过互联网来访问。在小程序的平台里，开发者完成开发之后，需要在开发者工具提交小程序的代码包，然后在小程序后台发布小程序，用户可以通过搜索或者其它入口来进入该小程序。

        如果你只是一个人开发小程序，可以暂时先跳过这部分，如果是一个团队需要先了解一些概念。

        多数情况下，一个团队多人同时参与同一个小程序项目，每个角色所承担的工作或者权限不一样，中大公司的分工更为仔细。为了更形象的表达团队不同角色的关系以及权限的管理，我们通过虚拟一个项目成员组织结构来描述日常如何协同合作完成一个小程序的发布，组织关系如图所示。

        项目管理成员负责统筹整个项目的进展和风险、把控小程序对外发布的节奏，产品组提出需求，设计组与产品讨论并对需求进行抽象，设计出可视化流程与图形，输出设计方案。开发组依据设计方案，进行程序代码的编写，代码编写完成后，产品组与设计组体验小程序的整体流程，测试组编写测试用例并对小程序进行各种边界测试。项目一般的成员构成与工作流程如图所示。

4.1 小程序成员管理

        小程序成员管理包括对小程序项目成员及体验成员的管理。

        项目成员：表示参与小程序开发、运营的成员，可登录小程序管理后台，包括运营者、开发者及数据分析者。管理员可在“成员管理”中添加、删除项目成员，并设置项目成员的角色。

        体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。管理员及项目成员均可添加、删除体验成员。

        不同项目成员拥有不同的权限，从而保证小程序开发安全有序。

权限	运营者	开发者	数据分析者
开发者权限		√
体验者权限	√	√	√
登录	√	√	√
数据分析			√
微信支付	√
推广	√
开发管理	√
开发设置		√
暂停服务	√
解除关联公众号	√
腾讯云管理		√
小程序插件	√
游戏运营管理	√

添加成员

        1、登录小程序后台，成员管理-》项目成员-》添加成员-》输入微信号-》赋予权限-》点击添加。

        2、点击编辑，可以删除项目成员、修改权限等；

        3、成员管理-》体验成员-》添加-》微信号-》添加。

五、目录结构

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

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

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

        把查看更多和右箭头的样式放到app.wxss里面，作为公共样式，其他页面都不需要在定义这两个样式了

app.wxss

/* 查看更多 */
#moreView{
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  color: #A6A6A6;
  position: relative;
}

/* 右箭头的实现原理: 一个正方形,定义上/右边框,旋转45度 */
.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #999;
  border-right: 4rpx solid #999;
  /* 旋转45度 */
  transform: rotate(45deg);
  /* 调整位置 */
  position: absolute;
  right: 30rpx;
  top: 38rpx;
}

        样式的应用机制：先从页面的wxss文件中查找，如果没有，则去app.wxss查找样式；

        一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

        注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

5.1 允许上传的文件

        在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：

        wxs
        png
        jpg
        jpeg
        gif
        svg
        json
        cer
        mp3
        aac
        m4a
        mp4
        wav
        ogg
        silk
        wasm
        br

六、逻辑层App Service

        小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

        整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

6.1 响应的数据绑定

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

login.wxml:

<!-- 在视图层要展示用户的名称,但是名称不能写死,应该是动态展示 -->
<view>
  静态数据用户名: 张三 
</view>
<!-- 动态数据: 逻辑层的数据是什么,这里跟着发生改变 -->
<!-- 
  怎么办逻辑层的数据展示在试图层(怎么把js里面的数据展示在wxml):
    1、在js的data中定义变量来存储数据
    2、在wxml中通过{{}}插值表达式展示数据
      {{}}就是用来把逻辑层的数据和视图层进行绑定
 -->
<view>
  动态数据用户名: {{userName}}
</view>

<!-- 定义一个按钮,点击按钮执行函数,在函数里面改变userName的值 -->
<button bindtap="changeValue">点击改变userName的值</button>

login.js

/**
   * 页面的初始数据
   */
  data: {
    userName:"李四"
  },

changeValue(){
    // 改变userName的值
    this.setData({
        userName:"哈哈哈哈"
    })
},

6.2 注册小程序

        小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

        逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

        每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

        app.js里面的onLaunch、onShow、onHide都是小程序生命周期函数，生命周期函数不需要人为调用，满足某种条件，会自动调用；

// app.js
App({
  onLaunch (options) {
    // 生命周期回调——监听小程序初始化。
    console.log("监听小程序初始化 - 小程序启动了...");
  },
  onShow (options) {
    // 生命周期回调——监听小程序启动或切前台
    console.log("小程序切换到前台");
  },
  onHide () {
    // 生命周期回调——监听小程序切后台。
    console.log("小程序切换到后台");
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: {
    userInfo: null
  }
})

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

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

6.3 注册页面

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

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

6.4 页面的生命周期

6.5 小程序生命周期和页面生命周期

        通俗的讲，生命周期就是指一个对象的生老病死。 从软件的角度来看，生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。

小程序生命周期

        用户首次打开小程序，触发 onLaunch（全局只触发一次）。

        小程序初始化完成后，触发onShow方法，监听小程序显示。

        小程序从前台进入后台，触发 onHide方法。

        小程序从后台进入前台显示，触发 onShow方法。

        小程序后台运行一定时间，或系统资源占用过高，会被销毁。

        前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

 页面生命周期

        小程序注册完成后，加载页面，触发onLoad方法。

        页面载入后触发onShow方法，显示页面。

        首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

        当小程序后台运行或跳转到其他页面时，触发onHide方法。

        当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。

        当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。

应用生命周期影响页面生命周期

        小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。

        当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。

        当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

6.6 页面路由

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

页面栈

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

路由方式	页面栈表现
初始化	新页面入栈
打开新页面	新页面入栈
页面重定向	当前页面出栈，新页面入栈
页面返回	页面不断出栈，直到目标返回页
Tab 切换	页面全部出栈，只留下新的 Tab 页面
重加载	页面全部出栈，只留下新的页面

路由方式

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

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		onLoad, onShow
打开新页面	调用 API wx.navigateTo 使用组件 <navigator open-type="navigateTo"/>	onHide	onLoad, onShow
页面重定向	调用 API wx.redirectTo使用组件<navigator open-type="redirectTo"/>	onUnload	onLoad, onShow
页面返回	调用 API wx.navigateBack 使用组件<navigator open-type="navigateBack">用户按左上角返回按钮	onUnload	onShow
Tab 切换	调用 API wx.switchTab 使用组件<navigator open-type="switchTab"/>用户切换 Tab		各种情况请参考下表
重启动	调用 API wx.reLaunch使用组件<navigator open-type="reLaunch"/>	onUnload	onLoad, onShow

七、视图层 View

        框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

        将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

        WXML(WeiXin Markup language) 用于描述页面的结构。

        WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

        WXSS(WeiXin Style Sheet) 用于描述页面的样式。

        组件(Component)是视图的基本组成单元。

7.1 WXML

        WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
    
        暂且不详解，我们在框架-》WXML语法中讲解。

7.2 WXSS

        WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

        WXSS 用来决定 WXML 的组件应该怎么显示。

        为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

        与 CSS 相比，WXSS 扩展的特性有：
                尺寸单位
                样式导入

尺寸单位

        rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

        建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

        注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

        使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

        具体用法：在讲解模板的时候使用；

选择器

        目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

全局样式与局部样式

        定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

7.3 事件系统

什么是事件

        事件是视图层到逻辑层的通讯方式。
        事件可以将用户的行为反馈到逻辑层进行处理。
        事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
        事件对象可以携带额外信息，如 id, dataset, touches。

事件的使用方式

        在组件中绑定一个事件处理函数。
    
        如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="demoView" data-xx="Hello" bindtap="tapName"> Click me! </view>

        在相应的Page定义中写上相应的事件处理函数，参数是event。

tapName: function(event) {
    console.log(event)
},

八、小程序的运行环境

8.1 小程序运行机制

小程序的生命周期

        小程序从启动到最终被销毁，会经历很多不同的状态，小程序在不同状态下会有不同的表现。

 小程序启动

        从用户认知的角度看，广义的小程序启动可以分为两种情况，一种是冷启动，一种是热启动。

        冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
    
        热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。

        从小程序生命周期的角度来看，我们一般讲的「启动」专指冷启动，热启动一般被称为后台切前台。

前台与后台

        小程序启动后，界面被展示给用户，此时小程序处于「前台」状态。

        当用户「关闭」小程序时，小程序并没有真正被关闭，而是进入了「后台」状态，此时小程序还可以短暂运行一小段时间，但部分 API 的使用会收到限制。切后台的方式包括但不限于以下几种：
                点击右上角胶囊按钮离开小程序
                iOS 从屏幕左侧右滑离开小程序
                安卓点击返回键离开小程序
                小程序前台运行时直接把微信切后台（手势或 Home 键）
                小程序前台运行时直接锁屏
        当用户再次进入微信并打开小程序，小程序又会重新进入「前台」状态。

挂起

        小程序进入「后台」状态一段时间后（目前是 5 秒），微信会停止小程序 JS 线程的执行，小程序进入「挂起」状态。此时小程序的内存状态会被保留，但开发者代码执行会停止，事件和接口回调会在小程序再次进入「前台」时触发。

        当开发者使用了后台音乐播放、后台地理位置等能力时，小程序可以在「后台」持续运行，不会进入到「挂起」状态。

小程序销毁

        如果用户很久没有使用小程序，或者系统资源紧张，小程序会被「销毁」，即完全终止运行。具体而言包括以下几种情形：
        当小程序进入后台并被「挂起」后，如果很长时间（目前是 30 分钟）都未再次进入前台，小程序会被销毁。
        当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。

8.2 小程序更新机制

未启动时更新

        开发者在管理后台发布新版本的小程序之后，如果某个用户本地有小程序的历史版本，此时打开的可能还是旧版本。微信客户端会有若干个时机去检查本地缓存的小程序有没有更新版本，如果有则会静默更新到新版本。总的来说，开发者在后台发布新版本之后，无法立刻影响到所有现网用户，但最差情况下，也在发布之后 24 小时之内下发新版本信息到用户。用户下次打开时会先更新最新版本再打开。

启动时更新

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

        如果需要马上应用最新版本，可以使用 wx.getUpdateManager API 进行处理。

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})