微信小程序开发从入门到实战 课件 第11、12章 实战项目二 电商小程序、小程序发布与运营

电商微信小程序目录项目概述与核心需求分析功能模块设计与实现总结与展望Part01项目概述与核心需求分析11.1.1项目概述本项目的目标是通过开发一个简化版的电商小程序，帮助学生掌握微信小程序开发的基础知识和技能。在这个小程序中，用户可以进行登录、浏览商品、购买商品、使用兑换码兑换商品、查看个人订单及修改地址等操作。整个小程序包括以下功能模块：1.获取手机号登录功能2.商品展示与购买功能3.兑换功能4.收货地址管理功能5.订单管理功能本项目将使用微信小程序的开发框架Taro实现一个完整的电商小程序。11.1项目概述与核心需求分析11.1.2核心需求分析1.用户身份管理：

需求：

用户通过手机号登录小程序，登录后可以查看和管理自己的订单、收货地址等。

解决方案：

使用微信的wx.login和wx.getPhoneNumberAPI实现用户的登录流程。2.商品展示与购买：

需求：

用户需要能够浏览商品列表，查看商品详情，选择商品的数量后进行购买。

解决方案：

使用swr从服务器获取商品列表，用户点击购买后进行支付。3.兑换功能：

需求：

用户输入兑换码，验证后可选择商品进行兑换。

解决方案：

提供兑换码输入框，验证兑换码的有效性并显示可兑换商品，用户选择商品后提交兑换信息。4.订单管理与收货地址管理：

需求：

用户查看和管理自己的订单，修改收货地址。

解决方案：

提供订单列表页面，用户可以查看自己的历史订单，点击订单查看详情。11.1项目概述与核心需求分析Part02功能模块设计与实现在本项目中，我们将基于微信小程序开发一个简化版的电商平台。为了使小程序能够满足基本的电商需求，我们将项目功能分解为多个独立的模块，每个模块负责实现特定的功能。通过这些功能模块的设计与实现，学生可以更好地理解微信小程序的开发流程，掌握常见的电商功能。本节将详细介绍各个功能模块的设计和实现步骤，确保读者能够理解并掌握如何开发这些功能模块。11.2功能模块设计与实现11.2.1环境配置和安装在开发电商小程序时，我们使用了以下技术栈：

Node.js：JavaScript运行时，用于构建和管理项目。

React：用于构建用户界面的JavaScript库。

Taro：跨平台开发框架，用于同时开发小程序和Web应用。

@antmjs/nutui组件库：基于react的移动端组件库，用于构建小程序UI。

TailwindCSS：实用的CSS框架，用于快速构建响应式和高效的UI。

SWR：React的数据请求库，用于简化数据获取和缓存的处理。本节将详细介绍如何安装和配置这些工具和依赖，以便你能够顺利启动项目并开始开发。11.2功能模块设计与实现11.2.1环境配置和安装安装Node.js

首先，需要确保你的开发环境中安装了Node.js。Node.js是构建和管理JavaScript项目的核心工具。

访问Node.js官网：/zh-cn下载并安装适合你操作系统的最新稳定版本。

安装完成后，打开命令行工具（如Terminal或CommandPrompt），输入以下命令检查是否安装成功：node-vnpm-v如果显示了Node.js和npm的版本号，说明安装成功。11.2功能模块设计与实现11.2.1环境配置和安装安装TaroTaro是一个多端开发框架，可以让你编写一次代码并生成微信小程序、H5、ReactNative等多平台的应用。为了实现跨平台功能，我们需要安装Taro。在命令行中运行以下命令安装TaroCLI：npminstall-g@tarojs/cli安装完成后，你可以通过以下命令检查Taro是否安装成功：taro--version11.2功能模块设计与实现11.2.1环境配置和安装安装React和相关依赖因为Taro支持React，所以需要安装React和ReactDOM。运行以下命令：npminstallreactreact-dom11.2功能模块设计与实现11.2.1环境配置和安装安装@antmjs/vantui组件库NutUIReact是京东出品的，一个专为小程序设计的UI组件库，提供了丰富的组件来帮助我们构建精美的界面。运行以下命令：npminstall@nutui/nutui-react-taro完成安装后，你可以在项目中开始使用该组件库提供的各种UI组件。11.2功能模块设计与实现11.2.1环境配置和安装安装TailwindCSSTailwindCSS是一个功能强大的CSS框架，能够帮助你快速构建响应式、现代化的界面。运行以下命令安装TailwindCSS和PostCSS：npminstalltailwindcsspostcssautoprefixer@tailwindcss/postcss7-compat--save-dev11.2功能模块设计与实现11.2.1环境配置和安装

