微信小程序项目实战（AI编程+视频图解）

版权信息

书名：微信小程序项目实战（AI编程+视频图解）

ISBN：978-7-115-68632-9

本书由人民邮电出版社发行数字版。版权所有，侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。

如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。

版  权

著    刘 刚 高伟南 李华威

责任编辑 林舒媛

人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

邮编　100164 　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

读者服务热线：(010)81055410

反盗版热线：(010)81055315

内 容 提 要

本书系统地介绍利用AI编程工具辅助开发微信小程序的完整流程，以开发“莫凡商城”项目为主线，详细讲解从环境搭建到功能实现的开发小程序的各个环节。

本书创新性地将AI编程工具深度整合到开发流程中，通过“需求分析—技术实现—AI优化”的实践模式，提供AI代码自动生成和优化的解决方案。本书包含大量基于通义灵码的实例，可以帮助开发者提升开发效率。

本书适合微信小程序开发者、前端工程师、AI技术应用实践者，以及计算机相关专业师生阅读，可以帮助读者掌握利用AI辅助开发小程序的核心方法，快速实现小程序的开发。

前  言

在人工智能（Artificial Intelligence，AI）技术快速发展的当下，AI编程工具正在深刻改变传统的软件开发模式。通义灵码作为新一代智能编程助手，显著提升了微信小程序的开发效率。本书旨在系统地介绍如何运用通义灵码辅助微信小程序开发，通过完整的项目案例，帮助读者掌握AI辅助小程序开发的核心方法与技巧。

本书以莫凡商城小程序的开发为例，内容涵盖从开发环境搭建到小程序功能实现的完整流程。本书分为3个部分：第1、2章重点讲解开发环境配置和项目结构设计；第3～6章讲解页面布局、动态数据绑定、用户注册和登录等关键功能的开发；第7～9章深入探讨支付系统、设备应用API等。每章均包含通义灵码的具体应用实例，展示AI编程工具在实际开发中的应用场景。

本书采用理论与实践相结合的教学方法。在内容编排上，每章开头设置学习地图，清晰标注核心知识点和技能目标。通过“情景引入—理论讲解—项目实战”的学习路径，帮助读者循序渐进地掌握开发技能。特别设计的AI辅助开发提示框，详细说明如何利用通义灵码优化开发流程。

本书主要面向具有一定编程基础的微信小程序开发者、前端工程师，以及计算机相关专业的师生。建议读者按顺序系统学习，并动手实践所有项目案例。通过实际操作体验AI编程工具对开发效率的提升，将所学知识快速转化为实际开发能力。

本书由多位具有丰富实战经验的开发者共同编写完成。在编写过程中得到了通义灵码技术团队的专业支持，并参考了微信官方文档和开源社区的最佳实践。配套资源包含完整项目代码和AI提示词库，读者可通过异步社区官网获取最新版本。

作者 

2026年1月

本书配套视频，打开微信App扫码即可观看。

第1章　AI编程工具与微信小程序

随着微信小程序的发展和普及，越来越多的企业和个人开发者加入这个领域。微信小程序以其便捷的用户体验和较低的开发门槛，成为创新业务和服务的试验田。然而，随着小程序数量的激增，开发者面临的竞争也越来越激烈。如何使自己开发的小程序脱颖而出，如何提高小程序的开发效率和质量，成为开发者关注的焦点。在这个背景下，AI编程工具的出现为微信小程序的开发带来了新的机遇。利用人工智能技术，AI编程工具能够辅助开发者更快地完成小程序的开发，优化代码结构，甚至预测和解决潜在的问题。

本章将介绍AI编程工具与微信小程序，以及如何利用这些工具提升微信小程序的开发效率和质量。

1.1 AI辅助编程

随着人工智能技术的快速迭代，AI辅助编程已从概念验证发展为开发者日常编程会用到的手段。这一技术革新不仅改变了传统的编程流程，而且重新定义了人机协作的边界。

1.1.1　AI辅助编程的概念

