小李移动开发成长记 —— 大话小程序

做传统网站前端开发的同学初次接触小程序，会有许多困惑：为什么没有div，view 是什么、怎么没有 ajax，wx.request 为什么是回调方式、预览怎么要用小程序开发者工具、APPID有什么用、安装npm包怎么还要构建、tabBar 是什么、语法怎么和vue很像但是有的部分又不同、@import 用法怎么和 css 中不同...

本篇通过微信小程序（发布较早，影响力较大）来介绍小程序，帮助你快速认识小程序，并解决以上困惑。主要介绍：

小程序和网站的差异
小程序和 vue 语法差异
小程序通信模型和运行机制
三方小程序开发流程
如何新建项目，全局和局部配置是什么
小程序基本语法：wxsl、wxss、js(wxs)
小程序API的Promise化
应用生命周期和页面生命周期
小程序组件和自定义组件
小程序路由和状态管理
分包是什么，有什么作用

背景

小李虽然会一些react、vue、js，但是移动端开发做的比较少，几乎不会小程序开发。

下一阶段的任务是移动端开发，涉及H5、小程序、公司内部自建的移动端的框架、调试工具、TS等。

如何快速上手这部分工作，经过三分钟的思考，决定出大致要加强的方向：

小程序：有许多小程序的开发
js 基础：代码要写的优雅，比如许多 if 不是一个好习惯；不要看到别人的 Promise 就感觉生疏，别人的解构写法是否有问题也能看出来
react：项目技术栈用到 react
加强TS：许多代码有TS，否则看不懂，修改代码也不能通过编译
移动端开发流程：熟悉公司移动开发流程，比如模拟器、云真机、实体机、公司的抓包工具
移动端玩法：比如调用 jsAPI（getLocation）需要同时开启“系统地理位置、系统授权宿主（支付宝/小程序）地理位置权限、宿主给小程序地理位置权限”，否则可能会弹出”地理位置权限申请“的弹框；悬浮球的玩法；半屏展示；全屏展示页面（即webview 扩展到状态栏）

认识小程序

小程序 VS 网站

小程序类似网站，只是网站在浏览器中打开，而小程序通过小程序平台（微信、支付宝）打开。

两者相似点：

跨平台：微信小程序在微信中打开，支付宝小程序在支付宝中打开；网站在浏览器中打开
无需下载和安装
实时更新：发布后，用户就会自动获取最新版本

两者不同点：

运行环境：小程序的宿主是小程序平台，例如微信、支付宝；网站运行在浏览器中；
功能和权限：小程序因为嵌在超级应用内（微信、支付宝），可以调用一些原生功能，比如支付、地理位置、摄像头，部分功能需要用户授权；网站受限于浏览器提供的API，总体上授权会更有限；
体验和性能：小程序在体验和性能上更接近原生应用，响应更快、UI更流畅
生态与流量：借助超级应用的平台生态，容易获取用户。比如微信小程序可以通过微信群、朋友圈等社交渠道快速传播；网站通过搜索引擎优化（SEO）、广告，相对小程序，推广难度可能大一些
开发语言和工具：使用特定的框架和工具集，例如微信小程序使用WXML、WXSS、JS；网站使用标准的HTML、CSS、JS以及各种前端框架和库（React、Vue）
开发模式：网站是浏览器+代码编辑器；微信小程序：申请小程序开发账号、安装小程序开发者工具、创建和配置小程序项目
代码托管：网站本地开发完提交到代码托管平台（github），之后会从托管平台部署到实际运行的服务器上；小程序代码在本地编写和调试后，直接上传到对应的小程序平台，这里涉及使用官方提供的开发者工具上传代码，平台审核，审核后发布；小程序平台负责代码的托管和版本控制。

微信小程序 VS Vue

有人说小程序比 Vue 简单多了。我们来对比两者异同，会发现小程序在语法上有许多和vue相似。

相同点：

