微信小程序开发实战 第2版 (黑马程序员) (Z-Library)

📄 File Format: PDF

💾 File Size: 6.6 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

开 发 实 战 微 信 小 程 序 开发实战 新增 Vant Weapp 组件库和 uni-app 框架等内容 以实战案例、项目引领学习，突出培养读者的动手能力 配套丰富的教学资源，包括教学 PPT、教学大纲、源代码、教学设计等 微信小程序 黑马程序员 编著 扫此二维码下载 本书配套资源 教材服务热线：010-81055256 反馈／投稿／推荐信箱：315@ptpress.com.cn 人邮教育服务与资源下载社区：www.ryjiaoyu.com 书名 书号 Java 基础案例教程（第 2 版） 978-7-115-54747-7 Java Web 程序设计任务教程（第 2 版） 978-7-115-56685-0 Java EE 企业级应用开发教程（Spring+Spring MVC+MyBatis）（第 2 版） 978-7-115-56817-5 微服务架构基础（Spring Boot+Spring Cloud+Docker） 978-7-115-44320-5 Spring Boot 企业级开发教程 978-7-115-51279-6 Spring Cloud 微服务架构开发 978-7-115-52904-6 C# 程序设计基础入门教程（第 2 版） 978-7-115-54350-9 C++ 程序设计教程（第 2 版） 978-7-115-54969-3 C 语言程序设计案例式教程（第 2 版） 978-7-115-59863-9 C 语言开发基础教程（Dev-C++）（第 2 版） 978-7-115-50202-5 Python 快速编程入门（第 2 版） 978-7-115-54752-1 Python 程序设计现代方法 978-7-115-51089-1 Python 数据可视化 978-7-115-54513-8 软件测试 978-7-115-51523-0 ASP.NET 就业实例教程（第 2 版） 978-7-115-55605-9 HTML5+CSS3 网页设计与制作 978-7-115-52324-2 JavaScript+jQuery 交互式 Web 前端开发 978-7-115-52680-9 Vue.js 前端开发实战 978-7-115-52323-5 Bootstrap 响应式 Web 开发 978-7-115-54783-5 HTML+CSS+JavaScript 网页制作案例教程（第 2 版） 978-7-115-54739-2 JavaScript 前端开发案例教程（第 2 版） 978-7-115-59323-8 HTML5+CSS3 网站设计基础教程 978-7-115-41064-1 网页设计与制作项目教程（HTML+CSS+JavaScript）（第 2 版） 978-7-115-56598-3 响应式 Web 开发项目教程（HTML5+CSS3+Bootstrap）（第 2 版） 978-7-115-55396-6 PHP 网站开发实例教程（第 2 版） 978-7-115-53020-2 PHP+MySQL 动态网站开发 978-7-115-55127-6 PHP 基础案例教程（第 2 版） 978-7-115-58013-9 PHP+Ajax+jQuery 网站开发项目式教程 978-7-115-41075-7 Web 前端模块化开发教程（ES6+Node.js+Webpack） 978-7-115-56462-7 Kotlin 从基础到实战 978-7-115-49440-5 Android 移动开发基础案例教程（第 2 版） 978-7-115-56768-0 iOS 开发项目化入门教程 978-7-115-29949-9 iOS 开发项目化经典教程 978-7-115-41074-0 Swift 项目开发基础教程 978-7-115-41960-6 基于 Swift 语言的 iOS App 商业实战教程 978-7-115-44093-8 Laravel 框架开发实战 978-7-115-56326-2 计算机网络技术及应用 978-7-115-49441-2 计算机组装与维护 978-7-115-49442-9 Photoshop CC 设计与应用任务教程（第 2 版） 978-7-115-56908-0 工 业 和 信 息 化 精 品 系 列 教 材 工业和信息化精品系列教材 第2 版 第2版 FM60602微信小程序开发实战（第2版）.indd 1-3 2023/3/16 下午5:11

📄 Page 2

