小程序开发不求人 (阿里云) (Z-Library)

1

阿里云开发者“藏经阁” 海量免费电子书下载

2 顾问 侯发欣（铁欣） 策划编辑 徐雯昀（畹汀） 主编 徐雯昀（畹汀）、纪宇鹏（风隐）、胡可茹、郭安然、袁佳茗、 蔡伟伟、郑智宇、郭兴越 设计 回祎宁 欢迎扫码入群，交流阅读心得

3 Contents 小程序开发不求人 第一章 支付宝小程序介绍及开发准备 ...................................................................................................... 4 介绍 ............................................................................................................................................................................... 5 小程序开发准备 ..................................................................................................................................................... 10 第二章 支付宝小程序开发者工具介绍 ................................................................................................... 12 第三章 支付宝小程序开发基础知识 ....................................................................................................... 21 支付宝小程序代码结构及组成 .......................................................................................................................... 22 支付宝小程序 API ................................................................................................................................................. 60 支付宝小程序组件................................................................................................................................................. 81 支付宝小程序开放能力 ..................................................................................................................................... 103 第四章 支付宝小程序快速示例 .............................................................................................................. 112 第五章 小程序协同工作及版本管理 ..................................................................................................... 119 小程序成员管理 ................................................................................................................................................... 120 小程序版本管理 ................................................................................................................................................... 125 第六章 小程序基础库更新迭代 .............................................................................................................. 128 基础库更新迭代 ................................................................................................................................................... 129 第七章 IoT 小程序开发及刷脸支付实现 ............................................................................................. 132 IoT 小程序开发及刷脸支付实现 .................................................................................................................... 133 第八章 小程序模板及插件开发应用 ..................................................................................................... 135 小程序模板介绍 ................................................................................................................................................... 136 小程序插件介绍 ................................................................................................................................................... 138

4 Chapter 1 第一章 支付宝小程序介绍及开发准备

5 介绍 支付宝小程序为何如此重要？ 小程序即用即走、无需下载的特性为大量用户提供了更便捷的使用方式。如今的支 付宝 App 已是移动互联网生态的超级 App 之一，小程序这种轻量化的解决方 案，可以让更多的外部开发者通过支付宝来服务更多客户，同时也可以让支付宝平 台拓展出更多的开放服务能力，以满足用户多样化的需求。 早在 2017 年，当支付宝小程序还只是一堆代码时，支付宝就曾明确谈过它的定 位：“用互联网的技术、产品帮助商家更好地服务用户”。 2019 年 9 月 17 日，在“支付宝开放日·小程序年度峰会”上，阿里巴巴合伙人、 支付宝事业群总裁倪行军（苗人凤）透露，支付宝平台已累计上线 100 多万个小 程序，月活用户突破 5 亿。更重要的是，和微信小程序集中于游戏、直播领域的情 况不同，支付宝百万级的小程序中，有 70%集中于线下的商业生活服务领域，这 恰好是离钱最近的地方。 支付宝小程序是怎样做到的？ 基于商家需求和平台特性，打造运营玩法 除了 C 端用户的支付和生活服务需求之外，支付宝多年来还积累了几千万的 B 端 商户，希望更好地服务这些客户。而小程序跟大平台的完美结合， 无疑大大满足了 商家对流量获取、精准营销、提高用户留存率等核心需求。 支付宝小程序在运营玩法中提供包括了支付宝中心化频道触达用户机会的官方流量 奖励，和支持在支付宝 APP 端开放链接用户的入口的自运营工具支持。 中心化频道开放 支付宝鼓励生态商家在端内持续运营小程序，推出了长期的流量奖励政策。一起分 享支付宝中心化频道触达用户机会，支付宝首页、会员频道、惠支付、花呗频道、 信用频道、社区生活等更多的频道逐步开放。 自运营入口开放 在支付宝 App 端开放链接用户的入口，更便捷地让合作伙伴结合自身运营诉求 进行自运营，支付成功页、生活号、朋友 TAB、小程序收藏、搜索栏、账单页、二 维码扫一扫、卡包等多个支付宝端内入口和工具，帮助商家打造拉新留存促活的运 营闭环。