组件开发：微信小程序使用 wxml定义组件结构、wxss 定义样式、js 定义逻辑、json 用于配置；Vue 使用 .vue 进行单文件组件开发
数据绑定：微信小程序通过 {{}}进行数据绑定，类似 vue.js 模板语法
事件处理：微信小程序使用 bingdtap 或 catchtap 等事件绑定；vue 使用 v-on(或@) 进行事件绑定
条件渲染和列表渲染：小程序使用 wx:if 和 wx:for 指令；vue 使用 v-if 和 v-for 指令

不同点：

运行环境：微信小程序运行在微信的容器环境中，只能在微信中使用，依赖于微信的API和平台；vue 运行在浏览器和node.js中。
文件结构：微信小程序，每个组件由4个文件组成（wxml, wxss, js, json）；vue 在一个 .vue 文件中
样式处理：微信小程序使用wxss 进行定义，类似CSS；vue 使用标准的CSS
框架特征：微信小程序：提供了一些特定微信环境的API，例如访问微信支付；Vue专注于UI层，提供了丰富的生态系统
生态系统和扩展：微信小程序，由微信官方提供丰富的API，社区贡献组件库和开发工具；Vue 有强大的生态系统，包括大量的第三方插件、组件库和开发工具

宿主环境

手机微信是微信小程序的宿主环境，支付宝是支付宝小程序的宿主环境

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

通过宿主环境，小程序提供的能力包含：通信模型、运行机制、组件和API

通信模型

小程序通信主体包含：渲染层和逻辑层

wxml(类似 html) 和 wxss（类似 css）工作在渲染层
js脚本工作在逻辑层

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

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

运行机制

小程序启动过程：

小程序代码下载到本地：用户首次打开或更新小程序时，微信客户端会从远程服务器下载小程序的代码包。这个过程会根据网络状况和代码包大小有所不同，微信平台会对代码包进行一定的优化和压缩处理以加快下载速度。
解析 app.json 全局配置文件：下载完成后，微信客户端会首先解析app.json文件，这个文件包含了小程序的全局配置信息，如页面路径、窗口表现、网络超时时间、底部tab等。这些配置决定了小程序的基本框架和表现形式。
执行 app.js，小程序入口文件：接下来，微信客户端会执行app.js文件，这是小程序的逻辑层入口。在app.js中，会调用App函数来创建小程序实例，并可以在这个函数中定义全局的数据和方法，进行一些初始化操作，如注册全局的生命周期回调函数（如onLaunch, onShow, onHide等）。
渲染小程序首页：根据app.json中配置的首页路径，微信客户端会加载首页的.wxml（结构）、.wxss（样式）和.js（逻辑）文件，开始渲染小程序的首页。逻辑层会通过Page函数创建页面实例，并执行页面的生命周期函数，如onLoad，进行数据初始化、网络请求等操作。随后，渲染层依据逻辑层提供的数据渲染页面内容。
小程序启动完成：当首页页面渲染完成并呈现给用户时，标志着小程序的启动过程结束，此时用户可以开始与小程序进行交互。同时，小程序的不同页面之间可以通过页面路由进行跳转，逻辑层与渲染层继续根据用户的操作进行数据更新和界面重绘。

Tip：上面是冷启动，对于已经打开过的小程序，再次进入可能就会有热启动的情况。比如代码下载可能就会被跳过

页面渲染过程：