微信小程序是目前非常热门的轻量级应用，用户只要在微信中“扫一扫”或“搜一搜”即可打开，非常 简单方便，实现了各种应用“触手可及”的梦想。 ◆ 为什么要学习本书 学习微信小程序开发并不难，微信官方也提供了大量的文档资料，但是初学者仅仅靠自学官方文档是不 够的，因为实际的开发需求往往十分复杂，关键是如何找到合适的思路和解决方案，所以只有积累大量的实 践经验，才能高效地完成开发工作。 本书比照开发中常用的一些技术选取教学案例，希望通过这些案例帮助初学者快速入门。这些案例一方 面可以帮助读者提高学习兴趣，另一方面可以帮助读者学到实用的技术。考虑到企业应用中的需求，本书还 加入了微信小程序常用框架uni-app的讲解，以及“点餐”微信小程序和“短视频”微信小程序两个实战项 目，帮助读者开阔视野，了解实际开发中的各种问题和解决方案，培养读者解决实际问题的能力。 ◆ 如何使用本书 本书共8章，各章内容介绍如下。  第 1 章讲解微信小程序入门，主要内容包括微信小程序基本概念和开发工具的使用，学完本章内容 后，读者会对微信小程序开发有一个初步的认识，并能够使用微信开发者工具创建一个空项目。  第 2 章讲解微信小程序的页面制作，通过对开发“个人信息”“本地生活”“婚礼邀请函”这 3 个 微信小程序的学习，读者可以具备编写微信小程序页面结构和样式的能力，并能够使用各种组件快速搭建 页面。  第 3章讲解微信小程序的页面交互，通过对开发“比较数字大小”“计算器”“美食列表”“调查问卷” 这4个微信小程序的学习，读者可以具备开发各种常见页面交互效果的能力。  第 4章和第5章讲解微信小程序的常用API，通过对开发“音乐播放器”“录音机”“头像上传下载” “模拟时钟”“罗盘动画”“用户登录”“查看附近美食餐厅”“在线聊天”这 8 个微信小程序的学习，读者能 够利用常用API开发功能较强的微信小程序。  第 6 章讲解综合项目“点餐”微信小程序，本项目基于微信小程序原生框架开发，实战性强，使读 者能够对前面所学知识进行综合运用。  第 7 章讲解微信小程序开发进阶，通过对开发“自定义标签栏”“电影列表”“待办事项”这 3 个微 信小程序的学习，读者可以掌握如何用自定义组件、Vant Weapp 组件库、WeUI 组件库和 uni-app 框架提高 项目开发效率。  第 8章讲解uni-app项目—“短视频”微信小程序，本项目利用uni-app框架进行开发，具有较 强的跨平台能力，能够生成Android、iOS及其他小程序版本，并且可以使用Vue.js 的语法进行代码编写。 在学习过程中，读者一定要多动手练习，有不懂的地方，可以登录“高校学习平台”，通过平台中的教 学视频进行深入学习。读者还可以在“高校学习平台”进行测试，巩固所学知识。另外，如果读者在学习过 程中遇到困难，建议不要纠结，先往后学习。随着学习的不断深入，前面不懂的地方慢慢也就理解了。 前 言 PREFACE

📄 Page 3

微信小程序开发实战（第 2 版） 2 ◆ 致谢 本书的编写和整理工作由江苏传智播客教育科技股份有限公司完成，主要参与人员有高美云、韩冬、梁 志琪、张瑞丹等，全体参编人员在编写过程中付出了辛勤的汗水，除此之外还有很多试读人员参与了本书的 试读工作并给出了宝贵的建议，在此向大家表示由衷的感谢。 ◆ 意见反馈 尽管编者付出了最大的努力，但本书中难免会有疏漏和不妥之处，欢迎各界专家和读者朋友提出宝贵意见。 读者在阅读本书时，如果发现任何问题或有不认同之处，可以通过电子邮箱与编者联系。请发送电子邮件至 itcast_book@vip.sina.com。 黑马程序员 2023 年 3 月于北京

📄 Page 4

