uniapp+nvue实现仿微信/得物相册插件：选择界面 +自定义相册+图片视频过滤

最新推荐文章于 2024-10-15 10:47:34 发布
最新推荐文章于 2024-10-15 10:47:34 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： uniapp插件 文章标签： ios uni-app 前端框架 vue android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49054461/article/details/120818158
版权
本文介绍了如何使用uniapp和nvue构建一个仿微信/得物相册选择功能，包括相册过滤、图视频筛选、自定义UI和灵活的布局控制。插件支持Android和iOS，提供了清空已选项目、获取已选项目等方法，允许开发者进行高度定制。
摘要由CSDN通过智能技术生成

本篇文章基于uniapp 框架+ nvue，实现了uniapp仿微信/得物相册选择功能实例项目，该插件实例实现了以下功能：

1: 相册过滤

2: 图视频过滤

3: 界面UI定制化

4: 栅格列数定制化

效果图：

技术实现

  • 开发环境：HbuilderX + nodejs
  • 技术框架：uniapp + vue2.x
  • 测试环境：App端(Android + IOS)
  • 插件：Zhimi-Album-JustPicker
  • 代码：开源

效果概览

在uniapp开发下，安卓和ios端表现效果高度一致，通过可控性的api配置使得相册实现高度可定制性，可以实现内置图片按钮，列数控制，多语言环境等功能。

 