加载解析页面的 .json 配置文件：当需要渲染某个页面时，微信小程序框架首先会加载该页面对应的.json配置文件。这个文件定义了页面的窗口样式、导航栏样式等页面级的配置信息，这些配置会影响页面的外观和行为。
加载页面的 .wxml 和 .wxss 样式：紧接着，框架会加载页面的结构文件.wxml和样式文件.wxss。.wxml文件定义了页面的结构和布局，类似于HTML；而.wxss文件则是用来控制页面元素样式的，类似于CSS。这两个文件共同决定了页面的外观。
执行页面的 .js 文件，调用 Page() 创建页面实例：之后，框架会执行页面的逻辑文件.js。在这个文件中，通过调用Page函数来创建页面实例，并可以在其中定义页面的初始数据、生命周期函数（如onLoad、onShow、onHide等）、事件处理函数等。页面的初始化数据和逻辑处理都在这个阶段完成。
页面渲染完成：当页面的结构、样式和数据都准备就绪后，微信小程序的渲染引擎会根据.wxml和.wxss以及页面实例中的数据来渲染页面。这个过程包括解析WXML模板，应用WXSS样式，绑定数据到模板，最终生成用户可见的界面。页面渲染完成后，用户就可以看到并开始与这个页面进行交互了。

API

小程序官方把API分三类：

事件监听API：以 on 开头，监听某些事件。例如 wx.onWindowResize(callback)（小程序中没有windown）监听窗口尺寸变化
同步API：以Sync结尾的都是同步API，通过函数直接获取，如果执行出错会抛出异常。例如wx.setStorageSync('key', 'value') 向本地缓存写入数据
异步API：类似$.ajax，需要通过 success、fail、cpmplete 接收调用的结果，例如 wx.request 发起网络数据请求，通过 success 接收调用的结果

小程序研发流程

小程序开发流程不同于传统网站。

传统网站开发：vscode编写代码，浏览器预览效果，git提交到代码。

小程序开发步骤大致如下（以微信小程序三方开发为例）：

申请小程序账号，获得 AppId（你要创建的小程序唯一标识）
通过小程序开发者工具创建项目
通过小程序开发者工具编译预览效果
通过小程序开发者工具把代码上传到微信平台
选择一个开发版本作为体验版
体验完成申请发布
发布到微信平台

Tip：一方开发通常指的是由小程序的所有者的开发，也是官方开发; 三方开发，是指由第三方开发者为小程序提供功能或服务;

小程序账号和APPID

注册小程序账号，主要是为了获得APPID。

APPID 是小程序唯一标识，用于在微信上识别和区分不同的小程序，在注册过程中，需要填写一些基本信息，如小程序名称、小程序介绍、小程序类别等。完成这些，微信会为你生成一个APPID。APPID将用于开发、发布和运营小程序各种操作，包含开发工具的配置等

大致流程如下：

点击注册：进入微信官网（https://mp.weixin.qq.com/cgi-bin/wx），点击“注册”
注册小程序：包含账号信息（邮箱、密码...）、邮箱激活、信息登记(注册国家、主体类型-个人：身份证姓名、身份证、手机、短信)

注册后就可以登录到小程序后台管理界面，在“开发”导航中就能找到APPID。

小程序开发工具

小程序你不用特定工具怎么预览效果？浏览器又不认识小程序

微信开发者工具提供如下功能：

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

找到稳定版下载安装成功，在桌面会看到一个二维码，用自己的微信扫一扫，登录后就能打开“微信开发者工具”。

创建项目：可以指定项目所在目录、后端服务是否选择云开发、语言有javascript或 TypeScript。

小程序工具主界面分五个部分：

菜单栏：如帮助(里面有“开发者文档”)、设置、项目、工具（有构建 npm、插件）
工具栏：模拟器、编辑器、调试器、编译、真机调试
模拟器：模拟微信（底部有：页面路径、页面参数）
代码编辑区
调试区：console控制台、Network、Storage

自定义编译模式

通过小程序工具，普通编译会从小程序首页开始，而平时我们修改某页面逻辑，保存后想立刻看到效果，而不是又从首页切换好几次才到该页面。这是，我们可以使用“自定义编译条件”。

点击“普通编译”下的“添加编译模式”，选择要启动的页面，还可以传参，新建即可。下次就选择这个页面编译即可。

一个页面可以创建多个编译页面，比如有参的、无参的...

协同工作

小程序通常不是一个人完成的。

微信小程序成员管理(三方)体现在管理员对小程序项目成员及体验成员的管理

