1, 小程序 - 起步

1.1, 什么是小程序？

小程序是什么呢？

• 小程序（Mini Program）是一种不需要下载安装即可使用的应用，它实现了“触手可及”的梦想，使用起来方便快捷，用完即走
• 事实上，目前小程序在我们生活中已经随处可见（特别是这次疫情的推动，不管是什么岗位、什么年龄阶段的人，都哪都需要打开健康码）
• 最初我们提到小程序时，往往指的是 微信小程序
• 但是目前小程序技术本身已经被各个平台所实现和支持
• 目前常见的小程序: 微信小程序、支付宝小程序、淘宝小程序、抖音小程序、头条小程序、QQ小程序、美团小程序等

各个平台小程序的时间线

• 2017年1月 微信小程序上线，依附于微信App
• 2018年7月 百度小程序上线，依附于百度App
• 2018年9月 支付宝程序线，依附于支付宝App
• 2018年10月 抖音小程序上线，依附于抖音App
• 2018年11月 头条小程序上线，依附于头条App
• 2019年5月 QQ小程序上线，依附于QQApp
• 2019年10月 美团小程序上线，依附于美团App

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

• 网页运行在浏览器环境中, 小程序运行在微信环境中
• 由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API，但是，小程序中可以调用微信环境提供的各种 API，如：地理定位，扫码，支付...
• 网页的开发模式：浏览器 + 代码编辑器
• 小程序有自己的一套标准开发模式：申请小程序开发账号 + 安装小程序开发者工具 + 创建和配置小程序项目

开发小程序的技术选型

• 原生小程序开发
  • 微信小程序：https://developers.weixin.qq.com/miniprogram/dev/framework/
  • 微信小程序主要技术包括：WXML、WXSS、JavaScript；
  • 支付宝小程序：https://opendocs.alipay.com/mini/developer
  • 支付宝主要技术包括：AXML、ACSS、JavaScript；
• 选择框架开发小程序：
  • mpvue是一个使用Vue开发小程序的前端框架，也是 支持 微信小程序、百度智能小程序，头条小程序 和 支付宝小程序
  • mpvue框架在2018年之后就不再维护和更新了，所以目前已经被放弃
  • WePY (发音: /'wepi/)是由腾讯开源的，一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序
  • WePY框架目前维护的也较少，在前两年还有挺多的项目在使用，不推荐使用
  • uni-app由DCloud团队开发和维护,是一个使用 Vue 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
  • uni-app目前是很多公司的技术选型，特别是希望适配移动端App的公司
  • taro，由京东团队开发和维护，是一个开放式 跨端 跨框架 解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用
  • taro因为本身支持React、Vue的选择，给了我们更加灵活的选择空间
  • 特别是在Taro3.x之后，支持Vue3、React Hook写法等

uni-app和taro开发原生App

• 无论是适配原生小程序还是原生App，都有较多的适配问题，所以你还是需要多了解原生的一些开发知识
• 产品使用体验整体相较于原生App差很多
• 也有其他的技术选项来开发原生App：ReactNative、Flutter

开发小程序需要掌握的预备知识

• 页面布局：WXML，类似HTML
• 页面样式：WXSS，几乎就是CSS(某些不支持，某些进行了增强，但是基本是一致的)
• 页面脚本：JavaScript+WXS(WeixinScript)
• 如果你之前已经掌握了Vue或者React等框架开发，那么学习小程序是更简单的，因为里面的核心思想都是一致的（比如组件化开发、数据响应式、mustache语法、事件绑定等等）

体验小程序

2, 第一个小程序

2.1, 注册小程序开发帐号

1. 点击注册按钮

• 使用浏览器打开 https://mp.weixin.qq.com/ 网址，点击右上角的“立即注册”即可进入到小程序开发账号的注册流程，主要流程截图如下：

2. 选择注册账号的类型

3. 填写账号信息

4. 提示邮箱激活

5. 点击链接激活账号

6. 选择主体类型

7. 主体信息登记

8. 获取小程序的 AppID

2.2, 安装开发者工具

小程序开发工具

• 微信开发者工具：官方提供的开发工具，必须下载、安装；
• VSCode：很多人比较习惯使用VSCode来编写代码；

使用VSCode开发推荐一些插件

微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下：

• 快速创建小程序项目
• 代码的查看和编辑
• 对小程序功能进行调试
• 小程序的预览和发布

1. 下载

• 推荐下载和安装最新的稳定版（Stable Build）的微信开发者工具
• 下载页面的链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2. 安装

• 傻瓜式安装，下一步，下一步，下一步...

3. 扫码登录

4. 设置外观和代理

5. 创建小程序项目

6. 填写项目信息

7. 开发工具的实例（演示）

• 编译的作用
• 在真机上预览项目效果
• 控制台的使用

2.3, 小程序的架构模型

什么是宿主环境

• 宿主环境（host environment）指的是程序运行所必须的依赖环境。例如：
• Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的，所以，Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！

小程序的宿主环境是微信客户端

• 宿主环境执行小程序的各种文件：wxml文件、wxss文件、js文件

• 小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位、etc…

小程序宿主环境包含的内容

• 通信模型
• 运行机制
• 组件
• API

双线程通信模型

• 当小程序基于 WebView 环境下时，WebView 的 JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint (Composite) 都发生在同一线程，在 WebView 上执行过多的 JS 逻辑可能阻塞渲染，导致界面卡顿。
• 以此为前提，小程序同时考虑了性能与安全，采用了目前称为「双线程模型」的架构。
• WXML模块和WXSS样式运行于 渲染层，渲染层使用WebView线程渲染（一个程序有多个页面，会使用多个WebView的线程）。
• JS脚本（app.js/home.js等）运行于 逻辑层，逻辑层使用JsCore运行JS脚本
• 这两个线程都会经由微信客户端（Native）进行中转交互

小程序中的通信模型分为两部分

• 渲染层和逻辑层之间的通信,由微信客户端进行转发
• 逻辑层和第三方服务器之间的通信,由微信客户端进行转发