
uni-app
文章平均质量分 85
前端OnTheRun
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
uniapp项目之小兔鲜儿小程序商城(六) 地址模块:地址管理页的实现,地址表单页的实现
地址模块包含地址管理页和地址表单页两个功能页面,主要用于收货地址的增删改查操作。地址管理页显示地址列表,支持删除和跳转修改;地址表单页通过id参数区分新建/修改两种场景,动态设置页面标题,并封装API接口实现地址新增功能。模块采用分包加载模式,包含完整的静态页面结构和样式代码。原创 2025-06-24 20:48:00 · 750 阅读 · 0 评论 -
uniapp项目之小兔鲜儿小程序商城(七) 商品详情页(登录后):加入购物车,立即购买(SKU 模块)
摘要 本文主要介绍了商品详情页SKU模块的实现方法。SKU(库存管理最小单元)是电商系统的核心功能,文章通过以下步骤实现: 从uni-app插件市场下载vk-data-goods-sku-popup组件 通过easycom机制自动引入组件 创建类型声明文件规范组件属性 使用v-model控制弹窗显示 处理后端数据适配组件格式要求 实现规格选择、加入购物车等交互功能 关键点包括:组件自动扫描机制、数据类型转换、弹窗交互控制等,为电商详情页开发提供了完整解决方案。原创 2025-06-25 19:59:37 · 421 阅读 · 0 评论 -
uniapp项目之小兔鲜儿小程序商城(五) 登录页的实现,会员中心页的实现,设置页的实现,会员信息页的实现
本文摘要:微信小程序登录页实现方案解析。文章介绍了如何利用微信开放能力获取用户信息,通过wx.login获取code参数,并结合button组件获取encryptedData和iv参数完成登录请求。详细展示了login.vue页面的静态布局,包括样式设计和结构搭建。重点讲解了小程序获取手机号的特殊机制,必须通过用户主动点击授权按钮才能获取加密信息。还提供了api接口封装和类型定义的方法,以及页面调用时获取code参数的具体实现。整个登录流程符合微信安全规范,实现了无需填写用户名密码的一键登录功能。原创 2025-06-21 16:46:52 · 323 阅读 · 0 评论 -
uniapp项目之小兔鲜儿小程序商城(四) 商品详情页的实现:uniapp弹层组件uni-popup的使用
文章摘要:本文介绍了商品详情页的uni-app实现方案。页面分为登录前(商品展示、轮播图)和登录后(购物车功能)两大模块。代码展示了商品详情页静态布局,包括商品主图轮播、基本信息、操作面板、商品详情和同类推荐等核心区域。页面采用scroll-view实现滚动效果,底部工具栏包含收藏、客服、购物车及购买按钮,并考虑了安全区域适配。实现细节涵盖商品图片展示、价格信息、规格选择、服务说明等功能模块,为电商应用提供了完整的商品详情页开发参考。原创 2025-06-19 19:41:33 · 265 阅读 · 0 评论 -
uniapp项目之小兔鲜儿小程序商城(二) 首页的实现:自定义导航栏,轮拨图,前台分类,热门推荐,猜你喜欢,下拉刷新,骨架屏
本文介绍了一个Uni-app项目中的首页优化实践。首先通过自定义导航栏组件(包含Logo和搜索框),利用uni.getSystemInfoSync()获取安全区域距离实现机型适配。其次封装了全局轮播图组件XtxSwiper,支持自动播放和指示点功能,采用小程序原生swiper标签实现。两个组件均采用组件化设计,提高了代码复用性,其中导航栏通过隐藏默认导航栏并自定义样式,轮播图通过配置circular和autoplay参数实现循环播放效果。整个方案体现了Uni-app跨平台开发中组件化和自适应布局的设计思想原创 2025-06-16 18:07:25 · 890 阅读 · 0 评论 -
uniapp项目之小兔鲜儿小程序商城(一) 项目介绍,技术栈,小程序的基础架构,封装拦截器和请求函数
本文介绍了B2C渡河平台项目的前期准备与技术架构。项目采用Vue3+TypeScript技术栈,包含Vuex状态管理、Axios请求封装等功能。详细说明了uniapp项目的两种创建方式(HBuilderX和命令行),重点演示了使用vscode开发uniapp的配置步骤,包括插件安装、TS类型校验和json文件设置。文章还对比了uniapp与原生小程序开发的区别,提供了项目代码拉取指引,并概述了小程序基础架构的三大模块:页面构建、状态管理和数据交互。最后介绍了uni-ui组件库的安装和请求工具的封装方法。原创 2025-06-16 11:11:37 · 1093 阅读 · 0 评论 -
2022-09-13 uni-app学习笔记(八) 如何把uniapp项目云打包成apk安装包并安装到手机上?
把uniapp项目myUniaTextProject1打包成apk安装包0.Andriod包名如何获取?1.选择"发行"中的"原生云打包"2.打包校验3.打包中,等待打包完毕4.打包完成,生成apk文件5.点击"打开所在目录",查看apk文件,传到手机中安装6.成功在安卓手机中安装该apk原创 2022-09-13 00:40:03 · 898 阅读 · 0 评论 -
2022-09-10 uni-app学习笔记(七) uniapp自定义组件介绍,uniapp组件中的父子组件通信,插槽(slot)和全局事件的定义以及通信
1.uniapp的自定义组件介绍uniapp组件的使用分为三步:示例:创建components/child组件并在index.vue中使用2.uniapp中的父子组件通信(跟vue一样)父传子示例:父传子子传父示例:子传父3.uniapp的插槽slot的数据分发和作用域插槽4.全局事件定义以及通信原创 2022-09-10 11:45:48 · 317 阅读 · 0 评论 -
2022-09-09 uni-app学习笔记(六) uniapp常用API,使用uniapp常用API(uni.chooseImage等)实现聊天框的选择图片和input框发送文本信息功能
1. uniapp的js的API由两个部分组成标准ECMAScript的jsAPIuniapp扩展的APi2.uniapp常用的api(看官网)3.使用uniapp常用的api完善模拟聊天框3.1.把静态的聊天内容和聊天图片渲染成动态绑定3.2.点击"照片.png"可以选择要发送的图片第一步:使用uni.chooseImage从本地相册选择图片并发送消息第二步:使用uni.pageScrollTop将聊天页面滚动到目标位置第三步:使用uni.setStorageSync将数据异步存储在本地原创 2022-09-09 18:54:55 · 206 阅读 · 0 评论 -
2022-09-08 uni-app学习笔记(五) uniapp常用组件:view,text,navigator等,使用常见组件写一个模拟聊天页面
uniapp基础组件与html基础标签的不同有哪些uniapp常用组件?示例:使用常用组件进行页面布局uniapp基础组件与html基础标签的不同uniapp为开发者提供了一系列的基础组件(比如view,text等等)与html的基础标签元素不同的是,uniapp的基础组件与小程序相同,更适合手机端*如果非要在uniapp中使用div,编译过程中会自动把它转换成view,以及span和a标签会分别自动转换成text和navigator标签有哪些uniapp常用组件?官网地址:https:/原创 2022-09-08 19:07:24 · 144 阅读 · 0 评论 -
2022-09-07 uni-app学习笔记(四) uni-app路由配置和页面跳转,uni.navigateTo跳转失败的可能原因以及解决方法
1.路由配置2.编程式导航和组件式导航示例:index.vue回顾:vue的声明式导航和编程式导航的定义和写法区别3.使用pages.json中的tabBar进行底部选项卡的设置step1:pages文件夹下新建四个选项卡文件夹step2:在uniapp官网复制tabBar的配置代码step3:在iconfont上找上述页面对应的四个图标step4:调整tabbar的页面路径和图片路径4.【踩坑】uni.navigateTo跳转失败的可能原因以及解决方法原因一:配置在tabBar中的路径原创 2022-09-07 23:03:32 · 3011 阅读 · 0 评论 -
2022-09-06 uni-app学习笔记(三) uni-app的生命周期:常用应用生命周期和页面生命周期以及示例
1.uniapp生命周期的引入2.应用生命周期3.页面生命周期4.应用生命周期的应用示例:onPageNotFound4.1.创建404.vue页面:pages>创建页面>404.vue4.2.运行到小程序并修改成错误路径5.页面生命周期的应用示例5.1.钩子函数onLoad:监听页面加载5.2.钩子函数onPullDownRefresh:监听用户下拉动作,一般用于下拉刷新6.总结7.知识点uniapp项目文件介绍原创 2022-09-06 20:45:29 · 97 阅读 · 0 评论 -
2022-09-05 uni-app学习笔记(二) uniapp基础内容介绍,uniapp项目文件介绍,初始化相关配置
pages.json 文件:对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。manifest.json 文件:应用的配置文件,用于指定应用的名称、图标、权限等。App.vue:根组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数。main.js:项目入口文件,主要作用是初始化vue实例并使用需要的插件。uni.scss文件的:整体控制应用的风格。比如按钮颜色、边框风格,uni.scss文件里预置了一原创 2022-09-05 19:14:30 · 370 阅读 · 0 评论 -
2022-09-04 uni-app学习笔记(一) uniapp介绍,下载,创建并运行一个uniapp项目,uniapp打包步骤,uniapp项目文件介绍
1.uniapp介绍2.如何创建并运行一个uni-app项目?3.如何在HBuliderX中运行uniapp项目到微信小程序模拟器?step1:配置微信小程序路径step2:打开微信开发者工具,设置>安全设置>打开服务端口step3:打开HbuilderX进入项目,运行>运行到小程序模拟器>微信开发者工具4.如何给uni-app浏览器配置google运行环境step1:找到自己电脑上的IPv4地址:控制中心>所有控制面板>网络和共享中心>连接>IPv4step2:创建uniapp项目根目原创 2022-09-04 21:45:12 · 296 阅读 · 0 评论