项目成员：参与开发、运营，可登录小程序后台，管理员可添加、删除成员，并设置成员角色
体验成员：参与小程序内测体验、可使用体验版小程序，不属于项目成员，管理员及项目成员可以添加、删除体验成员

开发者的权限有：

开发者权限
体验者权限
登录权限：登录小程序后台，无需管理员确认
开发设置：设置小程序服务器域名、消息推送及扫描普通二维码打开小程序

Tip：之所以有这些角色，因为小程序的开发流程不同于网站开发，小程序的代码由小程序平台管理。

小程序版本

小程序发布流程大致如下：上传代码到开发版本，多次迭代开发版本，根据开发版本生成体验版本，验证通过后提交审核，审核通过后发布。

开发版本：使用开发者工具，可将代码上传到开发版本中。开发版本只保留每人最新的一份上传的代码。点击提交审核，可以将代码提交审核。开发版本删除，不影响线上版本和审核中的版本。
体验版本：选择某个开发版本作为体验版
审核中版本：只能有一份代码处于审核中。有审核结果后可以发布到线上，也可以直接重新提交审核，覆盖原审核版本
线上版本：线上所有用户使用的代码版本

Tip：微信小程序和支付宝小程序都提供了多版本开发和管理功能。体验版只能同时根据其中一个开发版本生成。

推广和运营数据

发布后就需要推广

推广可以基于微信码和小程序码。

小程序码的优势：

样式上更具有辨识度
-更加清晰树立小程序品牌形象

小程序可以通过后台查看运营数据，也可以使用“小程序数据助手”（微信搜索）查看已发布小程序相关数据：访问分析、实时同级、用户画像...

小程序也可以使用第三方埋点工具，例如：友盟友、神策数据...

小程序对 npm 包支持和限制

微信小程序支持 NPM 包，但小程序能用的 Npm 包却不多。

下面是一些限制和注意事项：

API 限制：不支持依赖 node.js 内置库、浏览器内置对象、C++插件的 npm 包
包大小限制：微信小程序的包大小有限制，单个包不能超过 2 MB，总体积不能超过 20 MB。因此，在使用 NPM 包时需要注意其体积，避免超出限制。
构建工具：NPM 包的使用需要通过微信开发者工具进行构建和处理，确保在开发者工具中启用了 "构建 NPM" 功能。

新建项目和配置

项目基本结构

创建一个微信小程序项目，目录结构如下：

- pages: 存放所有小程序的页面
- utils：存放工具性质的模块
- app.js：小程序入口文件
- app.json：小程序全局配置文件。包含小程序所有页面路径、窗口外观、界面表现（所有页面的背景色、文字颜色、小程序组件所使用的样式版本）、底部tab
- project.config.json：项目配置文件。记录我们对小程序开发工具做的个性化配置，如项目名、小程序账号ID、编译相关配置（ES6转ES5、上传代码时自动压缩混淆、上传代码时样式自动补全）
- sitemap.json：配置小程序及其页面是否允许被微信索引。微信现已开放了小程序内搜索，类似网页的SEO。

小程序官方建议所有小程序页面都放在 pages 目录中，以单独文件夹存放：

- pages
  - index
    - index.js 页面脚本
    - index.wxml 页面结构
    - index.wxss 页面样式
    - index.json 当前页面的配置，如窗口的外观
  - pageb
    - pageb.js
    - pageb.wxml
    - pageb.wxss
    - pageb.json

Tip：小程序中有4种json配置文件（具体作用后面会介绍）

项目根目录中的 app.json
项目根目录中的 project.config.json
项目根目录中的 sitemap.json
每个页面文件夹中的 json

新建小程序页面

在 app.json->pages 中新增页面存放路径，ctrl+s保存，工具会自动创建对应页面文件。

{
  pages: [
    "pages/index/index",
    "pages/pageb/pageb",
  + "pages/pageb/pagec"
  ]
}

修改项目首页

只需调整 app.json->pages 数组中页面路径的顺序，小程序会把排在第一位的页面，当做项目首页渲染。