AI辅助编程是指利用人工智能技术来辅助开发者完成编程任务的技术。这种技术可以通过机器学习、自然语言处理和其他AI算法来理解开发者的意图，自动生成代码、修复代码错误、优化代码性能、提高代码质量。AI辅助编程的目标是降低开发难度、提高开发效率，并减少人为错误。

1.1.2　AI辅助编程的应用场景

AI辅助编程的应用场景涵盖多个方面，通过智能化的代码生成和优化，极大地提升了开发效率和代码质量。图1.1展示了AI辅助编程的一些具体应用场景。

图1.1　AI辅助编程的一些具体应用场景

1.1.3　常见的几种AI编程工具

在AI辅助编程的领域，许多AI编程工具已经被开发并广泛应用于开发者的日常工作中。图1.2展示了一些常见的AI编程工具。

图1.2　常见的AI编程工具

1.2 微信小程序开发环境搭建与基础技术准备

随着微信小程序的普及，越来越多的开发者开始涉足这一领域，而搭建开发环境是开发微信小程序的基础。本节将介绍搭建微信小程序开发环境的过程与开发微信小程序需要具备的基础技术。

1.2.1　微信小程序开发环境搭建

微信小程序开发环境的搭建很简单，有以下3个步骤。

（1）下载微信开发者工具。

进入微信公众平台官网首页，将鼠标指针放在“账号分类”下的“小程序”处，可以看到图1.3所示的“小程序开发文档”。单击“小程序开发文档”，在打开的页面中选择“工具”→“下载”，可以看到平台为不同的操作系统提供了不同版本的微信开发者工具（见图1.4），开发者可以根据自己的操作系统下载相应的版本（因为微信开发者工具的版本更新很快，所以实际版本以读者操作时所见为准）。

图1.3　找到“小程序开发文档”

图1.4　下载微信开发者工具

（2）注册微信公众平台账号。

在微信公众平台官网首页单击上方的“立即注册”，进入图1.5所示的注册微信公众平台账号页面，选择“小程序”类别进行注册。小程序支持个人开发者账号，可以注册个人账号；如果非个人主体需要注册开发者账号，也可以进行非个人主体认证。这两种账号都可以发布小程序。

图1.5　注册微信公众平台账号页面

（3）安装并登录微信开发者工具。

按照提示完成微信开发者工具的安装，安装完成后，运行微信开发者工具，会出现一个二维码，需要用绑定了微信公众平台的微信账号扫码登录。图1.6所示为微信开发者工具扫码登录页面。

图1.6　微信开发者工具扫码登录页面

1.2.2　基础技术准备

虽然微信小程序开发的入门门槛较低、学习成本低，但开发者也需要具备一些基础技术。微信小程序特有的标记语言称为WXML，它的使用方法类似于超文本标记语言（Hypertext Markup Language，HTML），所以开发者需要对HTML有所了解。微信小程序还有自己的样式语言WXSS，它兼容串联样式表（Cascading Style Sheets，CSS）并做了扩展，所以开发者需要对CSS有所了解。微信小程序是使用JavaScript来进行业务处理的，兼容大部分JavaScript功能，但仍有一些功能无法使用，所以开发者还需要对JavaScript有所了解。有了HTML、CSS和JavaScript功底，学习微信小程序的开发就非常容易了。

1.3 微信开发者工具的使用

要进行微信小程序开发，首先需要掌握微信开发者工具的使用方法。工具使用得越　熟练，越有助于微信小程序的开发和提高开发效率。下面具体介绍微信开发者工具的使用方法。

1.3.1　创建项目

（1）创建一个小程序项目前，需要获取小程序ID（AppID）。要获取微信小程序的AppID，需要在微信公众平台登录账号，选择“开发管理”→“开发设置”，获取AppID，如图 1.7所示。

图1.7　获取AppID

（2）打开微信开发者工具，创建一个“miniprogram-68”项目，将项目文件存放到“miniprogram- 68”文件夹中，其他设置保持默认，如图1.8所示。

图1.8　设置项目

（3）单击“创建”按钮，即可创建一个小程序项目，同时进入微信开发者工具界面，如图1.9所示。

图1.9　微信开发者工具界面

