uniapp app的webview与h5交互操作

文章描述了在uni-app的nvue页面中如何实现与H5的交互,包括通过onPostMessage监听H5的消息,以及动态设置web-view的高度,同时展示了相关Vue组件和方法的使用,如处理页面加载、保存图片到相册等操作。
摘要由CSDN通过智能技术生成

app里的webview与h5交互操作,需要在h5页面加点代码,然后才能执行app里的方法
官方地址

请添加图片描述在nvue页面里才能实现与h5的交互,设置webview的高度

<template>
	<view>
		<view class="nav" :style="{'margin-top':styleObj.top}">
			<view style="width: 130rpx;height: 130rpx;display: flex;align-items: center;flex-direction: row;">
				<image src="/static/images/arrow_left_black.png" @tap="goback" style="width: 44rpx;height: 44rpx;margin-left: 20rpx;"></image>
			</view>
			<text style="font-size: 36rpx;height:36rpx;flex: 1;text-align: center;overflow: hidden;white-space: nowrap;">{{title}}</text>
			<text style="width: 130rpx;"></text>
		</view>
		<web-view :src="path" :style="{'height':styleObj.windowHeight+'px','width':styleObj.windowWidth+'px','top':statusBarHeight+'px'}"></web-view>
	</view>
</template>

<script>
	import {GoLun} from '@/utils/myPublic.js'
	import permision from '@/utils/wa-permission/permission.js'
	export default{
		data(){
			return{
				title:'',
				path:"",
				styleObj:{
					top:'',
					windowWidth:getApp().globalData.mySystemInfo.windowWidth,
					windowHeight:'',
					statusBarHeight:'',
				}
			}
		},
		onLoad(e) {
			let ss = getApp().globalData.mySystemInfo.windowHeight - getApp().globalData.mySystemInfo.statusBarHeight - 40;
			this.styleObj.windowHeight = ss;
			let pp = getApp().globalData.mySystemInfo.statusBarHeight+40;
			this.styleObj.statusBarHeight = pp;
			this.styleObj.top = getApp().globalData.mySystemInfo.statusBarHeight;
			console.log(e)
			let cc = decodeURIComponent(e.dataobj);
			let aa = JSON.parse(cc);
			this.title = aa.title;
			console.log('webview',aa)
			this.path = aa.path;
		},
		methods:{
			goback(){
				uni.navigateBack()
			},
			onPostMessage(e){
				console.log('应用响应',e)
				let data = e.detail.data[0];
				//保存海报
				if(data.action == 'saveImage'){
					this.selectImg(data.shareUrl);
				}
				//邀请好友
				if(data.action == 'share'){
					this.InviteFriends(data)
				}
			},
			//保存海报
			savePoster(url){
				console.log('保存海报',url)
				uni.showLoading({
					title: '图片保存中'
				});
				uni.downloadFile({
					url,
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败,请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: "保存失败,请稍后重试",
							icon: "none"
						});
					}
				})
			},
			//手机权限,摄像头和图册
			phoneAuthority(){
				return new Promise(async (rel,rej)=>{
					var platform = getApp().globalData.mySystemInfo.platform;
					if(platform == 'ios'){
						// let camera = permision.judgeIosPermission("camera");//判断ios是否给予摄像头权限
						//ios相册没权限,系统会自动弹出授权框
						let photoLibrary = permision.judgeIosPermission("photoLibrary");//判断ios是否给予相册权限
						if(photoLibrary){
							rel();
						}else{
							rej('请开启相册使用权限');
						}
					}else{
						// let camera = await permision.requestAndroidPermission("android.permission.CAMERA");//判断安卓是否给予摄像头权限
						let photoLibrary = await permision.requestAndroidPermission("android.permission.WRITE_EXTERNAL_STORAGE");//判断安卓是否给予相册写入权限
						// if(camera == -1 || photoLibrary == -1){
						if(photoLibrary == -1){
							rej('请开启相册使用权限');
						}else{
							rel();
						}
					}
				})
			},
			//跳转到手机开启权限的界面
			permissionSetting(){
				permision.gotoAppPermissionSetting();
			},
			//选取图片
			selectImg(url){
				const isIosTrue = uni.getStorageSync('iosFirstCamera');//是不是第一次开启相机
				//ios要先调用一下功能后,设置的权限列表里才会有该权限
				if(getApp().globalData.mySystemInfo.platform == 'ios' && isIosTrue !== 'false'){
					uni.setStorageSync('iosFirstCamera','false');//设为false就代表不是第一次开启相机
					this.savePoster(url)
				}else{
					this.phoneAuthority().then(e =>{
						this.savePoster(url)
					}).catch(e =>{
						console.log(e)
						this.permissionSetting()
					})
				}	
			},
			//邀请好友
			InviteFriends(e){
				let obj = {
					linkUrl:`miniId==${e.userName}&&miniPath==/${e.path}`,
					type:'jumpwxmini'
				}
				console.log('邀请好友',e)
				GoLun(obj)
				.then(res =>{
					console.log('成功')
				})
				.catch(err =>{
					uni.showToast({
						title:'邀请失败',
						icon:'none'
					})
				});
			},
			freeReceive(e){
				console.log('免费领取,更新当前数据',e)
			}
		}
	}
</script>

<style lang="scss">
  .nav{
	  width: 750rpx;
	  height: 40px;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
  }
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值