6 以“轻会员”为例。说是会员，实际上是一种特殊的会 员营销工具。通过结合芝麻 信用与花呗特性，“轻会员”可以让消费者无需预付任何费用即可成为会员，先享 受优惠权益，到期后再结算会员费，最核心的特点是可以先享后付。之所以 “轻”，是因为配置即可上线，而且没有底层的后台，更多是会员营销方式的改 变。例如知名茶饮品牌“奈雪的茶”，在“奈雪点单”小程序上，办理“轻会员” 的用户比未办理用户下单量高出 42%，客单价提升了 68%，基本上算是一个超级 用户的雏形。相对而言，这种会员模式对 B 端和 C 端都能形成一种对等的保护： 帮 B 促营收，刺激 C 消费。对于商家来说，可以快速刺激回头客，拉复购。 “一云多端”背后的阿里开放生态 阿里巴巴正在做的事情是：全面拥抱小程序，为小程序提供全面的技术、业务、生 态的支持，能够帮助我们的企业在未来的云生态里面走的更远。 小程序云是面向小程序场景提供的一站式云服务，帮助开发者实现一云多端的业务 战略，提供了有服务器和无服务器两种模式。跨端开发工具链为开发者提供了一次 开发全网小程序运行的能力，并在一朵云内实现统一的资源管理、统一的数据运营 和统一的业务设计。 小程序多端发布则与商家一起分享阿里集团多端触达用户的机会，手机淘宝、高 德、UC 浏览器等阿里集团更多亿级用户 APP 逐步开放。开发者可使用同一套代 码，发布到阿里开放生态的各个端，降低开发成本。一次开发、多端投放，全方位 享受阿里经济体红利的基础正在成型。通过阿里小程序矩阵，商家也可以打造品牌 效应、提高用户粘性，获取更大的商业价值。 同时，基于支付宝开放平台的战略，小程序可以将开发者背后大量的第三方企业的 开发能力聚合到平台，以此加固阿里的生态体，最终成为其构建多元化盈利渠道的 重要工具和竞争手段。

7 未来，阿里系的几大超级 App，包括淘宝、钉钉、高德、饿了么等，底层能力都 将打通，形成无缝对接。 这意味着，阿里系的多元化能力，可以随意组合了。 比如，小程序不仅可以拥有支付宝的花呗分期能力，还可以拥有菜鸟的物流能力、 饿了么的配送能力、高德的 LBS 能力等等。这些能力都以开放能力功能包的形式 汇聚到一个开放能力市场里。开发者在开发应用的时候，可以方便地获取功能包， 接入对应的 API，进行“拼积木式组装”。这相当于集众家之长，组成一个神通广 大的“混血儿”。 举个例子，用户想吃火锅，便在高德搜索附近的海底捞，然后开车去，导航结束 时，高德 App 会自动弹出海底捞支付宝小程序，用户可以直接进行点餐、领优惠 券；亦或者，用户想去商场逛街，导航结束时，高德 App 弹出相应商场的支付宝

8 小程序，小程序里面有停车服务、有商场里面一些餐厅、服装店的优惠券，用户可 以快速领取。 目前，以上两种场景已经实现。虽然阿里系小程序还处于萌芽早期，落地层面案例 还不多，不过随着各大超级 App 底层能力的互通，势必会实现多场景的打通和串 联。 当谈起支付宝小程序，我们是在畅想怎样的未 来？ 新的时代需要新的工具设施。小程序的诞生与兴盛，是当下阶段，人们加速拥抱移 动互联网时代、拥抱碎片化消费时代的集中反映。 未来小程序这个载体会变，但数字时代数字化经营的大基础不会变。 2018 年，时任阿里巴巴集团首席执行官的张勇，提出阿里的新目标是要做商业操 作系统——“在阿里巴巴经济体中，包括购物、娱乐、本地生活等多元化的商业场 景及其形成的数据资产，与阿里巴巴正在高速推进的云计算一经结合，共同形成了 独特的阿里巴巴商业操作系统。在这个操作系统当中，各个商业部门既产生数据， 又运用数据，形成一个庞大而丰富的有机循环。” 支付宝小程序的崛起，是对阿里商业操作系统的正式落地。加之，小程序有三个特 色——钱、服务、信任；两个聚焦——商业和生活服务；一个坚持——坚持安全可 靠。这些正是阿里商业操作系统所需要的。 在阿里商业操作系统的构想中，阿里生态将为企业输出一整套的数字化能力，而非 提供单一工具。阿里经济体内的品牌、商品、销售、营销、渠道、制造、服务、金