第 1 章 微信小程序入门 1 1.1 初识微信小程序 1 1.1.1 什么是微信小程序 2 1.1.2 微信小程序的特点 2 1.1.3 微信小程序的发展前景 3 1.1.4 微信小程序的宿主环境 4 1.2 微信小程序开发前准备 5 1.2.1 注册微信小程序开发账号 5 1.2.2 获取微信小程序 AppID 8 1.2.3 安装微信开发者工具 9 1.2.4 创建微信小程序项目 10 1.3 微信小程序开发基础 12 1.3.1 微信小程序的项目结构 12 1.3.2 微信小程序的页面组成 12 1.3.3 微信小程序的通信模型 13 1.4 微信开发者工具的使用 13 1.4.1 认识微信开发者工具 13 1.4.2 微信小程序的项目设置 17 1.4.3 微信小程序开发常用快捷键 18 1.5 微信小程序的项目成员 20 1.5.1 项目成员的组织结构 20 1.5.2 项目成员的分工 21 1.5.3 项目成员和体验成员的管理 21 1.5.4 项目成员的权限 22 1.5.5 添加项目成员和体验成员 23 1.6 微信小程序的发布上线 24 1.6.1 微信小程序的版本 24 1.6.2 微信小程序的上线流程 25 本章小结 27 课后练习 27 第 2 章 微信小程序页面制作 29 【案例 2-1】个人信息 29 案例分析 30 知识储备 30 1. WXML 简介 30 2. WXSS 简介 31 3. 常用组件 31 4. 页面路径配置 31 5. view 组件 32 6. image 组件 33 7. rpx 单位 35 8. 样式导入 35 案例实现 36 【案例 2-2】本地生活 37 案例分析 37 知识储备 38 1. swiper 和 swiper-item 组件 38 2. text 组件 39 3. Flex 布局 40 案例实现 42 【案例 2-3】婚礼邀请函 45 案例分析 45 知识储备 47 1. 导航栏配置 47 2. 标签栏配置 47 3. vw、vh 单位 49 4. video 组件 49 5. 表单组件 50 案例实现 54 本章小结 64 目 录 CONTENTS

📄 Page 5

微信小程序开发实战（第 2 版） 2 课后练习 64 第 3 章 微信小程序页面交互 65 【案例 3-1】比较数字大小 66 案例分析 66 知识储备 66 1. Page( )函数 66 2. 数据绑定 68 3. 事件绑定 69 4. 事件对象 70 5. this 关键字 71 6. setData( )方法 71 7. 条件渲染 72 8. <block>标签 72 9. hidden 属性 73 案例实现 73 【案例 3-2】计算器 75 案例分析 75 知识储备 76 1. data-*自定义属性 76 2. 模块 77 案例实现 77 【案例 3-3】美食列表 85 案例分析 85 知识储备 86 1. 列表渲染 86 2. 网络请求 87 3. 提示框 88 4. WXS 89 5. 上拉触底 91 6. 下拉刷新 91 案例实现 92 【案例 3-4】调查问卷 97 案例分析 98 知识储备 98 双向数据绑定 98 案例实现 98 本章小结 102 课后练习 102 第 4 章 微信小程序常用 API（上） 104 【案例 4-1】音乐播放器 104 案例分析 104 知识储备 106 1. scroll-view 组件 106 2. slider 组件 107 3. <include>标签 108 4. 背景音频 API 109 案例实现 110 【案例 4-2】录音机 121 案例分析 121 知识储备 122 1. 录音 API 122 2. 音频 API 123 案例实现 124 【案例 4-3】头像上传下载 127 案例分析 128 知识储备 128 1. 选择媒体 API 128 2. 图片预览 API 129 3. 文件上传 API 130 4. 文件下载 API 131 案例实现 131 【案例 4-4】模拟时钟 134 案例分析 134 知识储备 134 1. canvas 组件 134 2. 画布 API 135 案例实现 137 本章小结 142 课后练习 143 第 5 章 微信小程序常用 API（下） 144 【案例 5-1】罗盘动画 144 案例分析 144 知识储备 145 动画 API 145 案例实现 147

📄 Page 6

