uniAPP的webview封装使用

uniAPP的webview封装使用

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

1. 微信小程序

<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>

2. App

<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
			});
		},