9 融、物流供应链、组织、信息管理系统等企业运营中的 11 大商业要素，都会融合 性地助力零售业的数字化转型，改造商业结构、创造出新的需求和市场；而集成这 11 种商业要素的最佳载体，就是小程序。 小程序是阿里打造数字经济体的重要组成部分，将坚持开放路线，不管是流量、能 力还是模式，跑通一个，开放一个，成熟一个，开放一个。阿里巴巴的使命是让天 下没有难做的生意，支付宝小程序的初心亦是如此。 在阿里巴巴 20 周年的演讲中，新任阿里巴巴集团董事局主席张勇说：“我们今天 处在最好的时代，因为这个时代，才有 20 年阿里巴巴的发展。我们要感恩，我们 希望不断为社会创造价值，为社会承担更多的责任。” “如果，因为我们的努力，社会能进步；因为努力，商家能更好；我们将由衷高 兴。我们希望客户、合作伙伴过得比我们好。”

10 小程序开发准备 作为一名新入门的开发者，想要从开发小程序到开展业务，我们需要经历哪些阶段 呢？ 通过下图所示，您可以大致了解小程序的开发流程阶段。 开发准备 本章将着重为大家介绍小程序的开发前期准备工作。 在开发小程序之前，您需要完成下列准备工作： 一、注册入驻 您需要拥有支付宝账户，然后以开发者身份入驻 支付宝开放平台，才能创建小程 序。

11 二、创建小程序 在实际开发之前，您需要在后台创建空白小程序。此步骤仅起到命名作用，小程序 的实际内容还需后续开发。 创建步骤： 1. 登录 小程序开发中心，可以看到 我的小程序 页面。 2. 在 我的小程序 页面点击 开始创建。 3. 填写 小程序名称，点击 创建。 三、安装开发工具 下载并安装 小程序开发者工具（简称 IDE）的最新版本。 请根据操作系统选择对应的开发工具：Windows 64 位或 MacOS。其它操作系统 下暂时未提供开发工具。

12 Chapter 2 第二章 支付宝小程序开发者工具介绍

13 界面介绍 启动界面 在小程序开发者工具（简称 IDE）的启动界面，开发者可以新建项目、打开现有 项目、删除最近项目记录。 新建项目 新建项目类型分为两类：示例模板 与 空白脚手架。 示例模板项目 开放平台提供入门、UI、开放能力三类模板，内含大量示例代码（仍在持续更新 中），为开发者演示如何实现小程序各项能力（参见 快速示例）。新建步骤如 下： 1. 点击 模板选取 标签。 2. 点击需要创建的模板，然后点击 下一步；或者直接双击所需模板卡片。 3. 在 新建项目 页面： a. 设置 项目名称 与 项目路径； b. 点击 完成，进入主界面。