安装SWRSWR是一个数据请求库，用于简化数据获取和缓存的操作。它非常适合与React配合使用，可以帮助你高效地进行数据获取和同步。

运行以下命令：npminstallswr11.2功能模块设计与实现11.2.1环境配置和安装配置微信小程序开发环境对于微信小程序开发，你需要安装

微信开发者工具，并配置开发环境：

下载并安装

微信开发者工具。

使用微信开发者工具打开Taro项目的dist/weapp目录，即可进行调试和开发。11.2功能模块设计与实现11.2.2获取手机号登录功能在电商小程序中，用户登录是用户体验的重要一环。为了提供简单且安全的登录方式，本项目采用微信小程序提供的手机号登录功能，结合微信的授权机制，用户可以通过微信快速登录并获得手机号，以便完成后续的购物、支付等操作。设计与实现步骤：1.授权用户登录：

当用户进入登录页面时，小程序会弹出授权框，要求用户授权手机号。通过微信的wx.login和wx.getPhoneNumberAPI，我们可以获取到用户的基本信息。2.手机号解密：

用户授权手机号后，微信会返回加密的手机号数据，前端将加密后的数据传递给后端，后端使用微信提供的解密工具解密得到用户真实的手机号，并存储在后端数据库中。3.登录成功处理：

