uniapp使用webview打开自定义的动态网页

cv师傅

已于 2022-08-17 09:06:08 修改

阅读量2.4k

点赞数

文章标签： uni-app javascript 前端

于 2022-08-16 17:37:04 首次发布

本文链接：https://blog.csdn.net/weixin_44900014/article/details/126370568

版权

项目场景：

在uniapp的安卓端，跳转银联支付网页操作，每个用户参数都不一致，需要请求后端实时生成

解决方案：

前端请求网页html标签，将网页在本地生成html文件并用webview打开本地网页

提示：结尾的script标签前需要加 / 否则会打不开

<!-- #ifdef APP-PLUS -->
<template>
	<view>
		<web-view src="_doc/static/html.html"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: `<html><head><meta http-equiv='Content-Type'content='text/html;charset=utf-8'/></head>
				<body><form method='post' accept-charset='UTF-8'>
				<input/>
				</body><script type='text/javascript'><\/script></html>
				`
			}
		},
		onLoad() {
			this.saveServerDatatoFile('html',this.data)
		},
		methods: {
			saveServerDatatoFile(filename, jsonData) { //jsonData要求是String格式
				plus.io.requestFileSystem(plus.io.PRIVATE_DOC,
					function(fs) {
						//fs.root 是根目录操作对象
						fs.root.getDirectory("uniapp_data", {//创建一个文件夹名为uniapp_data
							create: true,
							exclusive: false
						}, function(dir) {
							//console.log("Directory Entry Name: " + dir.name);
							dir.getFile(filename + ".html", { //在uniapp_data文件夹中创建一个json文件
									create: true
								},
								function(fileEntry) {
									fileEntry.file(function(file) {
										//写入文件
										fileEntry.createWriter(
											function(writer) {
												// writer.onwritestart = function(e) {
												// 	console.log("写入数据开始");
												// }
												writer.onwrite = function(e) {
													console.log("写入数据成功");
												}
												//定位至文件结尾，即每次都是追加内容
												//writer.seek(writer.length);
												//定位至开头，即每次都是重写文件。（默认）
												//writer.seek(0);
												writer.write(jsonData);
											},
											function(error) {
												console.log("创建Writer失败" + error.message);
											});
			 
										// var fileReader = new plus.io.FileReader();
										// console.log("getFile:" + JSON.stringify(file));
										// fileReader.readAsText(file, 'utf-8');
										// fileReader.onloadend = function(evt) {
										// 	console.log("11" + JSON.stringify(evt));
										// 	console.log("evt.target" + JSON.stringify(evt.target));
										// 	console.log("evt.target.result" + JSON.stringify(evt.target.result));
										// }
									});
								},
								function(err) {
									console.log("访问File失败" + err.message);
								})
						}, function() {
							console.log("创建uniapp_data目录失败" + err.message);
						});
					},
					function(error) {
						console.log("访问_DOC目录失败" + error.message);
					});
			}
		}
	}
</script>

<style>

</style>
<!-- #endif -->