14 空白脚手架项目 空白脚手架仅包含最基础的文件结构。新建步骤如下： 1. 在左侧边栏选择 项目类型（例如支付宝小程序、淘宝商家应用等类型）。 2. 在 最近使用 列表中，点击 ➕ 卡片。 3. 在 新建项目 页面： a. 设置 项目名称 与 项目路径； b. 选配 后端服务：不启用云服务、小程序 Serverless 或 小程序云应用； c. 点击 完成，进入主界面。 打开项目 本地现有项目也有两种打开方式：选择最近项目 与 选择项目文件夹。 选择最近项目 在启动界面 最近使用 列表中，点击需要打开的项目，然后点击 打开；或者直接双 击所需项目卡片。 选择项目文件夹 1. 点击右上角的 打开项目，弹出文件窗口。 2. 导航至项目文件夹，点击 选择文件夹。 3. 在 打开本地项目 页面： a. 确认或修改 项目名称 与 项目类型； b. 点击 打开，进入主界面。 删除最近项目记录 如需维持启动界面整洁，首先右键点击希望清理的项目卡片，然后点击 删除。 注意：此项操作仅会清理启动界面记录，不会实际删除硬盘中的项目文件。 主界面 小程序开发者工具的主界面由 菜单栏、工具栏、功能面板、编辑器、调试器、模 拟器 组成。

15 主界面各区域简要说明： 1. 菜单栏：文件、编辑、窗口、工具、帮助等基础功能。 2. 工具栏：更改小程序类型与关联、显示/隐藏界面区域、真机调试与预览等功能。 3. 功能面板：切换文件树、搜索、git 管理、npm 管理、插件市场、实验室、云服务等 边栏。 4. 编辑器：输入与修改代码的区域。 5. 调试器：用于模拟器调试、真机调试、性能调试。 6. 模拟器：模拟运行小程序，便于快速预览、初步调试。 说明：使用工具栏中部三个按钮，可以显示或隐藏界面主要区域，其中 编辑器 与 调试器 无法同时隐藏。 工具栏 小程序开发者工具（简称 IDE）的工具栏位于主界面顶部，包含 IDE 中最常用的 主要功能。本文档从左至右介绍各项功能。 小程序

16 选择小程序的运行环境类型（默认为支付宝小程序），此外还支持淘宝、钉钉、高 德等运行环境（参见 多端支持）。 关联小程序 每个开发者账号可以拥有多个小程序的开发权限，因此需要关联具体小程序，决定 小程序代码的上传位置。 在此项下拉列表中，点击 + 创建小程序，进入小程序管理页面，可以创建小程序 供后续关联。 说明：在创建小程序命名时，注意遵循名称规范。 如需关联其他账号中的小程序，但开发者账号还没有开发权限的话： 1. 使用主账号登录小程序开发中心，点击所需小程序，跳转至开发管理页面。 2. 在左侧导航栏选择 成员管理，点击 添加，按照提示添加开发成员。 3. 使用开发者账号在支付宝客户端 朋友 > 服务提醒 中接受邀请。 4. 使用开发者账号登录 IDE，关联小程序。 关联云服务 说明：在最初新建项目环节，如果后端选用云应用，此项功能才会显示。 如果未启用云服务或者选用 Serverless，此项功能则会隐藏。 每个小程序可以创建多个云应用，而云应用又包含测试与正式环境。因此需要关联 具体的云应用环境，决定云应用代码的上传位置。在关联云应用环境之后，此项下 拉列表右侧会出现 ⚙️ 按钮，用于上传代码与管理云应用。 在此项下拉列表中，点击 + 创建新服务，进入云服务管理页面，可以创建云应用 后续关联。 显示/隐藏界面区域 点击 编辑器、调试器、模拟器，可以分别显示与隐藏这三个区域。 说明：功能面板/编辑器 会同时显示/隐藏，而 编辑器/调试器 无法同时隐藏。

17 编译模式 在普通编译模式下，小程序初始的启动页面是 app.json 文件 pages 列表的首 个页面，且不带任何参数。 如需快速调试其他页面 或 设置参数： 1. 在此项下拉列表中点击 + 添加编译模式。 2. 在弹窗中填写 模式名称、页面参数、全局参数，选择 启动页面，点击 确定。 3. 随后模拟器将会改用新的启动页面，同时自动传入设置好的参数。 说明：弹窗中如果勾选 下次编译时模拟更新，可以模拟小程序更新效果，详情请 参见 UpdateManager。 清除缓存 清除 数据缓存、授权数据、文件缓存、构建缓存、网络缓存。 真机调试 通过 IDE 远程至真机，设置断点、查看运行信息。详情请参见 真机调试。 说明：如不希望频繁扫码，可以使用 自动预览 选项。 预览 使用真机预览小程序，初步查看 API 真机调用效果。 说明：如不希望频繁扫码，可以使用 自动预览 选项。 上传 上传项目代码至关联小程序的后台空间。在小程序完成开发之后，项目代码需要打 包上传至开放平台，然后才能提交审核与发布上线。目前只能上传图片不支持上传 视频。 前提条件 在上传代码之前，本地项目需要关联至后台小程序，用于确定上传位置。如果尚未 关联，点击工具栏右侧的 上传 菜单时，会有弹窗提示进行关联。 IDE 中选择的 小程序与后台查看版本详情的小程序需要保持一致。 上传方法