用户登录成功后，系统会更新本地存储并设置is_Login状态标识，跳转到相应的页面，完成登录流程。11.2功能模块设计与实现11.2.2获取手机号登录功能示例代码：constgetPhoneNumber=(e)=>{if(e.detail.code){constsignIn=()=>{Taro.showLoading({title:'正在登录',mask:true});post('users/sign_in',{weixin_code:e.detail.code}).then((res)=>{if(res.id){Taro.showToast({title:'登录成功',icon:'none'});mutate();//更新用户信息状态setTimeout(()=>{Taro.hideLoading();Taro.navigateBack();//返回上一页面},1000);}}};11.2功能模块设计与实现11.2.2获取手机号登录功能解释：1.用户授权：

当用户点击“手机号快捷登录”按钮时，wx.getPhoneNumber被触发，获取用户的手机号授权。授权成功后，微信会返回一个加密的code。2.解密手机号并登录：

将获得的code发送到后端接口（users/sign_in），后端会解密并验证该手机号的有效性。如果登录成功，返回用户信息并保存到本地和服务器。3.登录成功：

显示登录成功的提示，并更新本地存储的用户信息。

设置全局状态is_Login为true，并通过mutate更新用户数据。

延迟一秒后，通过Taro.navigateBack()返回上一个页面。

用户协议：

登录前，用户需要勾选“我已经阅读并同意”协议，勾选后才可进行登录操作。用户还可以通过点击协议文本跳转至协议页面。11.2功能模块设计与实现11.2.2获取手机号登录效果图展示11.2功能模块设计与实现11.2.2获取手机号登录总结：通过本模块的实现，我们可以完成微信小程序的手机号登录功能。用户通过微信授权登录后，系统获取到加密的手机号数据并解密，完成用户的身份验证。此功能提供了一种简便且安全的登录方式，有效提高了用户体验。11.2功能模块设计与实现11.2.3商品展示与购买功能在电商小程序中，商品展示和购买功能是用户购物体验的核心模块。此部分内容包括商品列表展示、商品详情展示、商品购买数量的选择、收货地址的选择以及最终的支付操作。设计与实现步骤：1.商品列表展示：

通过useItems钩子从后端获取商品列表。

商品列表展示每个商品的简要信息，用户点击商品后，跳转到商品详情页。2.商品详情展示：

使用useItem钩子获取商品的详细信息，包括主图、子图、标题、价格、描述等。

用户可以选择购买数量，并查看其他商品的相关图文信息。3.商品购买：

用户选择数量并选择收货地址后，点击“支付订单”按钮，系统将发起支付请求。

使用微信支付API完成支付流程，并在支付成功后跳转回商城或返回上一页。11.2功能模块设计与实现11.2.3商品展示与购买功能示例代码：<divclassName="p-4bg-white">{items.map((v,index)=>(<divonClick={()=>{if(user?.id){Taro.navigateTo({url:`/pages/shop/item/index?id=${v.id}`});}else{Taro.navigateTo({url:'/pages/login/index'});}> <divclassName="col-span-6"><Imagesrc={v.main_image}mode="widthFix"/></div></div>

11.2功能模块设计与实现11.2.3商品展示与购买功能解释：1.商品列表页：

useItems钩子用于获取商品列表，展示商品的标题、价格和图片。用户点击商品时，如果已经登录，会跳转到商品详情页；否则，跳转到登录页。2.商品详情页：

useItem钩子用于获取商品的详细信息（如价格、描述、图片、库存等）。商品详情页展示了商品的大图、子图、标题、价格、数量选择等信息。

用户可以通过输入框选择购买的数量，选择收货地址后点击“支付订单”按钮发起支付。3.功能：

通过Taro.login获取用户的微信登录信息，获取openId后向后端发起支付请求。支付成功后，显示支付成功提示并跳转回商城首页。

11.2功能模块设计与实现11.2.3商品展示与购买功能效果图展示11.2功能模块设计与实现11.2.3商品展示与购买功能总结：通过以上实现，用户可以在小程序中浏览商品列表、查看商品详情、选择购买数量，并完成支付流程。此功能提供了完整的电商体验，包括商品展示、支付和订单处理。11.2功能模块设计与实现11.2.4兑换功能在电商小程序中，兑换功能通常用于促销活动，如输入兑换码后，用户可以获得折扣、优惠或免费商品。该功能增强了用户的购物体验并促进了平台的用户粘性。用户通过输入兑换码来兑换指定商品或服务，系统需要验证兑换码的有效性、选择收货地址并完成兑换操作。设计与实现步骤：在本节中，我们将详细描述如何在微信小程序中实现兑换功能，包括兑换码输入、收货地址选择和兑换操作的实现。1.兑换页面：

用户可以输入兑换码，选择收货地址，并点击“兑换”按钮完成兑换操作。我们使用Input组件来输入兑换码，Button组件来提交兑换请求，Swiper组件用于展示促销图片，DefaultDelivery组件用于选择收货地址。2.后端请求：

在用户点击兑换按钮后，系统会将兑换码和收货地址信息提交到后端。3.状态管理：

兑换成功后，系统会在全局状态中设置redeemSucceeded，并向用户展示提示信息。11.2功能模块设计与实现11.2.4兑换功能示例代码：<ButtononClick={()=>{if(!selectedDelivery){Taro.showToast({title:'请添加收货地址',icon:'none'})return}post('orders',{redeem_code:redeemCode,//提交兑换码address:selectedDelivery?.address,//收货地址}).then((res)=>{setGlobalData('redeemSucceeded',true)}

兑换</Button>11.2功能模块设计与实现11.2.4兑换功能解释：1.兑换码输入框：

我们使用Input组件来实现兑换码的输入。每当用户输入内容时，onChange事件会更新redeemCode状态。2.收货地址选择：

使用DefaultDelivery组件来展示用户的收货地址。setSelectedDelivery和selectedDelivery用于管理用户选择的收货地址。3.兑换按钮：

当用户点击“兑换”按钮时，确保用户输入了有效的兑换码并选择了收货地址。然后，通过post请求将兑换码和收货地址信息发送到后端进行处理。

如果后端响应成功，用户将收到兑换成功的提示，并且系统会在全局状态中设置redeemSucceeded标志，表示兑换成功。4.加载提示与反馈：

在兑换请求发起前，我们调用Taro.showLoading显示加载提示，在请求完成后，调用Taro.hideLoading隐藏加载提示。11.2功能模块设计与实现11.2.4兑换功能效果图展示11.2功能模块设计与实现11.2.4兑换功能总结：兑换功能是电商小程序中常见的功能模块，通常用于促销活动。通过实现兑换码输入、收货地址选择和兑换请求的处理，用户能够便捷地完成兑换操作。在本实现中，我们使用了Input组件获取兑换码、DefaultDelivery组件选择收货地址，并通过后端接口处理兑换请求，完成了兑换流程。11.2功能模块设计与实现11.2.5收货地址添加与修改功能在电商小程序中，收货地址管理是一个重要的功能模块，用户需要能够方便地添加、修改、删除自己的收货地址。设计与实现步骤：1.收货地址选择：

用户在需要选择收货地址时，可以点击某个地址，系统应将该地址设置为当前选择的地址，并返回上一页。此功能通常用于订单确认页。2.添加收货地址：

用户可以通过点击“新增收货地址”按钮来添加新的收货地址。该过程通常通过调用微信的chooseAddressAPI来获取用户的地址信息。3.删除收货地址：

用户可以删除已保存的收货地址，删除操作需要用户确认，删除后该地址将不再显示在地址列表中。4.地址修改：

用户可以通过点击某个地址进行修改或删除。删除操作通常通过弹出确认框来进行。11.2功能模块设计与实现11.2.5收货地址添加与修改功能示例代码：<ButtononClick={()=>{wx.chooseAddress({success(res){post('users/deliveries',{customer_name:res.userName,customer_mobile:res.telNumber,customer_address:vinceName+res.cityName}).then(()=> mutate())});}}>

新增收货地址</Button>11.2功能模块设计与实现11.2.5收货地址添加与修改功能解释：1.收货地址选择：

如果页面是选择地址模式（通过paramsRef.current?.type==='select_delivery'判断），用户点击某个地址后，系统将该地址设置为选中的地址并返回到上一页。这个功能通常用于用户确认订单时选择配送地址。2.新增收货地址：

用户点击“新增收货地址”按钮时，调用微信小程序的wx.chooseAddressAPI，用户选择地址后，我们将地址信息通过post请求发送到后台进行保存。成功后，地址列表会自动刷新。3.删除收货地址：

用户可以删除不需要的收货地址。点击删除按钮后，系统会弹出一个确认框（ActionSheet组件），用户确认删除后，我们通过httpDelete请求删除该地址。删除成功后，系统会刷新地址列表并显示删除成功的提示。4.删除确认：

删除地址时，我们使用ActionSheet弹出确认框，提供“删除”和“取消”选项。11.2功能模块设计与实现11.2.5收货地址添加与修改功能效果图展示11.2功能模块设计与实现11.2.5收货地址添加与修改功能总结：通过本节的实现，我们为电商小程序提供了一个完整的收货地址管理功能。用户可以查看、选择、删除和添加收货地址。这些功能不仅提升了用户体验，也帮助平台确保订单配送的准确性。11.2功能模块设计与实现11.2.6订单管理功能在电商小程序中，用户订单管理功能是一个关键模块，它允许用户查看自己的订单状态，跟踪订单进展，进行订单的查询与管理。用户不仅可以查看所有订单的状态，还能快速访问到订单详情，处理退换货等问题。本节将重点描述如何实现“我的订单”页面，其中包括：订单分类展示、订单列表查看和订单详情。设计与实现步骤：1.订单分类展示：

用户在进入订单页面后，可以查看订单的不同状态，如：全部订单、待发货、待收货、待评价等。点击不同的分类，系统会展示对应状态下的订单。2.订单列表：

在订单列表页面，用户可以看到与订单相关的基本信息（如商品名称、订单号、创建时间、交易状态等）。点击某个订单，可以查看该订单的详细信息。3.订单详情：

用户点击某个订单进入详情页面后，可以查看该订单的详细信息，包括商品信息、收货地址、订单编号、交易编号、创建和更新时间等，便于用户跟踪订单进度。11.2功能模块设计与实现11.2.6订单管理功能示例代码：<divclassName="h-fullbg-white"><divclassName="px-4py-2text-xlfont-bold">我的订单</div><CellGroup><Celltitle="全部订单"extra={<ArrowRightwidth={15}/>}onClick={()=>Taro.navigateTo({url:'/path/to/all_orders'})}/><Celltitle="待发货"extra={<ArrowRightwidth={15}/>}onClick={()=>Taro.navigateTo({url:'/path/to/pending_shipment'})}/><Celltitle="待收货"extra={<ArrowRightwidth={15}/>}onClick={()=>Taro.navigateTo({url:'/path/to/pending_receipt'})}/><Celltitle="待评价"extra={<ArrowRightwidth={15}/>}onClick={()=>Taro.navigateTo({url:'/path/to/pending_review'})}/></CellGroup></div>11.2功能模块设计与实现11.2.6订单管理功能解释：1.订单分类页面：

用户可以选择不同的订单状态（如全部订单、待发货、待收货、待评价）进行查看。2.订单列表：

用户可以根据分类查看不同状态的订单。点击某个订单后，系统将跳转到该订单的详细信息页面。我们通过get请求获取订单数据并显示，如果没有订单，则显示空数据提示。3.订单详情：

用户可以查看订单的详细信息，包括商品的标题、价格、收货地址、订单编号、创建和更新时间等。用户还可以复制订单编号、交易编号或其他信息，方便进行相关操作。该页面通过get请求获取订单详情并显示。如果订单数据为空，页面保持空白。11.2功能模块设计与实现11.2.6订单管理功能效果图展示11.2功能模块设计与实现11.2.6订单管理功能总结：通过以上代码实现，用户可以轻松管理自己的订单，查看不同状态的订单列表，以及深入了解每个订单的详细信息。这些功能帮助用户方便地进行订单跟踪、修改和售后处理，提高了用户体验。11.2功能模块设计与实现Part03总结通过本章的学习，我们详细解析了如何通过开发一个完整的电商小程序来掌握微信小程序开发的核心技能。我们涵盖了用户登录、商品展示、兑换功能等多个核心模块的设计和实现。通过本项目的学习，你将能够熟练掌握小程序开发的常用技术和模式，为后续更复杂的项目打下坚实的基础。11.3总结小程序发布与运营目录发布小程序的步骤开发版、体验版与正式版发布小程序数据统计与分析市场推广和运营策略小程序生命周期和版本迭代Part01发布小程序的步骤10.1.1账号注册在进行小程序开发之前，首先要注册一个小程序账号。具体步骤如下：1.访问官方网站：打开浏览器，访问微信公众平台的官方注册地址：/

。此网站是微信官方为开发者提供的注册和管理各类公众号、小程序的平台。12.1发布小程序的步骤10.1.1账号注册2.选择账号类型：在注册页面中，选择“小程序”作为要注册的账号类型。这是因为我们的目标是创建一个微信小程序。

12.1发布小程序的步骤10.1.1账号注册3.新版注册引导：新改版的页面增加了小程序的说明页，点击“前往注册”按钮，即可进入正式的注册流程。

12.1发布小程序的步骤10.1.1账号注册4.填写注册信息：进入小程序注册界面后，需要填写邮箱信息和密码。这里对邮箱有严格要求，必须是未被微信公众平台注册、未被微信开放平台注册且未被个人微信号绑定的邮箱。填写完成后，点击“注册”按钮。

12.1发布小程序的步骤10.1.1账号注册5.选择主体类型并填写资料：选择注册国家/地区为中国大陆，然后选择主体类型，可以根据实际情况选择个人或者企业。需要注意的是，个人类型暂不支持微信认证、微信支付及高级接口能力。如果有线上支付的需求，就需要选择企业类型。12.1发布小程序的步骤10.1.2填写基础信息进入小程序后台管理界面后，需要完善小程序的基础信息。1.基本信息填写：包括小程序名称、小程序简称、小程序头像、小程序介绍。小程序名称要简洁明了，能够准确反映小程序的功能或服务；简称则是在一些场景下显示的简短名称；头像要具有辨识度；介绍要清晰地说明小程序的用途。

12.1发布小程序的步骤10.1.2填写基础信息2.类目填写：对于个人类的小程序，建议选择“工具”类目，因为这个类目相对比较容易通过审核。选择合适的类目有助于小程序在审核过程中顺利通过，并且方便用户在搜索时找到。12.1发布小程序的步骤10.1.2填写基础信息小程序备案：填写个人信息及身份证正反面，以及其他小程序备案信息。由于个人信息较多，具体按照系统要求填写即可，然后等待审核。备案是小程序合法运营的重要环节，确保小程序符合相关规定。12.1发布小程序的步骤10.1.2填写基础信息微信认证（可选）：认证之后，小程序可以获得“被搜索”和“被分享”能力。即使没有进行认证，也不影响正常发布，只不过用户只能通过扫码进入小程序。微信认证需要支付300元/年的认证费用。

12.1发布小程序的步骤10.1.2功能点分析院校通提供全国各高校的详细信息，方便考生了解目标院校的情况。院校列表展示，支持按地区、类型筛选院校详情页面，展示院校简介、专业设置、录取分数线等院校对比功能，支持多所院校的信息对比收藏和分享院校信息10.1项目背景与核心功能10.1.3工具准备在开始开发小程序之前，需要准备好开发工具。1.下载开发工具：访问微信小程序开发工具的下载地址：/miniprogram/dev/devtools/download.html

，根据自己电脑的系统选择对应的版本进行下载。

12.1发布小程序的步骤10.1.3工具准备2.安装并登录：下载完成后，安装开发工具并运行。使用微信扫码登录开发工具，确保使用的是之前绑定的管理员微信号。12.1发布小程序的步骤10.1.3工具准备3.创建项目：在开发工具中点击“创建项目”，导入写好的小程序代码。同时，需要填入自己的AppID，AppID可以在微信小程序公众平台里的“开发管理-开发设置”页面查看12.1发布小程序的步骤10.1.4体验发布当小程序代码开发完成后，需要进行体验发布，以便邀请相关人员进行测试。1.代码上传：点击开发工具工具栏右侧的“上传”按钮，填写版本号和项目备注后即可上传代码。版本号用于区分不同的版本，项目备注可以简要说明本次上传的内容。

12.1发布小程序的步骤10.1.4体验发布2.版本管理查看：上传成功后，在小程序后台的“版本管理”里可以找到上传的版本。版本管理分为三个部分：

线上版本：正在运行的程序版本。

审核版本：正在审核中的程序版本。

开发版本：开发完成待审核的程序版本。

12.1发布小程序的步骤10.1.4体验发布3.设置体验版：在“成员管理”中可以添加体验人员的微信账号，比如客户、相关人员等。添加成功后，这些人员就可以对小程序进行体验测试，而其他人员扫描二维码是看不到该小程序的。

经过体验测试并确保小程序没有问题后，就可以进行审核发布。在版本管理中，选择一个开发版本进行提交审核。提交时需要确保小程序符合微信的相关政策和标准。

12.1发布小程序的步骤10.1.4体验发布4.发布小程序：代码审核通过后，微信上会有提醒消息，此时需要在后台手动点击“发布”，小程序就能正常发布了12.1发布小程序的步骤开发版、体验版与正式版发布Part02发布微信小程序涉及三个关键阶段：开发版、体验版和正式版。开发版：开发版主要用于内部测试，这一阶段的目的是让开发团队在真实的微信环境中测试小程