uniapp项目之小兔鲜儿
文章平均质量分 91
前端OnTheRun
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
uniapp项目之小兔鲜儿小程序商城(七) 商品详情页(登录后):加入购物车,立即购买(SKU 模块)
摘要 本文主要介绍了商品详情页SKU模块的实现方法。SKU(库存管理最小单元)是电商系统的核心功能,文章通过以下步骤实现: 从uni-app插件市场下载vk-data-goods-sku-popup组件 通过easycom机制自动引入组件 创建类型声明文件规范组件属性 使用v-model控制弹窗显示 处理后端数据适配组件格式要求 实现规格选择、加入购物车等交互功能 关键点包括:组件自动扫描机制、数据类型转换、弹窗交互控制等,为电商详情页开发提供了完整解决方案。原创 2025-06-25 19:59:37 · 601 阅读 · 0 评论 -
uniapp项目之小兔鲜儿小程序商城(六) 地址模块:地址管理页的实现,地址表单页的实现
地址模块包含地址管理页和地址表单页两个功能页面,主要用于收货地址的增删改查操作。地址管理页显示地址列表,支持删除和跳转修改;地址表单页通过id参数区分新建/修改两种场景,动态设置页面标题,并封装API接口实现地址新增功能。模块采用分包加载模式,包含完整的静态页面结构和样式代码。原创 2025-06-24 20:48:00 · 885 阅读 · 0 评论 -
uniapp项目之小兔鲜儿小程序商城(五) 登录页的实现,会员中心页的实现,设置页的实现,会员信息页的实现
本文摘要:微信小程序登录页实现方案解析。文章介绍了如何利用微信开放能力获取用户信息,通过wx.login获取code参数,并结合button组件获取encryptedData和iv参数完成登录请求。详细展示了login.vue页面的静态布局,包括样式设计和结构搭建。重点讲解了小程序获取手机号的特殊机制,必须通过用户主动点击授权按钮才能获取加密信息。还提供了api接口封装和类型定义的方法,以及页面调用时获取code参数的具体实现。整个登录流程符合微信安全规范,实现了无需填写用户名密码的一键登录功能。原创 2025-06-21 16:46:52 · 473 阅读 · 0 评论 -
uniapp项目之小兔鲜儿小程序商城(四) 商品详情页的实现:uniapp弹层组件uni-popup的使用
文章摘要:本文介绍了商品详情页的uni-app实现方案。页面分为登录前(商品展示、轮播图)和登录后(购物车功能)两大模块。代码展示了商品详情页静态布局,包括商品主图轮播、基本信息、操作面板、商品详情和同类推荐等核心区域。页面采用scroll-view实现滚动效果,底部工具栏包含收藏、客服、购物车及购买按钮,并考虑了安全区域适配。实现细节涵盖商品图片展示、价格信息、规格选择、服务说明等功能模块,为电商应用提供了完整的商品详情页开发参考。原创 2025-06-19 19:41:33 · 583 阅读 · 0 评论 -
uniapp项目之小兔鲜儿小程序商城(三) 热门推荐页的实现,商品分类页的实现
本文介绍了如何实现一个热门推荐页面的复用功能,主要包含以下内容:静态布局与路由跳转创建hot.vue页面,包含封面图、推荐选项和商品列表通过查询参数实现不同推荐类型(特惠/爆款/一站买全/新鲜好物)的路由跳转使用defineProps接收URL参数并动态设置页面标题数据获取实现分析接口文档,发现四个推荐类型接口结构相似封装通用推荐接口getHotRecommendAPI使用组合类型HotParams(包含页码参数和子类型)该方案通过一个页面复用四种推荐类型展示,减少了代码重原创 2025-06-18 18:52:59 · 995 阅读 · 0 评论 -
uniapp项目之小兔鲜儿小程序商城(二) 首页的实现:自定义导航栏,轮拨图,前台分类,热门推荐,猜你喜欢,下拉刷新,骨架屏
本文介绍了一个Uni-app项目中的首页优化实践。首先通过自定义导航栏组件(包含Logo和搜索框),利用uni.getSystemInfoSync()获取安全区域距离实现机型适配。其次封装了全局轮播图组件XtxSwiper,支持自动播放和指示点功能,采用小程序原生swiper标签实现。两个组件均采用组件化设计,提高了代码复用性,其中导航栏通过隐藏默认导航栏并自定义样式,轮播图通过配置circular和autoplay参数实现循环播放效果。整个方案体现了Uni-app跨平台开发中组件化和自适应布局的设计思想原创 2025-06-16 18:07:25 · 1070 阅读 · 0 评论 -
uniapp项目之小兔鲜儿小程序商城(一) 项目介绍,技术栈,小程序的基础架构,封装拦截器和请求函数
本文介绍了B2C渡河平台项目的前期准备与技术架构。项目采用Vue3+TypeScript技术栈,包含Vuex状态管理、Axios请求封装等功能。详细说明了uniapp项目的两种创建方式(HBuilderX和命令行),重点演示了使用vscode开发uniapp的配置步骤,包括插件安装、TS类型校验和json文件设置。文章还对比了uniapp与原生小程序开发的区别,提供了项目代码拉取指引,并概述了小程序基础架构的三大模块:页面构建、状态管理和数据交互。最后介绍了uni-ui组件库的安装和请求工具的封装方法。原创 2025-06-16 11:11:37 · 1421 阅读 · 0 评论
分享