一、效果
二、代码部分
实现思路,就是使用常用控件view ,但是会遇到的问题是,长图大小超过屏幕大小时,就会出现图片被压缩的情况。最后,可以加上scroll-view来解决这个问题,实现代码如下:
xml部分
http://192.168.98.1:8080/web/xx.jpg说明,这个地址是清明上河图地址,本人测试的时候是存放在本地的tomcat目录下,通过启用tomcat应用来部署实现链接访问。
<!-- 图片展示测试 -->
<view wx:if="{{true}}">
<scroll-view scroll-y="{{true}}" style="width:100%;height:{{sysheight}}px;">
<view class="img-size">
<image src="http://192.168.98.1:8080/web/xx.jpg" mode="widthFix" class="liucheng-img"></image>
</view>
</scroll-view>
</view>
js部分
//获取设备屏幕高度
wx.getSystemInfo({
success: (result) => {
this.setData({
sysheight:result.windowHeight
})
},
});
css部分
page{
width: 100%;
height: 100%;
}
.img-size {
width: 100%;
margin: auto;
}
.liucheng-img {
width: 100%;
height: 100%;
}
三、展示pdf
展示方式,第一可以直接使用webview
<web-view src="{{pathData}}" </web-view>
或者使用第三方库pdf.js
<web-view src="https://byfile.disscode.cn/pdfjs-2.8/web/viewer.html?file={{url}}"></web-view>
还可以使用微信小程序自带api先下载后打开
wx.downloadFile({
url: "http://192.168.43.101:8080/web/yu.pdf",//可以是后台传过来的路径
success: function(res) {
const filePath = res.tempFilePath
console.log("下载文件成功=="+JSON.stringify(res.data))
wx.openDocument({
filePath: filePath,
success: function(res) {
//成功
console.log("打开文件成功=="+JSON.stringify(res.data))
},
fail:function(res){
console.log("打开文件失败=="+JSON.stringify(res.data))
}
})
},
fail:function(res){
console.log("下载文件失败=="+JSON.stringify(res.data))
}
})