1.3.2　微信开发者工具界面

微信开发者工具界面可以分为五大功能区域：菜单栏、工具栏、模拟器、编辑器、调试器，如图1.10所示。

图1.10　微信开发者工具界面的五大功能区域

1．菜单栏

菜单栏中有“微信开发者工具”“项目”“文件”“编辑”“工具”“转到”“选择”“视图”“界面”“设置”“帮助”11个菜单，包含了软件的一些常用命令。

• “微信开发者工具”菜单：通过该菜单可以对微信开发者工具进行升级，以及进行回退和退出等操作。

• “项目”菜单：通过该菜单可以新建项目、导入项目、打开最近项目、新建代码片段、导入代码片段、查看所有项目和关闭当前项目，从而对小程序项目或代码片段进行管理和使用。

• “文件”菜单：通过该菜单可以新建文件、保存文件、保存所有文件和关闭文件。

• “编辑”菜单：用于对代码进行管理，通过该菜单可以格式化代码等。

• “工具”菜单：用于编译、刷新、预览、清除缓存等。

• “转到”菜单：用于切换编辑器、切换组、转到上一个问题、转到下一个问题等。

• “选择”菜单：用于操作编辑器区域的代码，包括全选、复制行等。

• “视图”菜单：用于设置编辑器布局、开发工具外观。

• “界面”菜单：用于显示或隐藏工具栏、模拟器、编辑器、调试器区域。

• “设置”菜单：通过该菜单，可以进行通用设置、外观设置、快捷键设置、编辑设置、代理设置、安全设置、项目设置。

• “帮助”菜单：包括开发者社区、开发者文档、功能引导教程等。

2．工具栏

工具栏包含小程序开发中常使用的按钮和下拉列表框。

• “模拟器”“编辑器”“调试器”按钮：这3个按钮可以控制模拟器、编辑器、调试器区域的显示或隐藏。

• “可视化”按钮：用于查看模拟器中指定区域的代码，如代码的组织结构、组件使用、属性等。

• “云开发”按钮：单击此按钮可以进入小程序云开发控制台，进行小程序云开发。

• “小程序模式”下拉列表框：其中包含3种模式。第一种是“小程序模式”，用于正常开发小程序项目；第二种是“插件模式”，用于开发小程序插件；第三种是“多端应用模式”，开发者可以编写一次代码，并将其分别编译为小程序、Android应用、iOS应用，实现多端开发。

• “编译”按钮：单击此按钮（或按Ctrl+B快捷键）可编译当前代码，并自动刷新模拟器。鉴于开发时需调试从不同场景进入具体的页面，开发者可以添加或选择已有的自定义编译条件进行编译和代码预览。打开“普通编译”下拉列表，选择“添加编译模式”选项，弹出图1.11所示的“添加编译模式”对话框。

图1.11 “添加编译模式”对话框

• “预览”按钮：单击该按钮可以将小程序上传并生成二维码预览界面（见图1.12），扫描二维码后可以在手机上预览小程序。

图1.12 预览二维码

• “真机调试”按钮：小程序允许在真机上调试，单击此按钮，可以在发布之前查看小程序在真机上的运行效果。

• “清缓存”按钮：用于清除缓存，包括清除模拟器缓存、清除编译缓存、清除项目文件列表缓存、全部清除。

• “上传”按钮：小程序开发完成后，单击此按钮即可将其上传到腾讯服务器（见图1.13）进行测试。在手机上可以预览开发版本的小程序。

• “版本管理”按钮：单击此按钮，可以将小程序代码上传到Git，以便进行版本管理和多人协作开发。

• “详情”按钮：用于查看微信开发者工具的基本配置信息、性能分析信息、本地设置、项目配置信息。

图1.13　上传小程序到到腾讯服务器

• “消息”按钮：用于给开发者发送消息。

3．模拟器

在小程序开发过程中，小程序的页面会随着代码的编写实时变化，模拟器区域用于显示小程序界面，以便开发和调试小程序。模拟器可以模拟小程序在各个终端设备（如“iPhone 15 Pro Max”“iPhone 16 Pro Max”等）上的操作效果，也可以设置模拟器区域的百分比大小等。