目 录 3 【案例 5-2】用户登录 151 案例分析 151 知识储备 151 1. 登录流程时序 151 2. 登录 API 153 3. 数据缓存 API 154 4. 头像昵称填写 155 5. App( )函数 157 案例实现 158 【案例 5-3】查看附近美食餐厅 162 案例分析 163 知识储备 163 1. 腾讯地图 SDK 163 2. map 组件 168 3. 地图 API 169 4. 位置 API 170 5. 路由 API 170 案例实现 172 【案例 5-4】在线聊天 176 案例分析 176 知识储备 177 1. WebSocket API 177 2. SocketTask 178 案例实现 179 本章小结 184 课后练习 184 第 6 章 综合项目——“点餐”微信 小程序 186 【任务 6-1】项目开发准备 186 开发背景 186 项目模块划分 187 项目初始化 187 【任务 6-2】封装网络请求 189 任务分析 189 任务实现 189 【任务 6-3】用户登录 192 任务分析 192 任务实现 193 【任务 6-4】商家首页 196 任务分析 196 任务实现 196 【任务 6-5】菜单列表页 201 任务分析 201 任务实现 202 【任务 6-6】购物车 209 任务分析 209 任务实现 210 【任务 6-7】订单确认页 220 任务分析 220 任务实现 220 【任务 6-8】订单详情页 227 任务分析 227 任务实现 228 【任务 6-9】订单列表页 231 任务分析 231 任务实现 232 【任务 6-10】消费记录页 238 任务分析 238 任务实现 238 本章小结 241 课后练习 241 第 7 章 微信小程序开发进阶 243 【案例 7-1】自定义标签栏 243 案例分析 244 知识储备 245 1. 创建自定义组件 245 2. 使用自定义组件 246 3. 使用自定义组件渲染标签栏 247 4. Vant Weapp 组件库 248 案例实现 249 【案例 7-2】电影列表 253 案例分析 253 知识储备 254 1. WeUI 组件库 254 2. navigator 组件 256 案例实现 257

📄 Page 7

微信小程序开发实战（第 2 版） 4 【案例 7-3】待办事项 262 案例分析 262 知识储备 263 1. uni-app 框架概述 263 2. HBuilder X 开发工具 264 3. 创建 uni-app 项目 265 4. uni-app 项目的目录结构 266 5. 将 uni-app 项目运行至微信小程序 266 6. uni-app 项目的全局配置文件 267 案例实现 268 本章小结 272 课后练习 272 第 8 章 uni-app 项目——“短视频” 微信小程序 274 【任务 8-1】项目开发准备 274 项目展示 274 项目初始化 276 【任务 8-2】公共头部区域 277 任务分析 277 任务实现 277 【任务 8-3】导航栏区域 279 任务分析 279 任务实现 279 【任务 8-4】轮播图区域 281 任务分析 281 任务实现 281 【任务 8-5】视频列表区域 283 任务分析 283 任务实现 283 【任务 8-6】视频详情页 285 任务分析 285 任务实现 286 本章小结 292 课后练习 292

📄 Page 8

(This page has no text content)

📄 Page 9

HTML+CSS+JavaScript 网页制作案例教程（第 2 版） 2

📄 Page 10

