一、场景描述

 用uni-app开发嵌套在安卓里面使用

二、需求描述

 点击图片实现，预览、以及放大缩小拖拽功能（第一反应就是使用uni.previewImage）

三、问题描述

使用uni-app 中的uni.previewImage预览图片，在浏览器正常，但是打包到app 显示不出来,一般如果图片路径有问题，最起码会出现黑色背景，图片加载中，或加载失败的情况，但是app 点击图片，直接显示空白，有大神遇到过这个问题吗?

四、问题解决方式

为了解决以上问题，决定使用 movable-area + movable-view 结合实现该功能（本身这个组件就可以实现放大缩小以及拖拽），样式设置外层盒子 100vw * 100vh,但是放到app上以后，图片显示不全，全屏的背景色也没有显示，后猜想可能是高度问题，所以不使用 100vh 而使用 rpx或者px 的实际高度后，图片能正常预览了

五、奉上代码（组件）

<template><view class="box"  v-if="preview"><movable-area scale-area class="movable-area"  @click.stop="preview=false"><movable-view class="movable-view" direction="all" scale="true"scale-min="1" scale-max="4" :scale-value="scale">//为啥使用img, 因为发现使用image 图片显示不了（传入的图片地址没有域名，只有域名后面的部分）<img  class="img" :src="src" mode="widthFix"></img></movable-view></movable-area></view>
</template><script>export default {name: 'PreviewPic',props: {src: {type: String,required: true}},data() {return {scale: 1,current: '',preview: false,};},onLoad() {},methods: {}}
</script><style lang="scss" scoped>.box{position: fixed;z-index: 99999;left: 0;top: 0;bottom: 0;left: 0;width: 100vw;height: 800px;background-color: #000;}.movable-area {width: 100vw;height: 800px;}.movable-view {width: 100vw;height: 100%;display: flex;justify-content: center; align-items: center;}.img{width: 100%;}
</style>

使用时，引入组件，点击图片传入src，控制组件内 preview 显示就可以了，点击关闭，组件内已经做了，就可以不用管了

记录安卓与uni-app混合开发遇到的坑——图片预览问题相关推荐

安卓调用系统相机拍照并返回，实现图片预览
安卓调用相机拍照并返回预览及相关类型换(略缩图,画质糊)原图预览参考传送门一.demo预览二.xml代码和activity简单代码描述. 三.顺便写几个转换工具方法吧今年主要在忙新项目,安卓也有 ...
App混合开发-前端小白理解
什么是混合app 混合开发的App(Hybrid App)就是嵌一个轻量级的浏览器,一部分原生的功能改为Html5来开发,这部分功能不仅能够在不容升级的情况下动态更新,而且可以在Android或iOS ...
谈谈Android App混合开发
推酷文章站点主题公开课活动客户端荐周刊登录谈谈Android App混合开发时间 2015-08-25 20:13:43bxbxbai 原文 http://bxbxbai.gi ...
微信小程序开发聊天室——实时聊天，支持图片预览
第一次写小程序,老板就让我用websoket写个聊天对话,群聊这种.第一次写聊天功能,第一次用websoket,第一次用小程序,这是在考验我吗?不过我还是研究了一下,终于实现了. 首先看一下界面,界面 ...
OpenHarmony应用开发之如何创建DAYU200预览器
OpenHarmony应用开发之如何创建DAYU200预览器大家都知道预览器是很好用的,那么如何配置呢, 只要关注这两个参数就好 width,height 1920*1080 DPI 为240 视频 ...
BarTender破解版标签打印二次开发二维码C#预览图
很多生产环节都需要条码打印的功能,这篇文章就介绍下如何使用C#实现条码打印的功能,希望对大家能有所帮助! 条码设计软件采用的是BarTender 10.1,在此基础上进行的二次开发. 运行成功的预览图 ...
微信公众号，点击按钮打开pdf文件流，安卓跳转到浏览器里下载，ios可预览但默认不能下载
微信公众号,点击按钮打开pdf文件流,安卓跳转到浏览器里下载,ios可预览但默认不能下载注:在pc上开始时采用这两种方式是没有效果的,或者打开的是空页面,但上线到公众号是没有问题的!!!!!!!!! ...
vue3 开发一个图片预览插件
vue3 的插件开发和vue2思路类似但是写法却迥异.主要变化在vue3没有了extend构造器. 这次我们通过一个图片预览插件,贯通整个vue3插件开发的过程. 1 在src下新建lplugins文 ...
教你如何使用Flutter和原生App混合开发
点击上方 "程序员小乐"关注, 星标或置顶一起成长每天凌晨00点00分, 第一时间与你相约每日英文 Things in this world are temporary. If ...

记录安卓与uni-app混合开发遇到的坑——图片预览问题