4．编辑器

编辑器区域分为两部分：一部分用于展示项目文件目录和文件结构，称为目录树；另一部分用于编辑代码，称为代码编辑区域，如图1.14所示。

5．调试器

常用的小程序调试窗口有Wxml、Console、Network、Storage等。

图1.14　编辑器区域

• Wxml窗口：用于帮助开发者开发Wxml代码转化后的页面（见图1.15）。开发者在这里可以看到小程序真实的页面结构及结构对应的WXSS属性，还可以修改对应的WXSS属性。

图1.15　Wxml窗口

• Console窗口：可以显示小程序的错误信息和调试代码，还可以进行代码编写和调试，如图1.16所示。

图1.16　Console窗口

• Network窗口：用于观察发送的请求和调用文件的信息，包括文件名称、路径、大小、调用的状态、时间等，如图1.17所示。

图1.17　Network窗口

• Storage窗口：用于显示当前项目使用wx.setStorage()或wx.setStorageSync()后的数据存储情况，如图1.18所示。

图1.18　Storage窗口

1.3.3　常用的快捷键

为了方便开发者使用，微信开发者工具提供了很多快捷键，可简化操作步骤。常用的快捷键（Windows）及其功能具体如表1.1所示。

表1.1　常用的快捷键（Windows）及其功能

1.4 VS Code

在众多的代码编辑器中，VS Code以其强大的功能和灵活性赢得了广大开发者的青睐。它不仅提供丰富的编程语言支持，还拥有诸多实用的特性，可使编程工作变得更加高效。

1.4.1　VS Code的安装与使用

VS Code是一款由微软公司开发的开源的代码编辑器，它支持多种编程语言，具有语法高亮、智能代码补全、括号匹配、代码缩进、代码对比差异、Git 控制等功能。下面介绍VS Code的安装与使用方法。

1．下载VS Code

（1）打开VS Code官网，进入下载页面。

（2）根据所用的操作系统（Windows、macOS、Linux）下载相应版本的VS Code，图1.19所示为VS Code的版本。

图1.19　VS Code的版本

2．安装VS Code

• 对于Windows用户，运行下载的.exe文件，按照安装向导的指示完成安装。

• 对于macOS用户，打开下载的.dmg文件，然后将VS Code拖曳到“应用程序”文件夹中。

• 对于Linux用户，可以从软件包管理器安装，或者下载.deb或.rpm文件进行安装。

3．启动VS Code

本书使用macOS，VS Code的使用方法与Windows系统差别不大，请使用Windows系统的读者放心学习。安装完成后，可以在“应用程序”文件夹找到VS Code图标并双击，以启动VS Code。

成功下载并安装VS Code之后，下面介绍VS Code的工作界面以及如何使用VS Code。

1．界面概览

VS Code界面可分为活动栏、侧边栏、编辑器、状态栏4部分，如图1.20所示。

• 活动栏：位于界面最左侧，包含用于访问不同视图（如资源管理器、搜索、源代码管理、运行和调试等）的按钮。

• 侧边栏：显示活动栏所选视图的内容。

• 编辑器：编写代码的主要区域。

• 状态栏：位于界面底部，显示当前打开的文件、语言模式、Git分支等信息。

图1.20　VS Code界面

2．基本操作

• 打开文件夹：打开“文件”菜单，选择“打开文件夹”，如图1.21所示。

图1.21　选择“打开文件夹”

• 新建文件：在资源管理器中的空白处右击并选择“新建文件”，或者单击“新建文件”按钮，如图1.22所示。

• 保存文件：按Ctrl + S（Windows/Linux）或Command + S（macOS）快捷键。

图1.22　新建文件

1.4.2　下载与安装AI编程工具插件

AI编程工具插件可以显著提升编程效率，具备智能问答、智能代码补全、错误检测、代码重构等功能，可让开发体验更加流畅。以下是下载并安装AI编程工具插件的步骤，以安装通义灵码插件为例。

（1）打开VS Code：在“应用程序”文件夹中找到VS Code，双击图标启动，或通过Spotlight搜索（Command+空格键）输入“VS Code”并回车打开。