第1 章 微信小程序入门 ★ 了解微信小程序，能够说出微信小程序的概念、特点、发展前景和宿主环境 ★ 掌握微信小程序开发账号的注册方法，能够独立完成微信小程序开发账号的注册 ★ 掌握获取微信小程序 AppID 的方法，能够从微信小程序管理后台获取 AppID ★ 掌握微信开发者工具的安装方法，能够独立完成微信开发者工具的安装 ★ 掌握微信小程序项目的创建方法，能够使用微信开发者工具创建项目 ★ 熟悉微信小程序的项目结构，能够解释每个文件的作用 ★ 熟悉微信小程序的页面组成，能够解释 WXML、WXSS、JS 和 JSON 文件的作用 ★ 熟悉微信小程序的通信模型，能够解释微信小程序中渲染层、逻辑层及第三方服务器的通信方式 ★ 熟悉微信开发者工具的主界面，能够说出工具栏中常用快捷按钮的功能 ★ 掌握微信小程序的项目设置，能够根据需要对微信小程序进行设置 ★ 了解微信小程序开发常用快捷键，能够列举 4 类常用快捷键 ★ 了解项目成员，能够说出项目成员的组织结构、分工和权限 ★ 掌握添加项目成员和体验成员的方法，能够在微信小程序管理后台中添加项目成员和体验成员 ★ 熟悉微信小程序的版本，能够说明微信小程序的 4 种版本 ★ 熟悉微信小程序发布上线的流程，能够归纳出微信小程序发布上线的步骤 微信小程序于 2017 年 1 月 9 日正式上线，凭借其开发成本低、微信用户数量庞大等优势，得到了许 多用户的认可，同时还为许多商家提供了商机。为了满足人们的日常需求，微信小程序的开发技术也在不 断更新。为了让读者对微信小程序有一个整体的认识，本章将对微信小程序的入门知识进行详细讲解。 1.1 初识微信小程序 目前，微信的普及程度已经很高了，人们通过微信可以聊天、工作、支付等。微信小程序是一种运行在 微信中的应用，因其独特优势受到了人们的广泛关注。本节将对什么是微信小程序、微信小程序的特点、微 信小程序的发展前景和微信小程序的宿主环境进行详细讲解。

📄 Page 11

微信小程序开发实战（第 2 版） 2 1.1.1 什么是微信小程序 与传统的原生应用相比，微信小程序是一种全新的连接用户与服务的应用，它可以在微信内被便捷地获 取和传播，同时具有良好的用户体验。微信小程序是运行在微信中的应用，是一种不需要下载即可使用的应 用，用户通过微信扫一扫或者搜一搜即可打开，且每个微信小程序的体积非常小。 微信小程序自推出以后就大受欢迎，微信团队表示他们正向着当初设立的目标——“让小程序触手可及， 无处不在”不断迈进。2022年 1月，微信公开课讲师在“2022微信公开课PRO”上提到，2021年微信小程 序日活突破 4.5 亿，日均使用次数相较 2020 年增长了 32%，活跃微信小程序数量同比增长了 41%。目前微 信小程序覆盖了教育、媒体、交通、房地产、旅游、电商、餐饮等多个领域。由于微信小程序操作简单、使 用方便，一些热门的原生应用也发布了微信小程序版本，例如美团、链家等。 若想打开一个微信小程序，可以通过搜索关键词、扫码、群分享、好友分享等途径实现。例如，点击微 信中的“搜索”按钮，输入关键词“腾讯新闻”，查找与其相关的微信小程序，搜索结果如图1-1所示。 在搜索结果中，点击进入“腾讯新闻”小程序，如图1-2所示。 图1-1 搜索结果 图1-2 “腾讯新闻”小程序 从图1-2可以看出，“腾讯新闻”小程序可以像网页一样直接打开，不需要安装。 当“腾讯新闻”小程序用完以后，直接通过手机的返回操作退出即可，不需要卸载。 1.1.2 微信小程序的特点 微信小程序在市场上发展得如此顺利，这与其本身的特点是分不开的。正是这些独具魅力的特点，才让 微信小程序大受欢迎。 微信小程序具有无须安装、触手可及、用完即走、无须卸载的特点。用户在使用微信小程序时无须安装， 直接使用，不占用存储空间；在使用微信小程序后，可以用完即走，无须卸载。例如，我们去餐厅点餐，无 须下载应用，只需要在餐桌上扫描一下二维码，即可在微信小程序中点餐，而且点餐完成后并不需要卸载应

📄 Page 12

