使用webview渲染html字符串<template>
<view></view>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getPcoductMoreInfo } from "@/request/api/guest/index";
const data = reactive({
title: "SIZE INFO",
});
// 嵌入到本地 /hybrid/html/local2.html 文件中，并初始化
const embed = plus.webview.create("/hybrid/html/local2.html", "", {
top: "100px",
bottom: "100px",
});
onLoad(async (options) => {
const ws = plus.webview.currentWebview();
ws && ws.append(embed);
embed.show();
embed.loadData(
"<html><body>Error! No Data! Please try again later!</body></html>",
);
});
</script>
<style></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// /hybrid/html/local2.html
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<style>
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
body,*{
margin: 0;
padding: 0;
}
video {
width: 300px;
height: 225px;
}
img {
max-width: 100%;
-webkit-touch-callout: none;
}
</style>
</head>
<body>
<script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>
<script type="text/javascript" src="./js/handler.js"></script>
<script></script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36