（2）进入扩展视图：单击活动栏中的“扩展”按钮，或者按Ctrl+Shift+X（Windows/Linux）或Command+Shift+X（macOS）快捷键。

（3）安装简体中文插件：打开VS Code后，默认为英文版本，需要安装中文插件，在扩展视图中搜索“简体中文”，选择第一个插件，单击Install按钮开始安装（见图1.23）。安装完成后会出现一个弹窗，单击Change Language and Restart（改变语言并重启）按钮，如图1.24所示。

图1.23　安装简体中文插件

图1.24　改变语言并重启

（4）查找通义灵码插件：在扩展视图中搜索“通义灵码”，搜索结果如图1.25所示。

图1.25　搜索“通义灵码”

（5）安装通义灵码插件：在搜索结果中单击通义灵码插件对应的“安装”按钮开始安装，如图1.26所示。

图1.26　安装通义灵码插件

（6）激活插件：安装完成后，根据提示单击“重新加载”按钮以激活插件。

（7）登录插件：激活插件后需要登录才能使用插件，单击“登录”，如图1.27所示，跳转到阿里云登录界面，使用手机号和验证码登录（需已注册），如图1.28所示。

图1.27　单击“登录”

图1.28　阿里云登录界面

登录成功后，通义灵码插件便已准备就绪，开发者可以直接在代码编辑器中使用其提供的AI功能，通义灵码的开始使用界面如图1.29所示。

图1.29　通义灵码的开始使用界面

1.4.3　对AI编程工具提问的技巧

在使用AI编程工具（如通义灵码）辅助开发微信小程序时，精确的提问能够显著提高获得有用回答的概率。这里提供一些提问技巧（见图1.30），以帮助开发者更好地利用AI编程工具。

图1.30　提问技巧

1.5 莫凡商城小程序项目

莫凡商城小程序是一个完整的小程序项目，主要实现图书商品的展示与销售功能，是非常具有代表性的小程序项目。莫凡商城小程序分为“我的”模块、“首页”模块、“购物车”模块和“分类”模块。“我的”模块用来显示用户的订单，并实现修改密码、意见反馈等功能；“首页”模块显示轮播海报、“热门技术”区域、“特惠时刻”区域、“畅销图书”区域；“购物车”模块用于显示用户想要购买的商品列表；“分类”模块将销售的图书进行一、二级分类，并按分类显示图书商品。本节主要介绍莫凡商城小程序主要模块的功能。

1.5.1　“我的”模块的功能

“我的”模块需要实现底部标签导航功能、注册功能、登录功能、列表式导航功能、修改密码功能、意见反馈功能、清除缓存功能和我的订单功能。

• 底部标签导航功能：莫凡商城小程序的底部标签导航包括“首页”“分类”“购物车”“我的”4个标签，切换底部标签，可以显示对应的内容。

• 注册功能：注册是小程序中不可或缺的功能，要让用户在莫凡商城小程序中创建一个属于自己的账号，就需要用到注册功能。

• 登录功能：莫凡商城小程序提供了账号密码登录和手机验证码登录两种登录方式。

• 列表式导航功能：莫凡商城小程序中的“我的”页面采用列表式导航来显示内容，这也是很多小程序会采用的一种方式。

• 修改密码功能：用户可以修改自己的密码，通过输入原密码、输入新密码、确认密码并提交就可以完成密码的修改。

• 意见反馈功能：用户可以填写自己的意见或建议并提交。

• 清除缓存功能：可以清理掉缓存在小程序中的数据。

• 我的订单功能：提供“待付款”订单列表、“待收货”订单列表和“已完成”订单列表，如果没有订单，则显示空列表。

1.5.2　“首页”模块的功能

“首页”模块具有海报轮播功能、图书列表显示功能、图书搜索功能和更多图书显示功能。

• 海报轮播功能：这是小程序很常见的功能，它在有限的空间，通过轮播的形式显示不同的内容。

• 图书列表显示功能：包括“热门技术”列表、“特惠时刻”列表和“畅销图书”　　　　列表。