第 1 章 微信小程序入门 3 用，直接关闭微信小程序即可，不会给用户造成任何负担。 除此之外，微信小程序还具有名称唯一、入口丰富和传播能力强等特点，下面将对这3个特点进行说明。  名称唯一：某一个名称被注册后，另一个微信小程序将不能使用相同的名称。  入口丰富：用户可以通过多种途径打开微信小程序，例如微信搜索、好友分享、小程序识别码等。  传播能力强：微信小程序入口丰富，再加上基于微信生态，使得微信小程序的传播能力强，这也是 创业型企业选择微信小程序的一个重要原因。 微信小程序是继原生应用和HTML5应用之后出现的一种新的应用形态，从功能方面来说，与它们是竞 争对手。那么微信小程序与原生应用、HTML5应用有什么区别呢？下面将微信小程序与原生应用进行对比， 具体如表1-1所示。 表 1-1 微信小程序与原生应用的对比 对比项 微信小程序 原生应用 下载安装 无须下载和安装 从iOS和Android系统的应用商店中下载 体积大小 体积小 体积大 跨平台 可以跨平台 不可以跨平台 开发成本 较低 较高 推广成本 较低 较高 表 1-1从下载安装、体积大小、跨平台、开发成本和推广成本这5个方面对比了微信小程序与原生应用 的区别。 接下来将微信小程序与HTML5应用进行对比，具体如表1-2所示。 表 1-2 微信小程序与HTML5 应用的对比 对比项 微信小程序 HTML5 应用 运行环境 运行在微信上 运行在浏览器上 用户体验 较流畅 实际上是打开一个网页，流畅度略差 接口应用 可以大量应用 API 可用 API 较少 表 1-2从运行环境、用户体验和接口应用这3个方面对比了微信小程序与HTML5应用的区别。 1.1.3 微信小程序的发展前景 微信自出现以来，受到广大用户的喜爱，目前已成为人们必不可少的通信工具，对于用户而言，使 用依托于微信的小程序的频率也越来越高。微信小程序是一款富有创意的、高效的、便捷的应用，用户 对微信小程序的未来充满了期待。下面从生态体系、开放能力和用户黏性这 3 个方面讲解微信小程序的 发展前景。 1. 生态体系 目前，微信小程序已经形成了自己的生态体系，它连接了开发者、运营者、投资者等各领域的企业，并 且接入了多个第三方服务的平台。微信小程序已经进入了一个快速发展的阶段，未来的发展空间也越来越大。 微信小程序通过加大对微信开发者工具的支持，能够实现更多的功能，同时有越来越多的企业引入了微信小 程序业务。 2. 开放能力 在发展过程中，微信小程序不断自我完善，为开发者开放了越来越多的接口，它可以适用于大多数的用

📄 Page 13

微信小程序开发实战（第 2 版） 4 户和场景，还可以方便开发者进行深度挖掘。同时，微信为小程序提供了越来越多的开放功能，例如微信扫 码、微信支付、地理定位等，这对微信小程序的发展也会起到推动作用。 3. 用户黏性 目前，微信小程序已经积累了大量用户，用户黏性高，使其他行业与微信用户有更好的连接，能够更好 地与微信结合。因此，微信小程序的发展空间是无限的。 1.1.4 微信小程序的宿主环境 宿主环境（Host Environment）是指程序运行所依赖的环境。例如，iOS系统和Android系统提供了两种 不同的宿主环境，微信、微博等应用都需要依赖宿主环境才能运行，如图1-3所示。 图1-3 iOS系统和Android系统提供的不同宿主环境 在图1-3中，Android系统的应用不能在 iOS系统中运行，iOS系统的应用也不能在Android系统中运行。 因此，脱离了宿主环境的应用是没有任何意义的。 微信小程序可以跨平台，这是因为微信小程序并不是一个直接安装在Android 系统或 iOS系统中的应用， 而是运行在微信客户端上的应用。微信客户端给微信小程序提供的环境就是微信小程序的宿主环境。微信小 程序在Android系统和 iOS系统中的宿主环境如图1-4所示。 图1-4 微信小程序在Android系统和iOS系统中的宿主环境 微信小程序的宿主环境为微信小程序提供了丰富的组件和API（Application Program Interface，应用程序 接口），具体解释如下。  组件：用于快速搭建页面的结构。微信小程序的组件包括视图容器、基础内容、表单、导航、媒体、 地图、画布、开放能力等。  API：用于让开发者方便地调用微信提供的功能，例如获取用户信息、微信登录、微信支付等。