全局配置

小程序根目录下的 app.json 是小程序全局配置文件。

常用配置：

pages 记录当前小程序所有页面的存放路径
window 全局设置小程序窗口外观
tabBar 设置小程序底部的 tabBar 效果
style 是否启用新版的组件样式

示例：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "小程序示例",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/icon_home.png",
        "selectedIconPath": "images/icon_home_active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/icon_logs.png",
        "selectedIconPath": "images/icon_logs_active.png"
      }
    ]
  },
  "style": "v2"
}

窗口

小程序窗口组成部分（从上到下）：

navigationBar 导航栏区域：包含时间、电量、微信标题
background 背景区域，默认不可见，下拉才显示
页面主体区域，用了显示 wxml 中布局

windown节点常用配置项：

navigationBarTitleText 导航栏标题文字字符串
navigationBarBackgroundColor 导航栏背景颜色默认#000000，类型 HexColor
navigationBarTextStyle 导航栏颜色(标题、电池等颜色) 仅支持 black/white，默认 white
backgroundColor 窗口背景色默认#ffffff，类型 H3xColor
backgroundTextStyle 下拉loading 的样式，仅支持 dark/light，默认 dark
enablePullDownRefresh 是否全局开启下拉刷新。默认 false。开启后会作用于小程序每个页面。
onReachBottomDistance 页面上拉触底时间触发时距离底部距离，单位 px，默认 50，若无特殊需求，不建议修改。

Tip：下拉刷新，通常做法是在页面中单独开启，而非在这里全局开启。下拉刷新开启后，若要实现刷新，还得在 onPullDownRefresh 方法中处理下来刷新逻辑，这个方法会在用户触发下拉刷新操作时被调用。

注：模拟器不能百分之百还原真机。例如下拉刷新，在模拟器中，下拉后，过了3秒，下拉自动合上；而在真机中，不会自动合上

tabBar

小程序中 tabBar 是导航组件。特性有：

位置: 通常位于小程序界面的底部。
图标和文字: 每个 tab 都可以包含图标和文字。
选中状态: 可以配置选中和未选中状态下的图标和文字颜色。
页面映射: 每个 tab 对应一个页面路径，点击 tab 会切换到相应的页面。

以下是一个典型的 app.json 中 tabBar 配置示例:

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#1c1c1b",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "首页",
        "iconPath": "/images/icon_home.png",
        "selectedIconPath": "/images/icon_home_active.png"
      },
      {
        "pagePath": "pages/search/index",
        "text": "搜索",
        "iconPath": "/images/icon_search.png",
        "selectedIconPath": "/images/icon_search_active.png"
      },
      {
        "pagePath": "pages/profile/index",
        "text": "我的",
        "iconPath": "/images/icon_profile.png",
        "selectedIconPath": "/images/icon_profile_active.png"
      }
    ]
  }
}

注：tabBar 只能配置最少2个，最多5个。当渲染顶部tabBar 时，不显示 icon，只显示文本。说tabBar 中的页面要放在 pages 前面，否则显示不出。

tabBar 有6个组成部分：

color，tab上文字的颜色
selectedColor，tab文字选中时的颜色
backgroundColor，tabBar 背景色
borderStyle，tabBar 边框颜色
iconPath，未选中时图片路径
selectedIconPath，选中时图片路径

tabBar 节点配置项：

position，默认 bottom，可配置 top
borderStyle，默认 black，仅支持 black/white
color，hexColor 类型
selectedColor，hexColor 类型
backgroundColor，hexColor 类型
list，Array，必填，最少2个，最多5个

每个 tab 项配置选项：

pagePath，必填，页面路径，页面必须在 pages 中预先定义
text，必填，tab上显示的文字
iconPath，未选中时图片路径；position 为top时不显示 icon
selectedIconPath，选中时图片路径；position 为top时不显示 icon

页面配置

