《一》微信小程序基础_编译”、“预览”、“真机调试”

小程序：Mini Program，是一种不需要下载安装即可使用的应用。

相比于 H5、APP，小程序的优势：

1. 相比于 H5：小程序的体验要好很多。
2. 相比于 APP：小程序使用起来更加方便，不需要在应用商店下载安装，甚至注册登录等操作；传统的 APP 更新需要先打包，上架到应用商店之后需要经过审核，但是小程序可以在 APP 不更新的情况下，动态地为自己的应用添加新的功能。

使用步骤：

申请账号：

开发小程序的第一步，需要拥有一个小程序账号，通过这个账号就可以管理小程序。

1. 访问微信公众平台 https://mp.weixin.qq.com/ 点击立即注册进入小程序注册页，根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。
   

2. 在微信公众平台，就可以管理小程序的权限，查看数据报表，发布小程序等操作。

   小程序的 AppID 相当于小程序平台的一个身份证，会在很多地方用到。

   

安装开发工具：

前往https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html开发者工具下载页面，根据自己的操作系统下载对于的安装包进行安装。

新建项目：

1. 新建一个空白文件夹。

2. 打开微信开发者工具 --> 选择新建的目录（会自动获取项目名称）–> 填入 appId --> 选择不使用云服务 --> 点击新建。
   

3. 即可新建一个带有默认模板的项目。
   

4. 编译、预览、真机调试：点击微信开发者工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现；也可以点击预览按钮，通过微信的扫一扫在真机上体验小程序；也可以点击真机调试按钮，通过微信的扫一扫在真机上调试小程序。

   编译：可以在微信开发者工具的模拟器上看到小程序的效果。
   预览：可以在手机上看到小程序的效果。如果打开调试模式，可以在手机上看到调试信息。
   真机调试：可以在手机上看到小程序的效果。可以在微信开发者工具上看到调试信息。

5. 发布项目：点击微信开发者工具的上传即可。
   

目录结构：

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

1. 一个小程序主体部分由三个文件组成，必须放在项目的根目录下：app.js 小程序全局逻辑、app.json 小程序公共配置、app.wxss 小程序公共样式表。
2. 一个小程序页面由四个具有相同的路径与文件名的文件组成，分别是：.wxml 页面结构、.json 页面配置、.js 页面逻辑、.wxss 页面样式表。

WXML 模板：

WXML 充当的是类似 HTML 的角色。

WXSS 样式：

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

JS 逻辑交互：

通过 JS 来实现业务逻辑。

在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。

JSON 配置：

通过 JSON 来进行静态配置。

小程序的 MVVM 架构：

MVVM 架构的优点：

1. DOM Listeners：ViewModal 层可以将 DOM 的监听绑定到 Model 层。
2. Data Bindings：ViewModal 层可以将数据的变化响应式地反应到 View 层。

小程序的双线程模型：

目前，在 WebView 渲染外，还新增了一种 skyline 渲染引擎，更高效，可查看文档。

1. WAML 模块和 WXSS 样式运行于渲染层，渲染层使用 WebView 渲染。

   一个页面对应一个 WebView。

2. JS 脚本运行于逻辑层，逻辑层使用 JsCoew 运行 JS 脚本。
3. 这两个线程经由 Native 微信客户端进行中转交互。

为什么微信小程序要采用双线程模型？

因为 WebView 的 JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint 和 Composite 都是在同一个线程上。那么如果在 WebView 上执行过多的 JS 逻辑可能会阻塞渲染，导致页面卡顿。因此，微信小程序在考虑了性能与安全的前提下，采用了双线程模型的架构。

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

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

1. 网页开发渲染线程和脚本线程是互斥的；而在小程序中小程序的逻辑层和渲染层是分开的，可以同时运行。
2. 网页开发者可以使用到各种浏览器暴露出来的 DOM API 进行 DOM 操作，而小程序的逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的 DOM API 和 BOM API；同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。
3. 网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对 Safari、Chrome 以及 iOS、Android 系统中的各式 WebView ；而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具。

   小程序中三大运行环境也是有所区别的。