📄 Page 14

第 1 章 微信小程序入门 5 1.2 微信小程序开发前准备 为了帮助开发者简单高效地实现微信小程序的开发，微信团队提供了一套微信开发者工具。该工具集成 了公众号网页调试和小程序调试两种开发模式。在正式开发微信小程序前，需要先进行开发前的准备工作， 包括注册微信小程序开发账号、获取微信小程序AppID、安装微信开发者工具和创建微信小程序项目。本节 将详细讲解微信小程序开发前的准备工作。 1.2.1 注册微信小程序开发账号 开发微信小程序时，需要具备开发微信小程序的权限，也就是注册一个开发账号。具体注册步骤如下。 ① 使用浏览器访问微信公众平台的官方网站，如图1-5所示。 图1-5 微信公众平台的官方网站 ② 单击“立即注册”链接，即可进入开发账号的注册页面，在该页面可选择注册的账号类型，如 图 1-6 所示。 图1-6 选择注册的账号类型

📄 Page 15

微信小程序开发实战（第 2 版） 6 从图 1-6 中可以看出微信公众平台提供了4 种账号类型，分别是“订阅号”“服务号”“小程序”“企业 微信”。其中，“订阅号”主要用于为媒体和个人提供一种新的信息传播方式，类似于报纸、杂志等，可提供 新闻信息或娱乐趣事等；“服务号”主要用于为企业和组织提供更强大的业务服务与用户管理能力，偏向服 务类交互，类似于银行服务平台、全国 12315 平台、114 查号台等，可提供查询服务；“小程序”适用于有 服务内容的企业和组织，可被便捷地获取和传播；“企业微信”是一个面向企业级市场的产品，是一款优秀 的基础办公应用，专门提供给企业使用。 ③ 在图1-6中，单击“小程序”链接，跳转到小程序注册页面，如图1-7所示。 图1-7 小程序注册页面 ④ 在图1-7中根据提示填入自己的邮箱、密码、确认密码等，完成账号信息的填写。 ⑤ 单击“注册”按钮，进入提示邮箱激活页面，如图1-8所示。 图1-8 提示邮箱激活页面

📄 Page 16

第 1 章 微信小程序入门 7 ⑥ 单击“登录邮箱”按钮，登录步骤④中填写的邮箱，查看收到的账号激活链接，如图1-9所示。 图1-9 账号激活链接 ⑦ 单击图 1-9 中的账号激活链接，将跳转到用户信息登记页面，根据页面提示进行用户信息登记，如 图1-10所示。 图1-10 用户信息登记页面 ⑧ 填写完用户相关信息后，单击“继续”按钮，进入微信小程序管理后台，如图1-11所示。

📄 Page 17

微信小程序开发实战（第 2 版） 8 图1-11 微信小程序管理后台 在图1-11 中，微信小程序管理后台显示了微信小程序的发布流程，共分为3 个步骤：第1 步是小程序 信息和小程序类目，第2步是小程序开发与管理，第3步是版本管理。关于微信小程序的发布流程，将会在 1.6节中进行详细讲解。 至此，微信小程序开发账号已注册完成。 1.2.2 获取微信小程序 AppID 在微信小程序中，AppID又称为小程序ID，是每个小程序的唯一标识，每个小程序账号只有一个AppID， 因此每个账号只能发布一个小程序，如果要发布多个小程序，需要注册多个小程序账号。下面讲解如何获取 微信小程序的AppID。 首先登录微信小程序管理后台，在左侧边栏中选择“开发管理”，然后再选择“开发设置”，即可查看 AppID，如图1-12所示。 图1-12 查看AppID

📄 Page 18

