【webView中打开pdf文件,再点击设置切换页面后,再点击返回,则pdf无法正常显示,显示空白?】

https://developers.weixin.qq.com/community/develop/doc/000ea83ba5cb58a586feb827c59c00跟这个问题一样

解决办法就是在onshow中奖地址清了重新赋值,就是缓存的问题

html 复制代码
<div>
		<web-view :src="pdfurl" :webview-styles="webviewStyles" >
			<cover-view class="share-button">
				<cover-view class="share-txt" >
					<cover-image @click="goPages(`/subPages/Industry/report/download?src=${pdfurl}&title=${title}`)" class="share-img" src="https://static.solarbe.com/zhangshang/xiazai.png"></cover-image>
				</cover-view>
			</cover-view>
		</web-view>
		(生成分享图片)
		<canvas class="canvas" canvas-id="imgCanvas" style="width: 100%;height: 100%;position: absolute; top: -1000px; left: -1000px;"></canvas>
	</div>
js 复制代码
<script>
	import {reportLog} from '@/api/report/index.js'
	import util from '@/common/js/util.js';
	import {reportLists} from '@/api/report/index.js'
	export default{
		data(){
			return{
				title:'',
				desc:'',
				reportId:0,
				pdfurl:'',
				powerw: 0,
				shareUrl:'',
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				}
			}
		},
		//分享到聊天
		onShareAppMessage() {
			console.log(this.shareUrl,'this.shareUrl')
			return {
				title: this.title,
				path: '/subPages/Industry/webView?title='+this.title+'&desc='+this.desc,
				imageUrl: this.shareUrl
			};
		},
		onShow() {
			 let params = {
			 	page:uni.getStorageSync('productObj').page
			 }
			 //这里一定要清除一下,不然浏览器会觉得地址一样,不做任何操作
			 this.pdfurl='';
			 //这里要重新赋值,因为他在onshow的时候没有拿到
			 reportLists(params).then((res)=>{
				 res.data.forEach((item)=>{
					 if(item.id==this.reportId||uni.getStorageSync('productObj').id){
						 this.pdfurl = item.url;
					 }
				 })
			 })
		},
		onLoad(options) {
			let {title,desc,id,url} = options
			this.title = title
			this.desc = desc
			this.reportId = id
			// this.pdfurl = decodeURIComponent(url)
			// 设置title
			uni.setNavigationBarTitle({
			  title
			})
			// 设置分享
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			});
			// 浏览量
			this.reportLog()
			let message = uni.getSystemInfoSync(); //获取手机信息
			this.powerw = message.windowWidth / 375;
			const ctx = uni.createCanvasContext('imgCanvas');
			ctx.font = 'bold 15rpx serif'
			ctx.setTextAlign('left')
			ctx.setFillStyle("#000000")
			/**
			ctx: 画布的上下文环境
			content: 需要绘制的文本内容
			drawX: 绘制文本的x坐标
			drawY: 绘制文本的y坐标
			lineHeight:文本之间的行高
			lineMaxWidth:每行文本的最大宽度
			lineNum:最多绘制的行数
			*/
			this.textPrewrap(ctx, this.desc, 15 * this.powerw, 30 * this.powerw, 20 * this.powerw, 350, 8);
			var that = this
			ctx.draw(true, () => {
				setTimeout(function() {
					uni.canvasToTempFilePath({
						canvasId: 'imgCanvas',
						fileType: 'jpg',
						x: 0,
						y: 0,
						width: 500,
						height: 400,
						destWidth: 500,
						height: 400,
						success: function(res) {
							that.shareUrl = res.tempFilePath
							console.log(that.shareUrl,11111)
							// 在这里保存图片
						},
						fail: function(error) {
							console.log(error)
						},							
					})
				}, 100)
			})
		},
		methods:{
			reportLog(){
				let params = {
					'report_id':this.reportId
				}
				reportLog(params).then((res)=>{
					
				})
			},
			goPass(url){
				uni.redirectTo({
					url:url
				})
			},
			textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
				var drawTxt = ''; // 当前绘制的内容
				var drawLine = 1; // 第几行开始绘制
				var drawIndex = 0; // 当前绘制内容的索引
				content = content.replace(/\s*/g,"")
				// 判断内容是否可以一行绘制完毕
				if (ctx.measureText(content).width <= lineMaxWidth) {
					ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
				} else {
					for (var i = 0; i < content.length; i++) {
						drawTxt += content[i];
						if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
							if (drawLine >= lineNum) {
								ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
								break;
							} else {
								ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
								drawIndex = i + 1;
								drawLine += 1;
								drawY += lineHeight;
								drawTxt = '';
								// if(uni.getSystemInfoSync().osName === "ios"){
									
								// }
								// console.log(drawY,'drawY',content)
							}
						} else {
							// 内容绘制完毕,但是剩下的内容宽度不到lineMaxWidth
							if (i === content.length - 1) {
								ctx.fillText(content.substring(drawIndex), drawX, drawY);
							}
						}
					}
				}
			},
		}
	}
</script>
css 复制代码
<style scoped>
	image{
		width: 30rpx;
	}
	.dowload{
		height: 100rpx;
	}
	.share-button {
	  z-index: 999999;
	  position: fixed;
	  color: red;
	  display: flex;
	  justify-content: end;
	  align-items: center;
	  bottom:300rpx;
	  width:100%;
	  height: 100rpx;
	  right: 20rpx;
	}
</style>
相关推荐
你的眼睛會笑42 分钟前
uniapp 小程序 五星评分精确到0.1
javascript·小程序·uni-app
初遇你时动了情1 小时前
vue3 uniapp封装一个瀑布流组件
前端·javascript·uni-app
你的眼睛會笑1 小时前
uniapp 绘制五星评分 精确到半星
数据库·uni-app
林涧泣2 小时前
【Uniapp-Vue3】manifest.json配置
前端·vue.js·uni-app
是店小二呀4 小时前
【Linux】从零开始:编写你的第一个Linux进度条小程序
linux·运维·小程序
计算机-秋大田4 小时前
基于微信小程序的电影交流平台设计与实现(LW+源码+讲解)
java·微信小程序·小程序·课程设计
资深前端之路4 小时前
vue运用uniapp框架开发企业微信小程序中常用的一些基础方法
uni-app
然后就去远行吧11 小时前
小程序组件 —— 31 事件系统 - 事件绑定和事件对象
前端·javascript·小程序
说私域11 小时前
社群团购项目运营策略的深度剖析:融合链动2+1模式、AI智能名片与S2B2C商城小程序的综合应用
大数据·人工智能·小程序
林涧泣14 小时前
【Uniapp-Vue3】@import导入css样式及scss变量用法与static目录
css·uni-app·scss