• 图书搜索功能：提供图书搜索框和热门图书搜索标签列表，用户可以输入图书相关关键字进行搜索。

• 更多图书显示功能：每个类别只显示3本书，点击“更多”将显示更多该类别的图书。

1.5.3　“购物车”模块的功能

“购物车”模块具有商品详情页、商品加入购物车功能、立即购买功能、收货地址列表、新增地址功能、编辑地址功能和支付功能等。

• 商品详情页：用于显示图书轮播图片、图书介绍、图书价格等内容。

• 商品加入购物车功能：用于将图书加入购物车，购物车中图书的数量会随操作而　变化。

• 立即购买功能：以列表的形式显示已加入购物车的图书，可以显示选中商品的总价并进行结算。

• 收货地址列表：用来显示用户购买图书时可以选择的收货地址，这些收货地址以列表的方式进行显示。

• 新增地址功能：可以创建新的收货地址。

• 编辑地址功能：对于已有的收货地址，也可以重新进行编辑。

• 支付功能：微信小程序只支持微信支付，提供微信支付应用程序接口（Apptication Program Interface，API）。在图书提交订单页和订单详情页都可以发起微信支付，支付成功后，会跳转到支付成功页。可以在订单详情页中查看订单相关信息、收货地址信息及图书信息。

1.5.4　“分类”模块的功能

莫凡商城小程序对图书进行分类管理，按类别显示图书的相关内容。

• 图书分类分为一级分类和二级分类，通过手风琴式导航来显示。

• 打开图书一级分类和二级分类，可以查看相应分类下的所有图书。

1.6 项目实战：使用AI编程工具辅助创建莫凡商城小程序项目

莫凡商城小程序是贯穿全书的项目案例，通过本书内容可以了解如何完整地开发一个企业级的小程序。前文介绍了如何使用微信开发者工具创建项目以及AI编程工具插件的安装与使用方法，下面使用AI编程工具辅助创建莫凡商城小程序项目。

（1）在VS Code中，打开之前已经安装好的通义灵码插件，输入“我是一位前端开发工程师，现在我想要创建一个小程序项目，应该怎么做”。发送后，AI编程工具会告诉你详细的创建流程，如图1.31所示。

图1.31　使用AI编程工具获取创建小程序项目的流程

（2）根据AI编程工具的回答，打开微信开发者工具，创建莫凡商城小程序项目，“AppID”使用自己在微信公众平台获取的“AppID”，“后端服务”选择“不使用云服务”，如图1.32所示。

图1.32　创建莫凡商城小程序项目

（3）单击“创建”按钮，进入微信开发者工具，默认创建了一个小程序页面，包括3部分内容：一是显示“Hello World”（见图1.33）；二是点击默认头像可以获取微信头像（见图1.34）；三是点击“昵称”输入框，可以填写昵称信息（见图1.35）。

图1.33　显示“Hello World”

图1.34　获取微信头像

图1.35　输入昵称

（4）在pages/index/index.js文件里，Page()函数的data里提供了数据源motto（见图1.36），data的数据可以动态地绑定到WXML页面。

图1.36　数据源motto

（5）在pages/index/index.wxml文件里，通过“{{}}”将motto绑定到页面（见图1.37）。如果改变index.js文件中的motto的值，如图1.38所示，重新运行小程序，可以看到页面的值也发生了改变。

图1.37　绑定motto

图1.38　改变motto的值

（6）在pages/index/index.wxss文件里，.usermotto是一个类选择器，用于选择带有class= "usermotto"的页面元素，color:■red;表示设置该元素的字体颜色为红色，如图1.39所示。

图1.39　添加样式

在实际开发过程中，虽然AI编程工具能够提供代码生成和优化建议，但开发者需要根据自己的具体需求和项目的实际情况来灵活调整和修改代码，不能完全依赖AI编程工具的输出，因为AI编程工具可能无法完全理解项目的业务逻辑和个性化需求。因此，开发者需要具备一定的编程能力和业务理解能力，以确保最终实现的功能能够满足用户需求并达到预期的效果。