uniapp好用项目和插件总结

最新推荐文章于 2024-05-27 15:48:51 发布
最新推荐文章于 2024-05-27 15:48:51 发布
阅读量7.8k 收藏 160
点赞数 21
分类专栏： # 移动端/小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37132495/article/details/104251625
版权

前言：
1.我是一个后端人员，很久没有碰过任何前端东西，所以总结出一些能用上的别人的轮子，方便提高自己的学习和开发效率

2.本文收集来源是Uniapp官方的插件市场和github

3.本文收集的内容是评分高的和一些评价不错的，以目录链接带截图的形式呈现，当然我没总结进来的不代表不好

4.本文会持续更新，因为数目太多和个人理解不到位，可能会出现某些分类不严谨和错误，请见谅！也欢迎给出建议和评论

5.最后感谢所有愿意开源分享的开发者！

更新时间更新时插件市场总页数是否全部阅读
2020.2.11121页是

本文github地址：

地址~对你有帮助可以来给个⭐

文章目录

组件库

ThorUI
ColorUI

UI界面和组件

轮播图系列

高级轮播图

在这里插入图片描述

3D banner/swiper

在这里插入图片描述

大小图轮播，类似手机相册

在这里插入图片描述

QSwiper组件（切换动画很强大）

在这里插入图片描述

画廊(ynGallery)组件（类似轮播但不是）

在这里插入图片描述

带缩放的轮播

在这里插入图片描述

一个3D的炫酷的图片轮播展示组件

3D图片轮播组件，支持点击/手势切换、自动轮播、点击事件、标题，新增背景幕布设置。推荐一次5-9张图
在这里插入图片描述

富文本

富文本类似朋友圈，可以全文折叠

在这里插入图片描述

仿微信朋友圈模版

在这里插入图片描述

富文本组件加强 js 工具

在这里插入图片描述

可指定高亮内容，是否加粗字体设置，颜色设置

在这里插入图片描述

Parser富文本插件（很强大）

在这里插入图片描述

瀑布流

瀑布流模板

在这里插入图片描述

一个瀑布流，一个全部订单，还行

在这里插入图片描述

电商整套模板

Simple-store电商模板

在这里插入图片描述

MzShop-商城模板 代码清晰易懂

在这里插入图片描述

商城模板

在这里插入图片描述

品牌商城模板整套

在这里插入图片描述

mix-mall 电商项目模版

在这里插入图片描述

省钱兄（APP+小程序+H5+公众号）淘宝客商城项目前端

在这里插入图片描述

商城手机端后台管理+多商户商家端+分销

在这里插入图片描述

简洁商城模板

在这里插入图片描述

通用书籍阅读APP，BookChat 的 uni-app 实现版本

在这里插入图片描述

其他整套模板

美容行业模板

在这里插入图片描述

多平台管理系统模板uniapp-admin

在这里插入图片描述

新闻模板

在这里插入图片描述

看漫画（精美）

在这里插入图片描述

数字货币交易系统模板

在这里插入图片描述

QQ音乐模板

在这里插入图片描述

仿「ONE · 一个」App模板

在这里插入图片描述

看图App模板

在这里插入图片描述

聊天软件，可以建群，私聊 uniapp版本，持续更新中

在这里插入图片描述

登陆注册忘记密码模板

极简登录注册模板

极简的登陆模板，包含登陆，注册，找回密码，提供Vuex示例
在这里插入图片描述

登陆注册忘记密码模版

在这里插入图片描述

登录注册忘记密码模板

在这里插入图片描述

Simple-login包含登录注册页面模版

在这里插入图片描述

首页单页面

仿新闻仿头条首页

在这里插入图片描述

独家折扣APP首页

在这里插入图片描述

教育APP首页

在这里插入图片描述

商城首页单页模板

在这里插入图片描述

个人中心单页面

仿京东个人中心模板

在这里插入图片描述

cmd-person个人中心模板

在这里插入图片描述

个人中心页面模板

在这里插入图片描述

商城个人中心

在这里插入图片描述

wkiwi-个人中心

在这里插入图片描述

个人中心

在这里插入图片描述

个人中心模板

在这里插入图片描述

其他单页面

手机APP商城个人消息提醒页面模板

在这里插入图片描述

达人说模版，simple 达人说

在这里插入图片描述

在这里插入图片描述

审批模板，支持小程序和APP

在这里插入图片描述

基于uni-app的搜索页面，带历史搜索记录

在这里插入图片描述

分享推广页面，分享第三方、保存二维码、复制推广地址

在这里插入图片描述

发布评价模板