第 1 章 微信小程序入门 9 图1-12中获取的AppID将会在创建微信小程序项目时用到。 1.2.3 安装微信开发者工具 微信公众平台为开发者提供了微信开发者工具，帮助开发者快速实现微信小程序的开发。安装微信开发 者工具的步骤如下。 ① 在微信小程序管理后台的左侧边栏中选择“开发工具”，然后选择“开发者工具”，即可找到微信开 发者工具的下载页面，如图1-13所示。 图1-13 微信开发者工具的下载页面 ② 单击图1-13中的“下载”按钮，即可跳转到微信开发者工具的下载链接页面，如图1-14所示。 图1-14 微信开发者工具的下载链接页面 从图 1-14 中可以看出，微信开发者工具分为稳定版、预发布版、开发版和小游戏版，且支持 Windows 和macOS操作系统。 ③ 本书以稳定版为例进行讲解，单击稳定版的“Windows 64”链接下载该版本的微信开发者工具安装 包，安装包名称为“wechat_devtools_1.06.2206090_win32_x64.exe”。读者也可根据自己的环境和需求选择合适 的版本进行下载。 需要注意的是，微信开发者工具的版本会不断升级。在编著本书时，微信开发者工具的最新版本是

📄 Page 19

微信小程序开发实战（第 2 版） 10 1.06.2206090。当读者使用本书时，在微信开发者工具的下载页面看到的版本可能会被更新，但是下载方式 与1.06.2206090类似。 ④ 双击微信开发者工具的安装包，进入微信开发者工具的安装向导，安装向导如图1-15所示。 本书中省略安装的中间步骤，读者根据安装向导进行操作，即可完成微信开发者工具的安装，安装完成 后如图1-16所示。 图1-15 安装向导 图1-16 安装完成 至此，微信开发者工具已安装完成。 1.2.4 创建微信小程序项目 在进行微信小程序开发前，需要创建一个空的微信小程序项目，创建完成后可以进行代码的编写。下面 演示如何创建微信小程序项目。 ① 首次打开微信开发者工具时，会出现一个登录界面，如图1-17所示。 在登录界面中，可以使用微信扫码登录微信开发者工具，微信开发者工具将使用这个微信账号的信息进 行微信小程序的开发和调试。 ② 使用微信扫码登录成功后会进入微信开发者工具的项目选择界面，如图1-18所示。 图1-17 登录界面 图1-18 项目选择界面 ③ 单击图1-18中的“+”可以进入微信小程序项目的创建界面，如图1-19所示。

📄 Page 20

第 1 章 微信小程序入门 11 图1-19 微信小程序项目的创建界面 在图1-19中，读者可以自定义项目名称和目录，如填写项目名称为“HELLO”，目录为“D:\miniprogram\hello”。 关于AppID、开发模式、后端服务和模板选择的具体解释如下。  AppID：填写 1.2.2 小节获取的 AppID 即可。如果不想使用自己的 AppID，也可以使用测试号，二者 的区别是，前者能够使用的功能比后者多，例如代码的上传和发布。  开发模式：有“小程序”和“插件”两种选择，由于我们要创建一个微信小程序项目，所以此处应 选择“小程序”。  后端服务：有“微信云开发”和“不使用云服务”两种选择。在“微信云开发”中，开发者无须搭 建服务器，即可使用云函数、云数据库、云存储和微信云托管等完整云端能力。初学者在没有掌握基础知识 之前进行云开发会有一定难度。本书中的项目统一选择“不使用云服务”。  模板选择：微信开发者工具提供了多种模板用于快速创建微信小程序项目。为了方便学习，此处选 择“不使用模板”。 将图 1-19 中的内容填写完成后，单击“确定”按钮创建微信小程序项目。稍作等待后，微信小程序项 目即可创建完成。 微信开发者工具允许用户对其进行外观设置，包括主题、调试器主题和自定义外观。默认的主题为深色， 如果想设置为其他颜色，更换选项即可。下面以更换主题为例来演示如何对微信开发者工具的主题进行设置。 首先单击图 1-18 中的“ ”进入设置页面，然后在弹出的设置页面中单击“外观”选项进入外观设置页面， 最后在主题下面的单选框中选择需要更换的主题。外观设置页面如图 1-20 所示。 图1-20 外观设置页面 多学一招：微信开发者工具的外观设置