首页/新闻资讯/正文详情

微信小程序电商项目实战uni-app(四)

发布时间:2026/11/11 16:20:14 来源:云帆数科 栏目:资讯中心
微信小程序电商项目实战uni-app(四)
目录2.8 订单模块1. 填写订单渲染基本信息收货地址立即购买提交订单2. 订单详情自定义导航栏交互订单状态渲染待付款-倒计时待付款-订单支付待发货-模拟发货待收货–确认收货订单物流删除订单3.订单列表Tabs 滑动切换Tabs 页面跳转高亮列表渲染订单支付2.9 项目打包微信小程序端发布上线条件编译和网页端打包App端打包上线1. Android 系统预览和调试云打包2. iOS 系统预览/调试、打包2.10 跨段兼容样式兼容1. 视口差异2. 样式隔离组件兼容JS API兼容2.11uniCloud 云开发准备工作2.8 订单模块1. 填写订单渲染基本信息如果遇到报错,例如:通常原因是:这个 400 报错的本质是后端业务层返回的"无有效商品"(错误码 18008),而不是网络或语法层的问题。/member/order/pre是项目的"填写订单-获取预付订单"接口,它需要从当前登录用户的购物车里取出有效商品来生成结算信息;当后端发现购物车里没有可结算商品(购物车为空 / 商品已下架 / token 失效导致购物车归属错乱)时,就会抛出code:18008。解决办法:登录 → 商品详情选规格加购 → 购物车勾选 → 点结算进 create 页。完整走一遍通常就恢复正常。提交代码:收货地址提交代码:立即购买提交代码:提交订单(1)封装请求API(2)类型声明文件(3)提交按钮事件(4)接口调用成功,跳转订单详情创建订单详情页面:跳转订单详情页:提交代码:2. 订单详情自定义导航栏交互文档链接(1)准备静态结构style lang="scss" page { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .navbar { width: 750rpx; color: #000; position: fixed; top: 0; left: 0; z-index: 9; /* background-color: #f8f8f8; */ background-color: transparent; .wrap { position: relative; .title { height: 44px; display: flex; justify-content: center; align-items: center; font-size: 32rpx; /* color: #000; */ color: transparent; } .back { position: absolute; left: 0; height: 44px; width: 44px; font-size: 44rpx; display: flex; align-items: center; justify-content: center; /* color: #000; */ color: #fff; } } } .viewport { background-color: #f7f7f8; } .overview { display: flex; flex-direction: column; align-items: center; line-height: 1; padding-bottom: 30rpx; color: #fff; background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png); background-size: cover; .status { font-size: 36rpx; } .status::before { margin-right: 6rpx; font-weight: 500; } .tips { margin: 30rpx 0; display: flex; font-size: 14px; align-items: center; .money { margin-right: 30rpx; } } .button-group { margin-top: 30rpx; display: flex; justify-content: center; align-items: center; } .button { width: 260rpx; height: 64rpx; margin: 0 10rpx; text-align: center; line-height: 64rpx; font-size: 28rpx; color: #27ba9b; border-radius: 68rpx; background-color: #fff; } } .shipment { line-height: 1.4; padding: 0 20rpx; margin: 20rpx 20rpx 0; border-radius: 10rpx; background-color: #fff; .locate, .item { min-height: 120rpx; padding: 30rpx 30rpx 25rpx 75rpx; background-size: 50rpx; background-repeat: no-repeat; background-position: 6rpx center; } .locate { background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png); .user { font-size: 26rpx; color: #444; } .address { font-size: 24rpx; color: #666; } } .item { background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);

相关推荐

联想拯救者工具箱完整指南:3步释放你的游戏本全部性能
联想拯救者工具箱完整指南:3步释放你的游戏本全部性能

联想拯救者工具箱完整指南:3步释放你的游戏本全部性能 【免费下载链接】LenovoLegionToolkit Lightweight Lenovo Vantage and Hotkeys replacement for Lenovo Legion laptops. 项目地址: https://gitcode.com/gh_mirrors/le/LenovoLegionToolkit Lenovo Le… · 2026/11/11 16:20:13

认识向量数据库
认识向量数据库

一、什么是向量? 核心概念 向量就是把万物变成一串数字,让计算机能"理解"和"比较"它们。 Embedding:将文字、图片、声音等非结构化数据转换为高维浮点数组实际维度:通常是 768(BERT)、… · 2026/7/27 19:03:26

数字孪生与智能调度在交通物流枢纽的应用
数字孪生与智能调度在交通物流枢纽的应用

1. 项目背景与核心价值城市群交通物流枢纽的数字化升级正在成为区域经济发展的关键引擎。最近参与了一个东部沿海城市群的综合交通枢纽规划项目,深刻体会到传统基建向"数字孪生智能调度"转型的迫切性。这个规划方案的核心在于用数字技术重构物理枢纽的运营… · 2026/9/18 4:17:05

岳阳市怎么报考电工证官方回应怕考不过白交培训费
岳阳市怎么报考电工证官方回应怕考不过白交培训费

岳阳市怎么报考电工证官方回应怕考不过白交培训费 怕考不过白交培训费?岳阳市电工证报考前必须知道的真相,官方回应来了! 在岳阳市,报考电工证已经成为很多建筑工地、制造业、电力工程相关从业人员的刚需。但很多人在报名前总有顾虑,比如:培训费贵不贵… · 2026/11/11 16:19:20

清徐培训机构电工证怎么选?考前押题攻略帮你少走弯路
清徐培训机构电工证怎么选?考前押题攻略帮你少走弯路

清徐培训机构电工证怎么选?考前押题攻略帮你少走弯路 不知道去哪报名怕被中介坑?别急,清徐培训机构电工证报考其实没你想象的那么复杂,关键是要找对地方、掌握方法。今天我们就来聊聊清徐电工证报考那些事,尤其是 考前押题… · 2026/11/11 16:19:20

凤阳县在哪审电工证怎么报名 外省电工证怎么转过来
凤阳县在哪审电工证怎么报名 外省电工证怎么转过来

凤阳县在哪审电工证怎么报名 外省电工证怎么转过来 之前考的证在外省能不能转过来?这是很多在凤阳县或者准备来凤阳县工作的电工师傅最关心的问题。别急,今天就带你搞清楚【凤阳县在哪审电工证】这件事,还有【怎么报名】、考试、转证、复审全流程,全是实… · 2026/11/11 16:19:20

田林办理电工证实操考试心里没底怕挂科?2026河南最新政策给你答案
田林办理电工证实操考试心里没底怕挂科?2026河南最新政策给你答案

田林办理电工证实操考试心里没底怕挂科?2026河南最新政策给你答案 实操考试心里没底怕挂科,这几乎是每个准备考电工证的人心里的疙瘩,尤其是在田林办理电工证的小伙伴,更担心政策变动、考试流程不熟、实操不规范这些问题。2026年河南最新政策对电… · 2026/11/11 16:19:20

深圳电工证快速学习:工地太忙根本没时间复习考试?上岗必备的备考攻略来了!
深圳电工证快速学习:工地太忙根本没时间复习考试?上岗必备的备考攻略来了!

深圳电工证快速学习:工地太忙根本没时间复习考试?上岗必备的备考攻略来了! 工地太忙根本没时间复习考试,你是想放弃备考,还是想在有限时间里高效上岸?电工证是 上岗必备… · 2026/11/11 16:19:20

澳门特种工招聘证书全国通用吗?这几点你必须知道
澳门特种工招聘证书全国通用吗?这几点你必须知道

澳门特种工招聘证书全国通用吗?这几点你必须知道 你是不是也遇到过这样的问题: 不知道去哪报名怕被中介坑 ?现在澳门特种工招聘越来越火,不少工人想通过考取特种作业操作证进入澳门工地,但对证书的 全国通用性… · 2026/11/11 16:18:18

电工证丢失还能补吗?千万别踩坑,丢了证等于失业
电工证丢失还能补吗?千万别踩坑,丢了证等于失业

电工证丢失还能补吗?千万别踩坑,丢了证等于失业 你正在找工作,但手里的电工证突然丢了,这下怎么办?别急,先别慌, 电工证丢失还能补吗 ?答案是肯定的,但 千万别踩坑 ,补办流程如果不了解,可能会耽误你上岗、甚至影响到你的收入。… · 2026/11/11 12:18:07

电力电缆作业证直播报名入口与办理流程良心建议
电力电缆作业证直播报名入口与办理流程良心建议

电力电缆作业证直播报名入口与办理流程良心建议 你是不是也担心学历不高报不了名?别急,今天就给你讲讲 电力电缆作业证直播 的报名流程和那些你必须知道的干货, 良心建议 在这里,别错过。 电力电缆作业证直播报名需要什么条件?… · 2026/11/10 17:46:39

英德电工证报考费多少钱,怕考不过白交培训费?看完这篇别再踩坑
英德电工证报考费多少钱,怕考不过白交培训费?看完这篇别再踩坑

英德电工证报考费多少钱,怕考不过白交培训费?看完这篇别再踩坑 怕考不过白交培训费?英德电工证报考费多少钱,你真的了解吗?现在市面上培训机构五花八门,价格参差不齐,很多人一不小心就花了冤枉钱,结果还考不过。别急,今天就来给你说清楚英德电工证的… · 2026/11/10 17:11:43

_中职电工证最新政策解读
_中职电工证最新政策解读

中职电工证在哪考?工地太忙根本没时间复习考试的救星来了 工地太忙根本没时间复习考试,这是很多正在备考 中职电工证 的建筑工友的真实写照。你不是不想考,而是真的没时间。但别担心,这期内容是 新乡初次报考人员… · 2026/11/11 0:00:52

昆明电工证培训价格值不值得考?老电工告诉你真相
昆明电工证培训价格值不值得考?老电工告诉你真相

昆明电工证培训价格值不值得考?老电工告诉你真相 之前考的证在外省能不能转过来?这个问题是很多在外地打工、换城市生活、或者是想在昆明发展的朋友最关心的。尤其是现在云南发展快,很多企业都在招持证上岗的电工,如果你手头有证但不在本地,那这个证是不… · 2026/11/11 0:00:52

特种电缆张工网上查询全攻略:外省证如何转过来
特种电缆张工网上查询全攻略:外省证如何转过来

特种电缆张工网上查询全攻略:外省证如何转过来 之前考的证在外省能不能转过来?这是很多特种作业从业者最关心的问题,尤其是像特种电缆张工这类证书,直接关系到日常工作是否合规、能否顺利晋升。很多小伙伴因为证书归属地的问题,陷入职业发展的瓶颈,甚至… · 2026/11/11 0:00:52

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/10 20:19:29

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/10 19:22:45

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/10 17:00:47

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码