在这里插入图片描述

glance商品列表（修复页面超宽）

在这里插入图片描述

列表到详情页面模板

在这里插入图片描述

问题反馈页面模板

在这里插入图片描述

导航栏

顶部导航栏+list上下拉刷新（很强）

在这里插入图片描述

ADTabBar 底部导航栏，可以写在多个界面

在这里插入图片描述

glance顶吸滑动导航栏

在这里插入图片描述

tab+list+pull刷新+触底加载+左右滑动 模板

在这里插入图片描述

图表

uCharts高性能跨全端图表

在这里插入图片描述

ucharts图表二次封装（已使用过）

在这里插入图片描述

地图相关

原生地图路线规划实现模版

在这里插入图片描述

ms-openMap 打开第三方地图

在这里插入图片描述

动画

w-loading加载动画 30 多款

在这里插入图片描述

数字增长动画

在这里插入图片描述

数字增长动画2

在这里插入图片描述

长按录音交互

在这里插入图片描述

loading动画,简单易修改

在这里插入图片描述

css进度条,多种效果任意选择

在这里插入图片描述

canvas

canvas手写签名带清除保存

在这里插入图片描述

海报名片canvas

在这里插入图片描述

一款基于canvas的商品海报生成组件

在这里插入图片描述

手绘签名

在这里插入图片描述

电子签名修改颜色粗细

在这里插入图片描述

选择器

时间日期选择器

可禁用超过当前的时间，可设置时间选项，时间可灵活自定义
在这里插入图片描述

DatePicker 多粒度时间选择器

在这里插入图片描述

日期时间选择器

全新版本，一款高颜值、多场景的日期时间选择器，提供自定义颜色/格式/文案等。
在这里插入图片描述
在这里插入图片描述

good-date-picker

在这里插入图片描述

抽奖优惠券

抽奖转盘 优化

在这里插入图片描述

QS-coupon 优惠券

在这里插入图片描述

抽奖转盘

在这里插入图片描述

优惠券小组件

在这里插入图片描述

活动红包模板

在这里插入图片描述

日历

模仿途家住宿日历

在这里插入图片描述

ss-calendar 日历签到

在这里插入图片描述

打卡日历calendar

在这里插入图片描述

骨架屏

好评如潮的骨架屏

在这里插入图片描述

支付相关

验证码 密码 微信支付宝支付 支付密码样式

在这里插入图片描述

表格

t-table 表格组件

在这里插入图片描述

其他

开箱即用的公共搜索组件（历史记录，app语音输入，搜索推荐）

在这里插入图片描述

气泡菜单，类似微信右上角

在这里插入图片描述

一个一般的分页按钮实现

在这里插入图片描述

全屏客服按钮可拖动，自动吸边

在这里插入图片描述

仿微信列表长按弹窗菜单

在这里插入图片描述

小程序首次收藏提示

在这里插入图片描述

队列展示图片广告, 也可自定义其他内容

在这里插入图片描述

水印添加（文字或图片）

在这里插入图片描述

音乐播放器

在这里插入图片描述

NAUI-card卡片

在这里插入图片描述

顶部信息提示组件

在这里插入图片描述

app升级界面自定义插件

在这里插入图片描述

flex布局入门

在这里插入图片描述

实用的自定义海报生成器 QS-SharePoster

在这里插入图片描述

一键回到顶部，非常精简

在这里插入图片描述

下拉式筛选菜单

在这里插入图片描述

工具

网络请求

_request

在这里插入图片描述

luch-request

在这里插入图片描述
在这里插入图片描述

myp-request

在这里插入图片描述
在这里插入图片描述

封装的request网络请求

基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截

wkiwi-request

微信小程序相关

微信小程序转换为uni-app项目
微信小程序前端获取openId

在这里插入图片描述

小程序获取头像授权+绑定手机

在这里插入图片描述

图片处理

图片涂鸦

在这里插入图片描述

图片裁剪

在这里插入图片描述

个人头像上传裁剪功能插件

在这里插入图片描述

其他

介绍：https://ask.dcloud.net.cn/article/36037

百度身份证识别、银行卡识别、车牌识别、文字识别OCR

在这里插入图片描述

DateFormat(日期格式化或日期提取)

在这里插入图片描述

全局方法封装（请求/正则/URI）

在这里插入图片描述

极光IM在线聊天使用

在这里插入图片描述

simple-network 监听网络状态

在这里插入图片描述

可以跳转到淘宝或天猫的多端插件（基于百川轻电商）

不支持微信
在这里插入图片描述

