uniapp小程序中使用web-view中的坑（cover-view安卓手机无法触发touch事件）巧妙解决

蛋黄不咸2023-12-08 18:06

背景：uniapp开发的小程序中使用web-view引入H5页面，这个H5也是uniapp开发需求：（1）增加一个解读报告按钮，仅可以上下拖拽（2）点击后携带参数跳转到小程序页面

错误实践：

首先想到的是使用cover-view来写这个解读报告按钮，有两种局限性：

cover-view覆盖在原生组件上的文本视图

1、安卓手机touch事件没触发（目前没找到解决方案） 2、cover-view中不能包含其他元素，所以uniapp中的movable-area和movable-view用不了

解决方案：

1、在uniapp的h5中写拖拽，使用movable-area和movable-view，代码如下： 2、uniapp中点击按钮跳转到小程序 index.html中加入如下代码：放到body下面

	<script type="text/javascript" src="./static/uni-webview-js.js"></script>
	<script type="text/javascript" type="text/javascript">
	     // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。注意uni sdk放到body下面
	        document.addEventListener('UniAppJSBridgeReady', function() {
	            uni.webView.getEnv(function(res) {
	                console.log('当前环境：' + JSON.stringify(res));
	            });
	        });
	</script>

xml 复制代码

<movable-area v-if="pdfSrc">
    <movable-view direction="all" damping="50" friction="0.5" scale="1.5" animation="ease" @click="freeInterpretation">
		<view class="dragOuter">
			<view>解读</view>
			<view>报告</view>
		</view>
    </movable-view>
</movable-area>

javascript 复制代码

freeInterpretation(){
	uni.webView.navigateTo({
            url: '/packageD/advanceReport/advanceReport?res_id='+this.options.res_id
	});
},

还有一种想法，给cover-view外层的view标签添加touch事件，还没去尝试