4. 网页开发者在开发网页的时候，只需要用到浏览器，并且搭配上一些辅助工具或者编辑器即可；小程序的开发则有所不同，需要经过申请小程序账号、安装小程序开发工具、配置项目等过程方可完成。

基础库：

基础库存在于微信客户端中，是小程序运行的必要环境，封装了微信和手机的能力提供给小程序使用。

微信客户端是微信小程序的宿主环境，微信小程序运行在微信客户端上。
基础库和微信客户端一样，有其自己的版本，每个版本都会有一些新特性。微信官方为了使得基础库的版本和微信客户端的版本同步，采取了一个微信客户端版本对应一个基础库版本的方式。

基础库版本：小程序基础库的版本。
客户端版本：微信 APP 的版本。
小程序版本：小程序发布在线上的版本。

小程序是通过基础库运行在手机及微信上的。

低版本兼容：

版本号比较：

开发者可以在小程序中通过调用 wx.getSystemInfo 或者 wx.getSystemInfoSync 获取到当前小程序运行的基础库的版本号。通过版本号比较的方式进行运行低版本兼容逻辑。这种方式适用于所有情况。

微信客户端和小程序基础库的版本号风格为 Major.Minor.Patch（主版本号 . 次版本号 . 修订版本号）。

function compareVersion(v1, v2) {
  v1 = v1.split('.')
  v2 = v2.split('.')
  const len = Math.max(v1.length, v2.length)

  while (v1.length < len) {
    v1.push('0')
  }
  while (v2.length < len) {
    v2.push('0')
  }

  for (let i = 0; i < len; i++) {
    const num1 = parseInt(v1[i])
    const num2 = parseInt(v2[i])

    if (num1 > num2) {
      return 1
    } else if (num1 < num2) {
      return -1
    }
  }

  return 0
}


const version = wx.getSystemInfoSync().SDKVersion
if (compareVersion(version, '1.1.0') >= 0) {
  wx.openBluetoothAdapter()
} else {
  wx.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

API 存在判断：

对于新增的 API，可以通过判断该 API 是否存在来判断是否支持用户使用的基础库版本。

if (wx.openBluetoothAdapter) {
  wx.openBluetoothAdapter()
} else {
  wx.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  })
}
1
2
3
4
5
6
7
8

wx.canIUse：

可以通过 wx.canIUse 来判断是否可以在该基础库版本下直接使用。

1. API 参数或返回值：

   wx.showModal({
     success: function(res) {
       if (wx.canIUse('showModal.success.cancel')) {
         console.log(res.cancel)
       }
     }
   })
   1
   2
   3
   4
   5
   6
   7

2. 组件：

   Page({
     data: {
       canIUse: wx.canIUse('cover-view')
     }
   })
   
   <video controls="{{!canIUse}}">
     <cover-view wx:if="{{canIUse}}">play</cover-view>
   </video>
   1
   2
   3
   4
   5
   6
   7
   8
   9

设置最低基础库版本：

开发者可以登录小程序管理后台，进入「设置 - 基本设置 - 基础库最低版本设置」进行配置。设置后，若用户基础库版本低于设置值，则无法正常打开小程序，并提示用户更新客户端版本。

小程序的运行机制和更新机制：

1. 微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
2. 紧接着通过 app.json 的 pages 字段就可以知道当前小程序的所有页面路径，而写在 pages 字段的第一个页面就是这个小程序的首页，于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

微信客户端会先根据页面的 JSON 配置生成一个界面，紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式，最后客户端会装载 JS。

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

运行机制：

小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。

1. 热启动：假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台的小程序切换到前台。

   当用户点击右上角退出按钮，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是从前台进入了后台。
   当再次打开小程序，并不是进入主页面，而是进入离开小程序时缓存的页面，又会从后台进入了前台。

2. 冷启动：指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

   只有当小程序进入后台一定时间，或者系统资源占用过高，小程序才会被真正的销毁。

更新机制：

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

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

const updateManager = wx.getUpdateManager()
// 新版本下载成功后回调
updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success:  res => {
      if (res.confirm) {
        // 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14