
uni-app 前端开发
文章平均质量分 93
uni-app 前端开发经验总结,移动端项目开发最佳实践解决方案
前端梦工厂+
关注公众号 “前端梦工厂” 回复 “题库”,获取软考和PMP历年真题,回复“加群”可加入高质量技术研讨群,让我们一起逐梦前端!
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
全网最详细的 uni-app 蓝牙打印详解:一键连接打印
全网最详细的 uni-app 蓝牙打印讲解,并且将一些蓝牙连接 API 和打印 API 友好的封装了起来,便于我们一键调用,简洁高效的进行蓝牙打印!原创 2025-08-11 17:33:25 · 936 阅读 · 0 评论 -
uView Pro 正式开源!70+ Vue3 组件重构完成,uni-app 组件库新晋之星
基于uView UI 组件库,历经一个多月时间打磨,我重构了 uView UI 70+ 核心组件,欢迎大家体验原创 2025-08-11 11:24:50 · 1148 阅读 · 0 评论 -
uni-app 蓝牙连接全面指南:API 流程实践解析
Uni-App蓝牙开发指南:本文介绍了使用Uni-App框架开发跨平台蓝牙功能的核心流程。主要内容包括:1)蓝牙模块初始化、设备搜索与连接等基础操作;2)低功耗蓝牙API使用,包括服务发现、特征值读写和数据监听;3)各平台权限配置要求(Android和iOS);4)运行时权限请求与用户拒绝处理方案。文章提供了完整的蓝牙开发流程图和关键API调用示例,并强调了注意事项如蓝牙状态检查、版本兼容性等问题,为后续实现蓝牙打印等应用场景打下基础。原创 2025-05-26 09:34:59 · 2579 阅读 · 0 评论 -
uni-app 实现好看易用的抽屉效果
分享一个在有题记小程序中的抽屉组件,使用 uni-app 实现一个完整的抽屉效果,通过侧滑的效果打开一个菜单或额外的内容区域。原创 2025-04-16 10:54:52 · 2031 阅读 · 0 评论 -
uni-app 高效开发小程序技巧:自动化切换环境变量
uni-app 作为一个开发利器,方便了广大开发者,尤其是在开发小程序的时候,今天给大家分享一个使用 uni-app 高效开发小程序的技巧,如何自动化切换环境变量,无缝适配微信小程序的各种版本!原创 2025-04-10 13:19:24 · 1570 阅读 · 0 评论 -
100 行代码打造小而美的 uni-app 请求库(二)
之前通过一篇文章的介绍,详细说明了在 uni-app 框架中,使用大约100 行代码打造小而美的 uni-app 请求库,基于,支持多种运行环境,包括浏览器 H5、小程序、APP 等各端。100 行代码打造小而美的 uni-app 请求库(一)因为我已经用 uni-http 开发了许多个成型的 APP、H5、 及小程序,Android 和 iOS 均已正常上线应用商店,因此可以证明,它的兼容性是良好的。本篇文章我们继续聊聊 uni-http 这个请求框架,并主要实现以下功能:支持处理请求的。原创 2025-03-24 09:26:44 · 1214 阅读 · 0 评论 -
100 行代码打造小而美的 uni-app 请求库
在开发 uni-app 项目时,我们经常需要对接后端接口进行数据请求。虽然 uni-app 框架本身提供了用于发起请求,但在实际项目中,我们往往会封装一些请求库来简化请求的操作,提高代码复用性和可维护性。本文将介绍基于实现一款小而美的请求工具,通过大约 100 行代码的实现,为 uni-app 项目打造一个简洁高效的请求库。原创 2025-03-10 14:31:01 · 1998 阅读 · 0 评论 -
uni-app 自定义平台如何进行 static 目录的条件编译
关于如何自定平台,由于官方不支持创建自定义平台下的 static 目录,例如以下方式,会被认为是一个普通文件夹,将会在所有平台被打包进去。┌─static│ └─c.png├─main.js├─App.vue因此,在这里提供一种思路,可以支持自定义平台的打包策略,可以利用分包实现。在pages.json中定义页面地址,配合使用条件编译实现。"pages": [],"pages": [// #endif因为编译器根据。原创 2024-11-27 09:51:23 · 1143 阅读 · 0 评论 -
玩转 uni-app 静态资源 static 目录的条件编译
uni-app 可以同时支持编译到多个平台,如小程序、H5、移动端 App等。它的多端编译能力是 uni-app 的一大特点,让开发者可以使用同一套代码基于 Vue.js 的语法编写程序,然后通过 uni-app 的编译工具将代码转换成适用于不同平台的代码,极大地提高了开发效率和跨平台开发的便捷性。之前的文章让我们清晰的认识到 uni-app 的条件编译知识,以及如何进行自定义平台的条件编译。原创 2024-11-27 09:48:28 · 2546 阅读 · 0 评论 -
uni-app 玩转条件编译:自定义平台的条件编译实战详解
在开发 Web 时,可能有时候需要将同一套代码编译发布到不同的站点,比如多个不同的微信 h5 站,这些站点可能有不同的差异性处理。在开发小程序时,也经常有扩展小程序平台,比如同一套代码,我需要发布到多个小程序,可能这些小程序之间少许有些差异。因此,uni-app 通过在文件中增加 uni-app 扩展节点,可实现自定义条件编译平台。在我之前开发的实际项目中,同一套代码需要部署多个平台,大概有10个平台,而且这几个平台可能有90%以上的代码是相同的,因此我就没有必要重新开发一套代码了。原创 2024-11-22 10:55:10 · 2662 阅读 · 1 评论 -
uni-app 认识条件编译,了解多端部署
在使用 uni-app 进行跨平台开发的过程中,经常会遇到需要针对不同平台或不同环境进行条件编译的情况。条件编译是一种在编译过程中根据指定条件选择不同代码路径的技术,可以帮助我们在不同平台或环境下编写不同的代码,以适应不同的平台实现逻辑。在 uni-app 中,可以说条件编译是 uni-app 实现多端部署的核心思想,通过条件编译,我们可以根据当前的平台、环境或配置选项来控制代码的执行逻辑,从而实现定制化的开发需求。在我之前的开发项目中,不止需要已有平台的条件编译,还涉及到自定义平台条件编译。原创 2024-11-22 10:51:25 · 1482 阅读 · 0 评论 -
一文读懂 uni-app 中的尺寸单位 rpx
rpx 单位作为小程序开发中的一个相对长度单位,它是如何实现在不同屏幕密度下元素的自适应显示的呢?rpx 是可以根据屏幕宽度进行自适应的相对单位。规定屏幕宽为 750rpx。如在 iPhone6 上,屏幕宽度为 375px,共有 750 个物理像素,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素。在小程序中,1rpx 代表屏幕宽度的 1/750,也就是屏幕宽度除以 750。屏幕宽度是指屏幕的物理宽度,单位是 px。原创 2024-11-13 09:39:02 · 2824 阅读 · 0 评论 -
uni-app 图标库整合最佳实践:使用 iconfont 构建属于自己的图标库
阿里巴巴矢量图标库是一种图标字体库,它将图标转换为字体的形式,并通过unicode编码进行引用。通过使用iconfont,开发者可以使用字体图标代替传统的图片图标,以提高网页加载速度和图标的灵活性。iconfont中的图标可以使用 CSS 进行样式控制,并且可以根据需要进行缩放、颜色调整等操作,非常方便。官方链接:iconfont - 阿里巴巴矢量图标库通过本篇文章,我们了解了在前端项目中使用 iconfont 自定义图标库的方法和步骤。原创 2024-11-06 10:18:06 · 3463 阅读 · 0 评论 -
uni-app 扫码插件推荐:基于支付宝 mPaaS 扫码组件开发,支持 Android 和 iOS
mPaaS 扫码组件是支付宝的扫码组件,目的是可以让我们的 APP 拥有像支付宝一样的扫码体验,识别速度、识别率远超开源扫码。扫码组件完全免费提供使用,但是接入时需要在阿里云上进行注册开通并添加项目。原创 2024-10-22 11:37:27 · 4538 阅读 · 2 评论 -
uni-app 扫码优化:谈谈我是如何提升安卓 App 扫码准确率的
之前的一个项目遭到用户吐槽:“你们这个 App 扫码的正确率太低了,尤其是安卓的设备。经常性的扫码扫不出来,就算是扫出来了,也是错误的结果!由于之前是扫描二维码的需求,所以没有对扫描条形码做严格的测试,客户提示说是条形码扫描效率低下。随即,我用自己的手机测试了一下,在安卓手机上确实有这样的问题,扫码准确率确实是低,尤其是条形码,扫码效率慢且不准确。扫描二维码的的效率还算可以,说的过去。原创 2024-09-06 09:28:07 · 2627 阅读 · 0 评论 -
号外!独立开发的软考刷题小工具,助力软考和 PMP 等级考试
总结一下我在开发这款小程序时所用到的一些技术栈,主要是基于 uni-app + uniCloud 来开发的,不得不说,uni-app 用来开发小程序太便捷了!原创 2024-09-03 09:58:38 · 1691 阅读 · 0 评论 -
【超详细】从 0 到 1 打包你的 uni-app 应用:安卓篇打包指南
在当前移动应用开发的大环境下,uni-app 作为一种使用 Vue.js 开发多平台应用的框架,为开发者提供了快速构建跨平台应用的能力。本文将为你介绍如何将 uni-app 项目打包成安卓应用,让你的应用在安卓设备上运行并上架应用市场。确保将 HBulider X 升级到3.2.15+版本,否则 App 将会出现问题App 提交云端打包时请勾选“**GooglePlay(AAB)**”渠道,生成.aab 格式的应用不能直接下载 apk 方式安装应用,需引导用户到安装不能存在动态加载代码行为。原创 2024-08-30 14:15:21 · 3929 阅读 · 0 评论 -
解析 uni-app 小程序分包策略:合理优化包体积分布
通过合理的微信小程序分包策略,我们可以将小程序的代码和资源拆分成多个子包,从而分散首页的加载压力,提升小程序的性能。在制定分包策略时,我们可以根据功能模块划分来确定分包的范围和关系。同时,分包后我们也需要关注一些性能优化的细节,如首次加载优化和分包预下载技巧。最后,我们也可以借鉴一些实践经验和注意事项,来优化自己的小程序分包策略,并提升用户的使用体验。原创 2024-08-30 14:10:53 · 1474 阅读 · 0 评论 -
经历了 PMP 和软考高项,我独立开发了一款软考刷题小程序,快来使用吧!
总结一下我在开发这款小程序时所用到的一些技术栈,主要是基于 uni-app + uniCloud 来开发的,不得不说,uni-app 用来开发小程序太便捷了!原创 2024-04-15 17:43:37 · 1587 阅读 · 0 评论 -
轻量且强大的 uni-app http 网络库
🚀 基于promise的,轻量且强大的http提供统一的。浏览器环境下,轻量且非常轻量。基于,支持多种运行环境。支持请求/响应拦截器。自动转换JSON数据。支持批量生成API请求,简化代码量99%,一行代码搞定// api.js// 用户login: { url: '/api/login', method: 'POST', loading: true } // 用户登录}复制代码。.........原创 2022-08-12 10:05:19 · 1202 阅读 · 1 评论 -
Uni-App框架知识点梳理
一. 初始uni-app是使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。开发环境搭建,nodejs,hbuilderx创建uniapp项目目录结构规范├── api # 所有请求├── assets ...原创 2020-01-20 14:11:02 · 5634 阅读 · 0 评论