最低0.47元/天 解锁文章
智密科技
关注
专栏目录
uniapp框架如何实现仿微信相册 | 图视频过滤、相册选择功能
11-11 3132
今天我们分享基于uniapp + vue实现仿微信相册插件实例，该插件完全还原了微信相册的功能 1: 相册选择 2: 图片，视频类型过滤 3: 自定义相册界面UI 技术实现 开发环境：HbuilderX + nodejs 技术框架：uniapp + vue2.x 测试环境：App端(Android + IOS) 代码：开源 效果概览 界面布局 这里仿微信相册界面主要还是样式为主，功能上使用了“智密相册-自定义原生相册”插件，使用插件实现相册的相关功能，然后我们...
uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息
10-19 5149
基于uniapp + nvue实现的uniapp仿微信界面功能聊天应用 txim 实例项目，实现了以下功能。 1: 聊天会话管理 2: 好友列表 3: 文字、语音、视频、表情、位置等聊天消息收发 4: 一对一语音视频在线通话 先放上效果预览 技术实现 开发环境：HbuilderX + nodejs 技术框架：uniapp + vue2.x + node-sass 状态管理：Vuex 自定义组件：ChatLayout、ChatContactItem、ChatInpu
android仿最新版本微信相册--附源码
weixin_34010949的博客
04-06 275
　　仿微信相册选择图片，查看大图，写的不太好，希望评论指出不足，谅解，先介绍一下我的基本思路。　　转载请注明出处：blog.csdn.net/self_study/…　　对技术感兴趣的同鞋加群 544645972 一起交流。 思路 第一步，获取所有图片路径 　　第一步获取手机上的所有图片路径： Uri uri = MediaStore.Images.Media.EXTERNAL_CONTENT_U...
iOS--app自定义相册--从自定义的相册中获取图片
weixin_33881140的博客
01-23 222
一.获取单张图片 思路: 1.利用UIImagePickerController可以从系统自带的App(照片\相机)中获得图片 2.设置代理,遵守代理协议 注意这个UIImagePickerController类比较特殊,需要遵守两个代理协议 @interface ViewController () <UIImagePickerControllerDelegate, U...
高仿微信相册（整理）
灿烂的黑土
09-09 869
对于相册展示，多选图片以及最多选择限制张数，在以前的项目中也做过。只是没有整理，最近有点事情，就梳理下，方便以后学习使用，大神请自行掠过。 注明，本demo是参考鸿洋大神的  http://blog.csdn.net/lmj623565791/article/details/39943731/ 首先上效果图        上面就是最终效果了，UI有点丑，请见谅，毕竟不是
仿微信相册选择html,ImagePicker的使用（完全仿微信UI，实现了拍照、图片选择）...
weixin_28725553的博客
06-03 291
ImagePickerAndroid自定义相册，完全仿微信UI，实现了拍照、图片选择(单选/多选)、 裁剪 、旋转、等功能。1.用法使用前，对于AndroidStudio的用户，可以选择添加:compile 'com.lzy.widget:imagepicker:0.3.0' //指定版本 compile'com.lzy.widget:imagepicker:+' //最新版本或者使用compil...
uniapp框架如何实现仿微信相册插件 | 图视频编辑 + 压缩
11-28 1600
在上上篇文章中（），我们基于uniapp框架实现了仿微信相册中的拍照+录像功能。今天，就继续在uni-app中实现： 1: 图片编辑 2: 视频编辑 3: 文件压缩 技术实现 开发环境：HbuilderX + nodejs 技术框架：uniapp + vue2.x 测试环境：App端(Android + IOS)、 代码：开源 效果预览 业务分析 这里主要是承接上次写的仿微信相册(uniapp框架如何实现仿微信相册 | 图视频过滤、相册选择...
uniapp+nvue实现仿微信App聊天应用 —— 成功实现好友聊天+语音视频通话功能
10-31 3677
基于uniapp + nvue实现的uniapp仿微信App聊天应用 txim 实例项目，实现了以下功能。 1: 聊天会话管理 2: 好友列表 3: 文字、语音、视频、表情、位置等聊天消息收发 4: 一对一语音视频在线通话 技术实现 开发环境：HbuilderX + nodejs 技术框架：uniapp + vue2.x + node-sass 状态管理：Vuex 测试环境：App端(Android + IOS) 插件：Zhimi-TXIM、Zhimi-TRTCCalling 代码：.
uniapp+nvue开发之仿微信语音+视频通话功能 ：实现一对一语音视频在线通话
10-24 2634
本篇文章是利用uni-app和nvue实现微信效果功能的第三篇了，今天我们基于uniapp + nvue实现的uniapp仿微信音视频通话插件实例项目，实现了以下功能： 1: 语音通话 2: 视频通话 3: 寻呼状态回馈 软件效果： 技术实现 开发环境：HbuilderX + nodejs 技术框架：uniapp + vue2.x + node-sass 测试环境：App端(Android + IOS) 插件：Zhimi-TRTCCalling 代码：开源...
uniapp+vue完美实现仿微信IM，使用了腾讯云IM TXIM 腾讯云实时音视频 TRTC
12-04
app技术开发的仿微信界面IM实例项目，开源Vue版本源码，对于要求高的开发者我们也开发了NVUE版本，实现了文本消息、图文消息、表情(gif动画)，图片预览，图片编辑，视频预览，视频编辑，仿微信朋友圈的图片选择、...
手机相机和相册：仿微信自定义相册
雨山的博客
04-19 1098
手机相册的展示能满足大部分需求，但是就是有那么些产品经理想搞事情。要仿照微信的自定义相册来做。没办法，产品的合理需求必须要满足。现在咱们开始搞……一、仿微信自定义相册界面原谅道长的无能，不能把做的Demo弄个动图上来，只能截图…… 相册的主界面： 图片的预览界面： 二、功能实现记住在清单文件中添加权限：<uses-permission android:name="android.permiss
uniapp实现自定义相机
没有途径，只有努力
03-08 3890
uniapp拍照闪退解决方案，实现自定义相机,拓展性挺强的,可以实现自定义水印、身份证拍摄、人像拍摄等这里我简单实现一个相机功能主要用于解决闪退Tip：这里需要创建nvue文件哦~创建-- 底部菜单区域背景 -- > < cover - image class = "menu-mask" src = "/static/live-camera/bar.png" > < / cover - image >
仿微信修改头像，自定义相册、自定义裁剪
03-15 614
最近因为项目需求需要自定义修改头像时的相册，另外调用系统裁剪经常出现无法裁剪图片的错误，所以裁剪也决定自定义，参照了这两篇文章： https://blog.csdn.net/lvshaorong/article/details/51263648?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribut...
uni-app中添加自定义相机（微信小程序+app）
最新发布
qq_29184685的博客
10-15 1182
2、使用h5plus提供的plus.video.LivePusher来实现，可以使用于vue平台，如果需要在相机上覆盖样式，比如边框之类的比较复杂，实践过后发现获取的图片宽度比相机宽度大，获取快照时间过长，大概需要2秒。2.1、这种方法可以在vue页面中使用，自定义样式需要plus.webview.create添加一个html页面来实现，在项目根目录下添加一个hybrid目录，在目录下添加html页面。1、使用live-pusher标签，但是页面需要是nvue平台【推荐使用这种】
Uniapp自定义相机界面
xsy341341的博客
06-07 2776
Uniapp自定义相机拍照录像功能，自定义界面实现功能
如何用uniapp+vue开发自定义相机插件——拍照+录像功能
11-17 8897
调用手机的相机功能并实现拍照和录像是很多APP与插件都必不可少的一个功能，今天智密科技就来分享一下如何基于uniapp + vue实现自定义相机界面，并且实现： 1: 自定义拍照 2: 自定义录像 3: 时长控制 4: 闪光灯控制 本文主要先分享前两条最基本的功能实现 先看效果： 技术实现 开发环境：HbuilderX + nodejs 技术框架：uniapp + vue2.x 测试环境：App端(Android + IOS) 代码：开源 效果概览 界面布局 这..
微信小程序中相机api_微信小程序API 图片
weixin_39982580的博客
12-19 636
压缩质量，范围0～100，数值越小，质量越低，压缩率越高(仅对jpg有效)。图片路径，图片的路径，支持本地路径、代码包路径图片路径，图片的路径，支持本地路径、代码包路径wx.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照。OBJECT参数说明：参数类型必填说明countNumber否最多可以选择的图片张数，默认9sizeTypeStringArray否"original"原...
uniapp自定义相机
m0_74170441的博客
03-27 1516
url: baseUrl + "/common/upload", // 上传图片的接口地址。url: baseUrl + "/common/upload", // 上传图片的接口地址。filePath: tempFilePath, //所要上传的图片地址。filePath: tempFilePath, //所要上传的图片地址。cameraPosition: 'back', // 初始摄像头位置为后置。name: 'file', //所要上传的文件类型。name: 'file', //所要上传的文件类型。
uniapp自定义照相机百度ORC卡证识别 拍照蒙版 自动裁剪
2303_76218115的博客
02-10 2540
android卡证识别 uniapp银行卡识别 uniapp身份证识别 uniapp卡证识别 uniapp拍照蒙版 uniapp自定义照相机 百度ORC卡证识别 自动识别身份证正反面 uniapp自动识别银行卡
uni-app自定义组件（数据传递、自定义弹框、自定义图片选择）
yyxhzdm的博客
09-07 1355
效果图： 自定义组建的步骤： 1.在项目中创建目录：components 2.新建组件.vue 文件 例如：AddImgs.vue 3.组件文档结构 实例： 4.使用组件 实例： 5.接下来，我将其中图片选择的自定义组件代码粘贴出来 （1）.子组件： <template name="AddImgs"> <view class="content"> <view class="image-wrap"&g...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值