在小程序中，全局配置和页面配置可以定义页面的外观和行为。当全局配置和页面配置冲突时，确实遵循就近原则，最终效果通常以页面配置为准。这意味着页面特定的配置会覆盖全局配置。这样可以确保页面的定制化效果。

页面配置中常用配置项：

navigationBarTitleText 导航栏标题
navigationBarBackgroundColor 导航栏背景颜色
navigationBarTextStyle 导航栏文字颜色
backgroundColor 页面背景颜色
backgroundTextStyle 下拉loading 的样式
enablePullDownRefresh 是否全局开启下拉刷新
onReachBottomDistance 页面上拉触底时间触发时距离底部距离
disableScroll 禁止页面滚动
usingComponents 页面使用的自定义组件列表

小程序基本语法

wxml

微信小程序的 wxml 类似网页中的 html。支付宝小程序中是 axml。

wxml 和 html 区别：

标签名称不同（比如用 view 代替 div）：
- HTML: div、span、img、a
- wxml: view、text、image、navigator
属性节点不同

<a href="http://www.baidu.com">百度a>
<navigator url="http://www.baidu.com">百度navigator>

提供了类似 vue 的模板语法：数据绑定、列表渲染、条件渲染

数据绑定

在 data 中定义数据，在 wxml 中使用。例如：

Page({
  data: {
    name: '张三',
    age: 18,
    url: 'http://....png',
    randomNum: Math.random() * 10,
  }
})

用Mustache语法（{{}}）将变量包起来即可：

{{ name }}
{{ randomNum > 5 ? '大于5': '小于或等于5' }}

动态绑定属性不同于 vue 的 v-bind，小程序的动态绑定属性是直接在标签上写（写法不同而已，死记即可），例如：

<image src="{{ url }}">image>

Tip: 数据在小程序开发工具控制台的 AppData tab中可以看到。

条件渲染

小程序和vue中条件渲染对比：

语法差异：微信小程序使用 wx:if、hidden、block wx:if，vue中使用 v-if，v-show。
wx:if 和 v-if 类似，是真正的条件渲染
hidden 和 v-hsow 类似，都是通过 css 控制显隐，元素始终存在
block 类似 template，一次控制多个组件的展示与隐藏，且都不会渲染成实际的 dom 元素

用法：在 wxml 中使用 wx:if、wx:elif、wx:else 标签，在 data 中定义变量，在 wx:if 中使用变量。

<view>
  <view wx:if="{{ age > 18 }}">
    你成年了
  view>
  <view wx:elif="{{ age < 18 }}">  你未成年
  view>
  <view wx:else>
    你很少年
  view>
view>

列表渲染

小程序和vue中列表渲染对比：

语法差异：微信小程序使用 wx:for、wx:key，vue中使用 v-for和:key
都强调为列表渲染的每一项制定一个唯一的 key
vue 在列表渲染中提供了更丰富的功能
wx:for 和 v-for 类似，都是遍历数组，渲染成列表

用法：在 wxml 中使用 wx:for 标签，在 data 中定义数组，在 wx:for 中使用数组。

默认当前循环项索引是 index，当前循环项是 item:

class="container">
  <block wx:for="{{items}}" wx:key="index">
    <view>
      <text>{{index}}: {{item}}text>
    view>
  block>


Page({
  data: {
    items: ['Item 1', 'Item 2', 'Item 3']
  }
});

wx:for-item 和 wx:for-index 用于自定义变量名，使得代码更加清晰和可读。

class="container">
  <block wx:for="{{items}}" wx:for-item="user" wx:for-index="idx" wx:key="id">
    <view>
      <text>Index: {{idx}}text>
      <text>ID: {{user.id}}text>
      <text>Name: {{user.name}}text>
    view>
  block>


Page({
  data: {
    items: [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Charlie' }
    ]
  }
});

注: 小程序的 key，直接是循环项中的属性，且不需要 {{}}。如果是vue，得通过循环项找到

小李移动开发成长记 —— 大话小程序