党的二十大报告指出，加快发展数字经济，促进数字经济和实体经济深度融合，打造具有国际竞争力的数字产业集群。在这一时代背景下，数字人才将成为促进经济全面数字化转型的核心动力。因此，培养掌握数字化技能的专门人才至关重要，他们将在研发、创新等数字化技术应用领域发挥关键作用。

　　为响应党的号召并满足市场需求，我们精心编写了这本《微信小程序开发入门与项目实战》教材。本教材不仅拥有完整的知识体系和丰富的内容，而且融入了最新的技术趋势和行业标准，旨在帮助学习者掌握前沿的开发技能。同时，我们还注重融入爱国主义精神、工匠精神和协同合作等核心价值观，以培养全面发展的高素质人才。

　　本教材采用“项目引导、任务驱动”的教学方法，通过一系列实际案例激发学习者的学习兴趣和创新能力。除综合项目外，其他项目均按照“知识准备→项目实施→拓展训练”的流程进行，使学习者在实践中掌握知识和技能，提高解决实际问题的能力。经过学习，学习者将具备应用软件项目开发的全流程能力，为未来的职业发展奠定坚实基础。

　　此外，本教材紧密结合当前市场需求和行业发展趋势，力求使学习者在掌握微信小程序开发的基础上，能够顺应时代潮流不断创新和发展。随着数字化时代的深入发展和智能移动设备的大规模普及，人们对于服务获取渠道和方式提出了更高要求。在这个背景下，微信小程序凭借其便捷特性以及与微信平台的集成优势，迅速成为移动互联网领域的明星产品。本教材旨在为希望投身小程序开发领域的读者提供一本系统且实用的教材。在编写过程中，我们紧密关注微信小程序官方文档的更新动态和实际应用场景的需求变化，力求呈现前沿且实用的开发知识和技能。

　　全书内容划分为12个项目，每个项目都是一个独立的学习单元，但又彼此关联，共同构成了微信小程序开发的完整知识体系。

　　项目1~4聚焦于基础知识的讲授，从开发环境的搭建到小程序的基本架构和页面布局，每一步都讲解得详尽细致，确保读者能够稳固掌握小程序开发的入门基础。

　　随后的7个项目则逐步深入小程序的各项功能开发。教材将通过一系列精心设计的案例，带领读者学习和应用微信小程序提供的各种API接口。无论是网络通信、数据存储、地理位置定位，还是与硬件设备的交互等高级功能，读者都能在本书中找到清晰的指引和实用的示例代码。

　　最后的综合项目则是一次对所学知识的全面应用和升华。通过模拟实际的应用场景和开发需求，本教材将指导读者综合运用之前所学，开发出一个功能完备、用户体验优良的微信小程序应用。

　　在编写教材过程中，还得到其他职业院校专家、同仁的关心指导和大力支持。在此，我们一并表示诚挚的谢意。

　　在编写本教材的过程中，编者参考、引用和改编了国内外出版物中的相关资料以及网络资源，在此表示深深的谢意!相关著作权人看到本教材后，请与出版社联系，出版社将按照相关法律的规定支付稿酬。

　　由于编者水平有限，教材中难免有疏漏和不妥之处，恳请读者与专家批评指正。

　　编  者

　　2024年7月

项目1  微信小程序入门 / 1

  1.1  知识准备 / 1

    1.1.1  微信小程序概述 / 1

    1.1.2  开发团队管理 / 3

  1.2  项目实施 / 4

    任务1  微信小程序开发前准备工作 / 4

    任务2  人员组织结构分配 / 6

  拓展训练  微信小程序开发准备工作 / 8

  项目小结 / 8

  同步练习 / 8

项目2  开发环境搭建及开发工具介绍 / 10

  2.1  知识准备 / 10

    2.1.1  开发环境搭建 / 11

    2.1.2  创建首个微信小程序 / 11

  2.2  项目实施 / 11

    任务1  软件安装 / 11

    任务2  微信开发者工具功能使用 / 14

  拓展训练  搭建环境创建项目 / 19

  项目小结 / 19

  同步练习 / 19

项目3  从“HelloWechat”开启微信小程序之旅 / 21

  3.1  知识准备 / 21

    3.1.1  小程序目录结构 / 22

    3.1.2  页面元素和样式 / 24

    3.1.3  Flex布局 / 26

    3.1.4  自适应尺寸单位 / 28

  3.2  项目实施 / 30

    任务1  手动编写第一个小程序页面 / 30

    任务2  设计小程序页面样式 / 32

    任务3  全局样式设计及项目配置 / 33

  拓展训练  首个微信小程序的Hello World / 36

  项目小结 / 37

  同步练习 / 37

