uniapp开发移动端项目UI库建议

已于 2024-08-16 11:26:36 修改
阅读量1.4k 收藏 11
点赞数 9
文章标签： uni-app ui
于 2024-02-16 15:27:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_51430102/article/details/136129192
版权
本文推荐了uniapp开发中常用的UI库，如uview-ui、vant-weapp及uni-ui，并介绍了它们的特点与适用场景，帮助开发者根据项目需求选择合适的UI库。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

uniapp官网指南


大部分情况都是用 uview-ui和vant-ui/vant-weapp，根据项目要求选择UI库的版本
uview1.x — vue2 + vue-cli
uview2.x — vue3 + vite（因为uview2.x中有部分组件使用了某些uniapp官方新的API，而这些API又是uniapp 依赖 vue3的环境，所以运行后会报错，别问我为什么知道！！！）
vant-ui — app，移动端H5等
vant-weapp — vant官方为了兼容微信小程序专门开发的一套UI库。 微信小程序
uni-ui — 没有用过，但是uniapp官方自己的UI库，肯定是没什么兼容性问题

如果考虑开发一套代码发布多个端，本人推荐使用 uni-ui，
如果不满足需求，再去uniapp插件市场，找质量好的，兼容满足的组件

zhuà!
关注
uniAPP开发前言，对你有用，提高你的开发速度
baidu_41279808的博客
03-17 746
uniAPP开发前言 1.组件的概念 组件是现代开发的重要里程碑。组件重构了分工模型，让大量的轮子出现，让开发者可以拿来轮子直接用，大幅提升了整个产业的效率。uni-app是有内置组件的。这和web开发不一样。 web开发基本上不用基础组件，都是找一个三方ui库，全套组件都包含。那是因为html的基础组件默认样式不适配手机风格。 但uni-app体系不是这样，内置组件就是为手机优化的。但内置组件只能满足基础需求，更多场景，需要扩展组件。 扩展组件是基于内置组件的二次封装，从性能上来讲，扩展组件的性
uniapp使用ui库
TYD0313的博客
10-18 2475
uniapp使用uin-ui
uniapp / uniapp x UI 组件库推荐大全
热门推荐
学而不思则罔,思而不学则殆
09-02 1万+
uniapp 生态开发，第三方UI组件库整理分享。
uniapp +vue3 开发需要兼容小程序、h5、安卓、ios, 选择哪些插件和ui库会更合适，完整框架搭建和详细代码
最新发布
04-02 1971
通过上述步骤，你可以搭建一个基于的完整开发框架，支持小程序、H5、安卓和 iOS。推荐的 UI 库和插件包括uView PlusPiniaAxios等，能够满足多端开发的需求。如果需要更详细的代码示例和配置，可以参考开源项目。
uniapp 常用 UI 组件库
梦想成为公务员
03-04 5055
本文将介绍10款uniapp常用组件库，大家可以根据项目的具体需求和团队的技术栈，选择适合的组件库能够显著提升开发效率和用户体验。
Uniapp UI 组件库全解析
u011464172的专栏
06-18 5885
Uniapp 提供了丰富的 UI 组件库，帮助开发者快速构建跨平台应用。本文介绍了常用的基本组件和扩展组件，并提供了相应的示例代码。开发者可以通过学习这些组件，快速掌握 Uniapp 开发技巧，构建功能强大、体验良好的应用。
uniapp实现移动端上传文件功能
09-24
uniAPP，作为一个跨端开发框架，为开发者提供了便捷的方式来实现移动端的文件上传功能。下面，我们将详细探讨如何在uniAPP中实现这一功能。 首先，我们需要了解uniAPP的基础知识。uniAPP是由DCloud(北京嘀嗒出行...
基于uni-app开发的跨平台移动端UI 组件库兼容App-Nvue、App-vue、小程序
04-02
First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。全面兼容App-Nvue、App-vue、小程序（微信、支付宝、百度、字节、QQ）、H5。文档地址：.zip
Uniapp开发 购物商城源码 在线电商商城源码 适配移动终端项目及各小程序
09-19
lilishop电商商城系统 商城移动端，使用Uniapp开发，可编译为所有移动终端项目及各小程序。 随着互联网技术的飞速发展，电子商务已经成为现代商业活动的重要组成部分。为了满足企业和个人对在线购物平台的需求，...
移动端插件化之uniapp+vue3+vite+ts项目搭建并开发一个自己的移动端ui库，支持h5、app等
weixin_43488223的博客
02-23 2787
安装，记得先切换回淘宝镜像修改文件// 支持在Vue SFC中引入外部类型定义return {if (!if (!});return res;},return {})此时就不报错了。ok，到这里全部结束，撒花。
uniapp精美ui模板
05-27
【uniapp精美ui模板】是专为各类应用程序设计的一套高质量用户界面模板，它结合了现代设计趋势与高效开发框架，旨在提供一个便捷、美观的起点，帮助开发者快速构建自己的移动应用。这套模板广泛适用于电商、社交、...
uniapp到底用什么ui框架最合适-关于uni-app的ui库、ui框架、ui组件
商务合作 / 项目定制开发 / 前端一对一培训、答疑
12-05 9902
官方对组件的使用建议是： 1. 首先使用内置组件 2. 然后使用uni ui扩展组件 3. 其他需求依靠插件市场其他组件灵活补充
uniapp中使用的ui组件库
qq_43373622的博客
07-06 2789
uniapp中使用的ui组件vant weapp 官网 https://vant-contrib.gitee.io/vant-weapp/#/homeiView weapp 官网 https://weapp.iviewui.com/docs/guide/start
uniapp 使用UI组件库 （小白）
Gang-bb的博客
02-08 1万+
   最近在研究Uniapp，看了两个UI组件库，下面记下如何使用                          &...
Uni-app跟学笔记（五）：uni-ui组件库的使用、项目打包（小程序、h5、APP）
qq_63586399的博客
03-15 1855
同样在manifest.json中进行配置，基础配置到web配置之前都是App的配置，我们一个一个看。导入，再注册，然后直接uni-goods-nav引用即可。打印事件会发现,区分加入购物车和立即购买在于index。商品导航栏的(加入购物车/立即购买) 商品导航栏的(客服/店铺/购物车)基础配置，配置APP的基础描述信息。其他几个配置视情况而定。 商品底部导航栏。
FirstUI-uvue：一款轻量、高效、全面的uni-app移动端组件库
chenchuang0128的博客
08-14 1022
FirstUI-uvue是一款专为uni-app量身定制的移动端组件库，旨在通过提供丰富的组件和便捷的API，帮助开发者快速构建美观、高性能的移动应用。它集成了众多常用的UI组件，如按钮、输入框、列表、对话框等，并针对移动端进行了深度优化，确保在不同设备和操作系统上都能呈现出一致的视觉效果和交互体验。FirstUI-uvue作为一款专为uni-app设计的轻量、高效、全面的移动端组件库，凭借其丰富的组件、简洁的API和强大的跨平台能力，在移动应用开发领域展现出了巨大的潜力。
关于uni-app的ui库、ui框架、ui组件
細水、長流√的专栏
09-07 1万+
组件的概念 组件是现代开发的重要里程碑。组件重构了分工模型，让大量的轮子出现，让开发者可以拿来轮子直接用，大幅提升了整个产业的效率。 uni-app是有内置组件的。这和web开发不一样。 web开发基本上不用基础组件，都是找一个三方ui库，全套组件都包含。那是因为html的基础组件默认样式不适配手机风格。 但uni-app体系不是这样，内置组件就是为手机优化的。 但内置组件只能满足基础需求，更多场景，需要扩展组件。 扩展组件是基于内置组件的二次封装，从性能上来讲，扩展组件的性能略低于内置组件，所以开发
uniapp是否可以用elementUI等前端UI库、使用步骤以及需要注意的问题
商务合作 / 项目定制开发 / 前端一对一培训、答疑
12-01 1万+
在PC端开发uniapp，可以用elementUI，因为elementUI就是PC端的。5、在HbuilderX中，启动该项目，并且在浏览器中打开，就可以看到如下效果了。在使用uniapp，选择vue2.0时，实测可以用nodejs16的版本。1、新建uniapp的默认模板（空白模板），创建时，选择。1、如果要支持微信小程序，那么可以尝试使用。中查找适合的ui组件、ui框架、开发模板。是无法跨多端使用的
贼好用的Uniapp的UI组件库Thor UI
weixin_68658847的博客
08-22 1109
贼好用的Uniapp的UI组件库Thor UI
uniapp开发app调用子组件方法
03-11
### 如何在 UniApp 中从父组件调用子组件的方法 在 UniApp 中，通过 `ref` 属性可以在父组件中获取子组件的实例并调用其方法。具体操作如下： #### 使用 ref 获取子组件实例 当定义子组件时，在模板中的标签上添加 `ref` 属性指定唯一名称。 ```html <template> <div class="parent"> <h4>父组件</h4> <!-- 子组件 --> <child-component ref="myChild"></child-component> <button @click="callChildMethod">调用子组件方法</button> </div> </template> <script> import ChildComponent from './components/ChildComponent.vue'; export default { components: { 'child-component': ChildComponent, }, methods: { callChildMethod() { this.$refs.myChild.childFunction(); } } } </script> ``` 上述代码展示了如何设置 `ref` 并利用 `$refs` 来访问子组件实例及其公开的方法[^1]。 #### 定义可被外部调用的方法 为了使子组件内的某个特定功能能够由外界（即父组件）触发，则需确保该方法不是私有的，并且通常会放在 `methods` 对象里以便暴露给其他部分使用。 ```javascript // 子组件 (ChildComponent.vue) <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { data(){ return{ message:"初始状态" }; }, methods:{ childFunction(){ console.log('来自父级的消息'); this.message = "更新后的消息"; } } }; </script> ``` 此段脚本说明了怎样创建一个名为 `childFunction()` 的公共接口供父组件调用[^2]。 #### 注意事项 需要注意的是，如果尝试在一个尚未挂载完成或者不存在 DOM 结构的情况下直接引用子组件可能会失败。因此建议在生命周期钩子里确认时机合适再执行此类操作，比如 mounted 或者 updated 阶段之后[^3]。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值