《一》微信小程序简介

微信开放文档：https://developers.weixin.qq.com/miniprogram/dev/framework/。

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

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

1. 网页开发渲染线程和脚本线程是互斥的；而在小程序中，小程序的逻辑层和渲染层是分开的，小程序的渲染层和逻辑层分别由2个线程管理，其中 WXML 模板和 WXSS 样式工作在渲染层，渲染层的界面使用了WebView 进行渲染，JS 脚本工作在逻辑层，逻辑层采用JsCore线程运行JS脚本。

   一个小程序存在多个界面，所以渲染层存在多个WebView线程。
   这两个线程的通信会经由微信客户端，做中转，逻辑层发送网络请求也经由Native转发。
   

2. 网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作；而小程序的逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的 DOM API 和 BOM API。这一区别导致前端开发非常熟悉的一些库，例如 jQuery 等，在小程序中是无法运行的，同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

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

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

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

使用步骤：

申请账号：

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

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

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

   小程序的 AppID 相当于小程序平台的一个身份证，会在很多地方用到。
   微信小程序必须填写服务器域名，否则将无法访问。服务器域名不支持 http。调试情况下不检测域名合法性。

   

安装开发工具：

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

新建项目：

1. 新建一个空白文件夹。
2. 打开微信开发者工具 --> 选择新建的目录（会自动获取项目名称）–> 填入 appId --> 选择不使用云服务 --> 点击新建。
   
3. 即可新建一个带有默认模板的项目。
   
4. 编译、预览：点击微信开发者工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现；也可以点击预览按钮，通过微信的扫一扫在真机上体验小程序。
5. 发布项目：点击微信开发者工具的上传即可。
   

目录结构：

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

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

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

小程序包含一个描述整体程序的 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 来进行静态配置。

1. 小程序配置 app.json：app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
2. 页面配置 page.json：可以让开发者独立定义每个页面的一些属性。
3. 工具配置 project.config.json：小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，在工具上做的任何配置都会写入到这个文件，当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会恢复到当时开发项目时的个性化配置。

基础库：

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

基础库和微信客户端一样，有其自己的版本，每个版本都会有一些新特性。微信官方为了使得基础库的版本和微信客户端的版本同步，采取了一个微信客户端版本对应一个基础库版本的方式。

基础库版本：小程序基础库的版本。
客户端版本：微信 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: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  })
}

API 存在判断：

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

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

wx.canIUse：

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

1. API 参数或返回值：

   wx.showModal({
     success: function(res) {
       if (wx.canIUse('showModal.success.cancel')) {
         console.log(res.cancel)
       }
     }
   })
   

2. 组件：

   Page({
     data: {
       canIUse: wx.canIUse('cover-view')
     }
   })
   
   
   

设置最低基础库版本：

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

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

运行机制：

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

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

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

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

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

更新机制：

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

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

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