别人的收集贴

  1. 官方：https://uniapp.dcloud.io/casecode
  2. https://github.com/aben1188/awesome-uni-app/blob/master/README.md
Gangbb
关注
  • 21
    点赞
  • 踩
  • 160
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
扩展应用功能的无限可能——UniApp生态系统中的插件探索(一·)
Why_does_it_work的博客
06-29 2640
在UniApp中，插件是指可扩展的功能模块，它们可以用于增强应用的功能或提供特定的功能集合。插件可以由开发者自行定义和实现，然后通过引入和使用来扩展UniApp应用。插件可以根据其功能和用途进行分类。以下是一些常见的UniApp插件分类：基础功能插件：这些插件提供了一些基本的功能，例如网络请求、本地存储、事件处理等。它们通常被广泛使用，并且对于大多数UniApp应用都是必需的。UI组件插件：这些插件提供了各种用户界面组件，例如按钮、列表、表单、弹窗等。它们可以帮助开发者快速构建漂亮和交互性强的界面。
五星好评！基于uniapp开发的开源项目推荐
icomk的博客
10-31 8182
1.得推B2C商城 一套简洁的B2C商城，全部功能完善，用户、下单、注册。 2.来客电商 微信小程序电商平台前后端开源PHP，包含分销，拼团，抽奖，红包，多店，会员制，种草社交，新零售等功能，整个系统架构非常简单，适合小型团队或者个人开发者二次开发。 3.mix-mall 电商项目模版 一个基于uni-app开发的电商项目模板。 4.Simple-store Simple-store 一款免费的商城模版 5.uni-app-ticket 一个仿某旅游的小项目，仅有购买车票选座等简单功能。 6.uniappQ
3. 使用 VsCode 开发 uni-app 项目需要使用到的插件
最新发布
zrblue的博客
05-27 542
其中，：快速创建页面。
uniapp轮播图
apple_50717761的博客
09-25 2826
总结一下，uniapp的轮播图组件是一个非常强大且灵活的工具，可以帮助我们在应用中展示多张图片或内容。uniapp提供了丰富的轮播图组件属性，如autoplay（自动播放）、interval（轮播间隔时间）等，你可以根据需要在``标签中设置这些属性来调整轮播图的行为。首先，要使用uniapp的轮播图组件，我们需要在页面中引入该组件。使用uniapp轮播图组件非常简单，只需在``标签中添加``标签，并在其中添加图片或内容即可。
uniapp卡片式轮播图——uView
phper_coca的博客
04-23 3363
uniapp中使用uView的卡片式轮播图
uniapp实战项目 （仿知识星球App) - - 效果篇
热门推荐
业余丰富各种技术栈
08-21 2万+
uni-app实战，手把手教你写uni-app,以及uni-app踩坑分享
uniapp APP端客服插件
05-16
1. **安装插件**：在uniapp项目中，你需要通过HBuilderX的插件市场或者CLI命令行工具来安装客服插件。确保你的项目环境已经配置好uniapp和HBuilderX。 2. **引入插件**：在uniapp的main.js文件中引入客服插件，通过...
前端uniapp表情插件
05-09
【前端uniapp表情插件】是专为基于uniapp框架的前端开发设计的一款组件，用于在应用程序中集成和管理各种表情符号，提升用户在聊天、评论等交互场景下的体验。uniapp是一个多端开发框架，它允许开发者用一套代码编写...
uniapp-百川插件demo.zip
12-30
总结，"uniapp-百川插件demo.zip"提供了一个完整的uniapp与百川插件集成的实践案例，通过这个案例，开发者可以深入理解如何在uniapp项目中利用百川服务，提高开发效率，同时也能对uniapp的跨平台开发有更深入的认识...
uniapp封装的接口和已经引入uview的模板项目
07-18
总结来说，"uniapp封装的接口和已经引入uview的模板项目"是一个集成了高效接口管理和优美UI设计的开发框架，旨在帮助开发者快速、高效地构建跨平台移动应用。通过深入理解和实践，开发者可以提升开发效率，同时保证...
uniapp项目源码示例房源系统uniapp项目源码示例房源系统
10-13
总结，【uniapp项目源码示例房源系统】是一个综合性的学习资源，涵盖了uniapp框架的使用、移动应用开发流程以及房源管理系统的关键功能实现。通过学习和研究此项目，开发者不仅可以掌握uniapp的开发技术，还能了解到...
uni-app优秀的Ui模板和项目案列
hollebug的博客
04-20 2万+
ColorUI-UniApp https://ext.dcloud.net.cn/plugin?id=239 这是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的Css组件库. studio-scaffold · 主题库及UI模板 https://ext.dcloud.net.cn/plugin?id=1638 一套集成20+（基于微信视觉规范）组件、主题、请求库、utils...
uni-app canvas绘图流程，从绘制图案、绘制文字到完成
山水一程
06-08 9624
好的我们开始，uniapp绘制海报进行保存是我们经常需要制作的功能。而绘制海报，我们一般会绘制图片，绘制文字，绘制截取图片。 下面让我们来看下绘制一个海报的具体过程。 初始化画布（这里的this必不可少，否则在某些情况下会产生绘制失败的bug） <canvas class="canvas" canvas-id="myCanvas"></canvas> const ctx = uni.createCanvasContext('myCanvas',this); 1、首先我们需要绘制图片
uniapp-uCharts图表
paidaboluo的博客
09-11 1482
uniapp-uCharts图表
uniapp 仿照小米有品 轮播图组件（堆叠轮播组件）
yehaocheng520的博客
10-16 1961
仿小米有品 轮播图组件 公司UI提供的精钢区的轮播图样式如上图所示： 本着简单高效的编程习惯，我打开了百度…… 由于公司现在使用的是 uniapp，所以先从DCLOUD 插件市场查找。 找到一个堆叠轮播组件： dcloud堆叠轮播组件：https://ext.dcloud.net.cn/plugin?id=1250 最终样式调整之后展示的效果如下图所示： 代码如下： //组件导入: import blackmonthSwiper from "@/components/blackmonth-swiper
深入理解package.json中dependencies和devDependencies 的区别
bamboozjy的博客
01-21 3208
现在很多前端框架项目中都需要使用到依赖，但是安装依赖的时候到底应该使用  --save或-S（简写）   还是  --save-dev或-D（简写） 呢，所以需要对dependencies和devDependencies 有清楚的认识。 dependencies：生产和开发都会用到的依赖，最后会被打包到项目中。eg：npm i jquery -S devDependencies ：...
uniapp 项目汇总
wan_waning的博客
07-09 1271
1.uniapp 各路由跳转的区别 uni.navigateTo 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 uni.redirectTo 关闭当前页面，跳转到应用内的某个页面。 uni.reLaunch 关闭所有页面，打开到应用内的某个页面。 uni.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。 uni.navigateBack 关闭当前页面，返回上一页面或多级页面。可通...
如何调整uniapp轮播图swiper的样式（dot的样式和位置）
kouryoushine的博客
12-11 1万+
背景 官网文档不解释很多，这里我来详细说明下，很简单可以做到任意修改自己想要的效果。 需求 我们需要做一个轮播图，其他没什么但是dot的位置要偏上一些，而且样式有要求。 实现 利用uniapp官网的demo组件uni-swiper-dot，这个组件可以只用几行代码实现想要的效果，代码如下 <template> <view class="content"> <u...
uniapp实现淡入淡出的轮播
weixin_41193139的博客
11-21 4994
uniapp上使用animation 动画实现渐隐渐现的轮播 有个需求让我在实现一个渐隐渐现的轮播，可以左右滑动切换不同的图片，可是老天，我用的是uniapp！他不支持啊，微信小程序也是不支持的，然后我参考了一个回答，改了改实现了这个功能。技术一般，多多指教。下方小程序实现的链接。 [https://developers.weixin.qq.com/community/develop/doc/40...
uniapp百川插件源码
09-02
UniApp 百川插件源码指的是基于 UniApp 框架使用的百川插件的源代码。百川是阿里巴巴集团旗下的一款移动应用开发框架，它提供了丰富的功能和工具，能够帮助开发者快速搭建跨平台的移动应用。 UniApp 是一种基于 Vue.js 的前端开发框架，它可以让开发者使用 HTML、CSS 和 JavaScript 来构建移动应用程序，同时支持多个平台，包括微信、支付宝、百度、头条等。 UniApp 百川插件源码是指基于 UniApp 框架开发的插件的代码，可以用来定制和修改插件的功能。 使用 UniApp 百川插件源码可以实现许多功能，比如登录授权、支付功能、地图导航等。通过定制插件的源码，可以根据项目需求进行个性化的开发和定制。 开发者可以根据自己的需求下载百川插件的源码，然后在 UniApp 项目中进行集成和使用。通过对源码的分析和修改，可以实现定制化的开发和功能扩展。 总结来说，UniApp 百川插件源码给开发者提供了一个基于 UniApp 框架的插件开发平台，可以让开发者充分发挥创造力，定制和扩展插件的功能，满足移动应用的个性化需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值