uniAPP的webview封装使用

最新推荐文章于 2024-08-05 10:38:15 发布

曾经_Once

最新推荐文章于 2024-08-05 10:38:15 发布

阅读量1.5k

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/JavaNumans/article/details/118902637

版权

本文介绍了如何在uniAPP中封装webview组件，并分别展示了在微信小程序和App上的使用方法。在微信小程序中，通过vue模板和uni.setNavigationBarTitle设置页面标题；在App中，利用App-PLUS条件编译设置webview样式和标题。同时提供了一个名为goToWebView的函数，用于跳转到webview页面并传递参数。

摘要由CSDN通过智能技术生成

uniAPP的webview封装使用

一般分为微信小程序的和App的,微信小程序、H5使用.vue文件，运行时到App上会自动采用.nvue，
不采用.nvue文件时，在App中html页面的标题会自动填充到系统标题栏
在这里插入图片描述

微信小程序

<template>
	<view>
		<view><web-view :src="path"></web-view></view>
	</view>
</template>

<script>
import { isNotEmpty } from '../../utils/util.js';
export default {
	data() {
		return {
			path: '',
			title: ''
		};
	},
	onLoad: function(option) {
		this.path = decodeURIComponent(option.path);//注意转码
		this.title = option.title;
	},
	onReady() {
		if (isNotEmpty(this.title)) {//isNotEmpty非空判断
			console.log(this.title);
			this.setTitle(this.title);
		}
	},
	methods: {
		setTitle(title) {//设置标题
			uni.setNavigationBarTitle({
				title: title
			});
		}
	}
};
</script>

<style></style>

<template>
	<view class="content"><web-view :src="path" class="web"></web-view></view>
</template>

<script>
import { isNotEmpty } from '../../utils/util.js';
export default {
	data() {
		return {
			path: '',
			title: ''
		};
	},
	onLoad: function(option) {
		this.path = decodeURIComponent(option.path);//注意转码
		this.title = option.title;
	},
	onReady() {
		if (isNotEmpty(this.title)) {
			this.setTitle(this.title);
		}
		// #ifdef APP-PLUS
		var currentWebview = this.$mp.page.$getAppWebview(); //获取当前页面的webview对象
		setTimeout(function() {
			wv = currentWebview.children()[0];
			wv.setStyle({ scalable: true });
		}, 1000); //如果是页面初始化调用时，需要延时一下
		// #endif
	},
	methods: {
		setTitle(title) {
			uni.setNavigationBarTitle({
				title: title
			});
		}
	}
};
</script>

<style>
.content {
	flex: 1;
	flex-direction: column;
}
.web {
	width: 750rpx;
	flex: 1;
}
</style>

使用

goToWebView(path, title) {
			uni.navigateTo({//注意转码
				url: '../../webview/webview?path=' + encodeURIComponent(path) + '&title=' + title
			});
		},