项目4  新闻列表页面设计 / 39

  4.1  知识准备 / 39

    4.1.1  swiper组件 / 40

    4.1.2  image组件的缩放模式及裁剪模式 / 41

    4.1.3  Page页面的生命周期 / 44

    4.1.4  数据绑定 / 48

    4.1.5  列表渲染 / 52

    4.1.6  事件 / 54

    4.1.7  模块化 / 56

    4.1.8  模板化应用 / 58

  4.2  项目实施 / 58

    任务1  新闻列表页面元素分析及准备工作 / 58

    任务2  实现新闻轮播展示效果 / 59

    任务3  新闻列表骨架及样式构建 / 61

    任务4  静态展示新闻列表 / 64

    任务5  新闻数据绑定 / 66

    任务6  导航栏设置及页面跳转设置 / 74

    任务7  数据与业务分离并引用模块 / 76

    任务8  业务逻辑模块化并引入样式模块 / 78

  拓展训练  仿微信“发现”页小程序设计 / 79

  项目小结 / 79

  同步练习 / 80

目录

项目5  天气预报查询实现 / 82

  5.1  知识准备 / 82

    5.1.1  服务器数据交互 / 82

    5.1.2  API密钥申请 / 87

    5.1.3  API调用方法 / 89

    5.1.4  服务器域名配置 / 91

  5.2  项目实施 / 91

    任务1  构建项目 / 91

    任务2  页面结构及样式设计 / 92

    任务3  逻辑实现 / 96

  拓展训练  自制格点天气预测小程序 / 100

  项目小结 / 101

  同步练习 / 101

项目6  美好时光视频相册制作 / 103

  6.1  知识准备 / 103

    6.1.1  video组件 / 104

    6.1.2  腾讯视频插件 / 107

  6.2  项目实施 / 108

    任务1  设计页面结构及样式 / 108

    任务2  逻辑实现 / 111

  拓展训练  微信小程序视频录播系统 / 115

  项目小结 / 117

  同步练习 / 117

项目7  小程序电子书架设计 / 119

  7.1  知识准备 / 119

    7.1.1  保存临时文件到本地 / 119

    7.1.2  获取本地缓存文件信息 / 122

    7.1.3  获取本地缓存文件列表 / 125

    7.1.4  删除本地缓存文件 / 128

    7.1.5  打开指定文档 / 131

  7.2  项目实施 / 134

    任务1  页面结构设计 / 134

    任务2  逻辑实现 / 138

  拓展训练  微信小程序图片管理 / 144

  项目小结 / 146

  同步练习 / 146

项目8  学生学籍卡展示 / 148

  8.1  知识准备 / 148

    8.1.1  本地缓存 / 148

    8.1.2  数据存取 / 149

    8.1.3  数据的删除与清空 / 156

  8.2  项目实施 / 161

    任务1  页面结构设计 / 161

    任务2  逻辑实现 / 169

  拓展训练  微信小程序商城 / 176

  项目小结 / 177

  同步练习 / 177

项目9  会议邀请函设计 / 180

  9.1  知识准备 / 180

    9.1.1  位置信息的获取和选择 / 180

    9.1.2  map组件 / 187

  9.2  项目实施 / 190

    任务1  页面结构设计 / 190

    任务2  逻辑实现 / 194

  拓展训练  微信小程序外卖应用 / 196

  项目小结 / 197

  同步练习 / 197

项目10  设计实现模拟时钟 / 199

  10.1  知识准备 / 199

    10.1.1  canvas组件 / 199

    10.1.2  canvas对象相关方法 / 201

  10.2  项目实施 / 203

    任务1  时钟界面设计 / 203

    任务2  逻辑实现 / 205

  拓展训练  随心绘图小工具 / 215

  项目小结 / 216

  同步练习 / 216

项目11  推箱子游戏设计 / 219

  11.1  知识准备 / 219

    11.1.1  首页功能需求分析 / 220

    11.1.2  游戏页面功能需求 / 220

  11.2  项目实施 / 220

    任务1  页面配置 / 220

    任务2  视图设计 / 221

    任务3  逻辑实现 / 225

  扩展训练  音乐播放器小程序 / 238

  项目小结 / 239

  同步练习 / 239

项目12  综合项目——校园点餐小程序 / 240

  12.1  开发准备 / 241

    12.1.1  项目预览展示 / 241

    12.1.2  项目分析 / 242

  12.2  项目初始化 / 243

    12.2.1  创建及配置项目 / 243

    12.2.2  封装网络请求 / 245

  12.3  项目实施 / 246

    任务1  首页设计实现 / 246

    任务2  菜单列表设计实现 / 249

    任务3  购物车功能实现 / 254

    任务4  订单确认页面设计实现 / 260

    任务5  订单详情页面设计实现 / 265

    任务6  订单列表与消费记录设计实现 / 268

  项目小结 / 273

参考文献 / 274