18 1. 在工具栏右侧的 上传 菜单栏中，点击 上传 按钮。 2. 上传成功之后，后台会生成新的开发版本条目。查看方法：登录 小程序开发 中心，点击所需小程序，版本条目会在开发管理页面的 版本详情 区域显示。 上传之前的选项：  上传版本：每次上传时版本默认递增 0.0.1（本次版本必须大于线上版本），从而确保后台 每份代码版本唯一。  创建预审核任务：免费调用一台真机进行测试（每天 5 次限额），详情请参见 预审核。 配置域名白名单 在上传之前阶段（模拟器预览 /调试、真机预览/调试），小程序默认不会限制域名 访问；但在上传之后阶段（体验版本、审核版本、灰度版本、线上版本），小程序 只能访问白名单域名。若未成功配置白名单，可能会导致小程序页面白屏。 详细操 作可参见 配置 H5 服务器域名白名单。 配置步骤： 1. 登录 小程序开发中心，选择所需小程序。 2. 在左侧导航栏点击 设置，进入设置页面。 3. 点击 开发设置 标签，在 服务器域名白名单 区域点击 添加。 4. 填写所需域名，点击 确定。 注意：添加的域名必须支持 HTTPS 协议，而且已经完成备案。 详情  查看关联应用名称、项目本地目录、线上版本。  选择是否启用自定义组件 component2 编译、axml 严格语法检查。  查看 my.request、web-view 域名白名单信息。 设置是否忽略这两项域名检查。 注意：小程序 体验版 与 提审之后版本 无法继续忽略检查，届时请务必设置域名 白名单！ 域名白名单设置入口有两处：  在详情页面，点击 域名信息 右侧蓝色按钮，进入设置页面，点击 开发设置。  登录 我的小程序，选择所需小程序；从左侧边栏进入 设置 > 开发设置。

19 登录/用户头像  在开发者未登录时，显示 登录 按钮。  在开发者登录后，显示开发者头像。可以查看消息通知，或者退出登录。 模拟器 小程序项目通过编译之后，自动在模拟器中运行，无需真机即可快速预览。基础互 动方式是通过鼠标点击、拖拽来模拟手指触摸、拖动操作。 在默认设置下，每次保存已变更代码时都会触发模拟器自动刷新，实现准实时预览 效果。关闭自动刷新的方法：取消勾选模拟器右下角 自动更新。 模拟器布局 模拟器顶部各项功能（从左至右）：  设备尺寸：选择预设的 iOS 或安卓设备尺寸，或者新建自定义的设备尺寸，用于测试适配 性。  缩放比例：控制小程序的显示缩放比例。  刷新：重新编译代码并刷新模拟器。  小工具：打开/关闭模拟器的小工具菜单。  模拟器日志：在编辑器打开模拟器日志窗口。  独立窗口：改用独立窗口方式显示模拟器。 在独立窗口模式下，界面新增 窗口置顶 按钮；独立窗口 变为 合并窗口 按钮。 模拟器底部三项功能：  页面路径：显示当前页面路径。点击路径，可直接打开当前页面 js 文件。  页面参数：显示当前页面收到的参数。点击参数，可快速复制至剪贴板。  自动刷新：如需避免频繁刷新，可取消勾选此功能。 说明：点击 ^ 可以切换显示 页面路径 或 页面参数。 模拟器小工具