From daadcdcbc7f69b494add059881872c0b9f661a20 Mon Sep 17 00:00:00 2001
From: yinjiacheng <yinjiacheng@dcloud.io>
Date: Fri, 30 Jun 2023 16:35:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Eweb-view=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hybrid/html/local.html                        | 112 ++++++++++++++++++
 pages.json                                    |  12 ++
 .../web-view-local/web-view-local.uvue        |  94 +++++++++++++++
 pages/component/web-view/web-view.uvue        |  99 ++++++++++++++++
 pages/tabBar/component/component.uvue         |   4 +-
 5 files changed, 319 insertions(+), 2 deletions(-)
 create mode 100644 hybrid/html/local.html
 create mode 100644 pages/component/web-view-local/web-view-local.uvue
 create mode 100644 pages/component/web-view/web-view.uvue
diff --git a/hybrid/html/local.html b/hybrid/html/local.html
new file mode 100644
index 00000000..e379a6d4
--- /dev/null
+++ b/hybrid/html/local.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>本地网页</title>
+		<style type="text/css">
+			.btn {
+				display: block;
+				margin: 20px auto;
+				padding: 5px;
+				background-color: #007aff;
+				border: 0;
+				color: #ffffff;
+				height: 40px;
+				width: 200px;
+			}
+
+			.btn-red {
+				background-color: #dd524d;
+			}
+
+			.btn-yellow {
+				background-color: #f0ad4e;
+			}
+
+			.desc {
+				padding: 10px;
+				color: #999999;
+			}
+		</style>
+	</head>
+	<body>
+		<p class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</p>
+		<div class="btn-list">
+			<button class="btn" type="button" data-action="navigateTo">navigateTo</button>
+			<button class="btn" type="button" data-action="redirectTo">redirectTo</button>
+			<button class="btn" type="button" data-action="navigateBack">navigateBack</button>
+			<button class="btn" type="button" data-action="reLaunch">reLaunch</button>
+			<button class="btn" type="button" data-action="switchTab">switchTab</button>
+		</div>
+		<p class="desc">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</p>
+		<div class="btn-list">
+			<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
+		</div>
+		<!-- uni 的 SDK -->
+		<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
+		<script type="text/javascript">
+			// document.addEventListener('UniAppJSBridgeReady', function() {
+				document.querySelector('.btn-list').addEventListener('click', function(evt) {
+					var target = evt.target;
+					if (target.tagName === 'BUTTON') {
+						var action = target.getAttribute('data-action');
+						switch (action) {
+							case 'switchTab':
+								// uni.switchTab({
+								// 	url: '/pages/tabBar/API/API'
+								// });
+								window.__uniapp_x_.postMessage(JSON.stringify({
+									data: {
+										action: 'switchTab',
+										url: '/pages/tabBar/API/API'
+									}
+								}));
+								break;
+							case 'reLaunch':
+								// uni.reLaunch({
+								// 	url: '/pages/tabBar/API/API'
+								// });
+								window.__uniapp_x_.postMessage(JSON.stringify({
+									data: {
+										action: 'reLaunch',
+										url: '/pages/tabBar/API/API'
+									}
+								}));
+								break;
+							case 'navigateBack':
+								// uni.navigateBack({
+								// 	delta: 1
+								// });
+								window.__uniapp_x_.postMessage(JSON.stringify({
+									data: {
+										action: 'navigateBack',
+										delta: 1
+									}
+								}));
+								break;
+							default:
+								// uni[action]({
+								// 	url: '/pages/component/button/button'
+								// });
+								window.__uniapp_x_.postMessage(JSON.stringify({
+									data: {
+										action: action,
+										url: '/pages/component/button/button'
+									}
+								}));
+								break;
+						}
+					}
+				})
+			// });
+			document.querySelector("#postMessage").addEventListener('click', function() {
+				window.__uniapp_x_.postMessage(JSON.stringify({
+					data: {
+						action: 'message'
+					}
+				}))
+			})
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 82728a34..09e9b582 100644
--- a/pages.json
+++ b/pages.json
@@ -78,6 +78,18 @@
                 "navigationBarTitleText": "image"
             }
         },
+		{
+			"path": "pages/component/web-view/web-view",
+			"style": {
+				"navigationBarTitleText": "web-view"
+			}
+		},
+		{
+			"path": "pages/component/web-view-local/web-view-local",
+			"style": {
+				"navigationBarTitleText": "web-view-local"
+			}
+		},
         {
             "path": "pages/tabBar/API/API",
             "style": {
diff --git a/pages/component/web-view-local/web-view-local.uvue b/pages/component/web-view-local/web-view-local.uvue
new file mode 100644
index 00000000..0309df1f
--- /dev/null
+++ b/pages/component/web-view-local/web-view-local.uvue
@@ -0,0 +1,94 @@
+<template>
+	<view class="uni-flex-item">
+		<web-view ref="web-view" class="uni-flex-item" src="/hybrid/html/local.html" @onPostMessage="onPostMessage"
+			@error="error" @loading="loading" @loaded="loaded">
+		</web-view>
+		<view class="uni-btn-v">
+			<button type="primary" @click="back">后退</button>
+		</view>
+		<view class="uni-btn-v">
+			<button type="primary" @click="forward">前进</button>
+		</view>
+		<view class="uni-btn-v">
+			<button type="primary" @click="reload">重新加载</button>
+		</view>
+		<view class="uni-btn-v">
+			<button type="primary" @click="stop">停止加载</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import JSONObject from 'com.alibaba.fastjson.JSONObject';
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			back() {
+				(this.$refs['web-view'] as IWebViewNode).back();
+			},
+			forward() {
+				(this.$refs['web-view'] as IWebViewNode).forward();
+			},
+			reload() {
+				(this.$refs['web-view'] as IWebViewNode).reload();
+			},
+			stop() {
+				(this.$refs['web-view'] as IWebViewNode).stop();
+			},
+			onPostMessage(event: WebViewPostMessageEvent) {
+				console.log(JSON.stringify(event.detail));
+				const data = event.detail.data as JSONObject;
+				switch (data['action']) {
+					case 'navigateTo':
+						uni.navigateTo({
+							url: data['url'] as string
+						});
+						break;
+					case 'redirectTo':
+						uni.redirectTo({
+							url: data['url'] as string
+						});
+						break;
+					case 'switchTab':
+						uni.switchTab({
+							url: data['url'] as string
+						});
+						break;
+					case 'reLaunch':
+						uni.reLaunch({
+							url: data['url'] as string
+						});
+						break;
+					case 'navigateBack':
+						uni.navigateBack({
+							delta: data['delta'] as number
+						});
+						break;
+					default:
+						uni.showModal({
+							content: JSON.stringify(event.detail),
+							showCancel: false
+						});
+						break;
+				}
+			},
+			error(event: WebViewErrorEvent) {
+				console.log(JSON.stringify(event.detail));
+			},
+			loading(event: WebViewLoadingEvent) {
+				console.log(JSON.stringify(event.type));
+			},
+			loaded(event: WebViewLoadedEvent) {
+				console.log(JSON.stringify(event.type));
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/component/web-view/web-view.uvue b/pages/component/web-view/web-view.uvue
new file mode 100644
index 00000000..c041fd94
--- /dev/null
+++ b/pages/component/web-view/web-view.uvue
@@ -0,0 +1,99 @@
+<template>
+	<view class="uni-flex-item">
+		<web-view ref="web-view" class="uni-flex-item" :src="src" :webview-styles="webview_styles"
+			@onPostMessage="onPostMessage" @error="error" @loading="loading" @loaded="loaded">
+		</web-view>
+		<view class="uni-btn-v">
+			<button type="primary" @click="back">后退</button>
+		</view>
+		<view class="uni-btn-v">
+			<button type="primary" @click="forward">前进</button>
+		</view>
+		<view class="uni-btn-v">
+			<button type="primary" @click="reload">重新加载</button>
+		</view>
+		<view class="uni-btn-v">
+			<button type="primary" @click="stop">停止加载</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import JSONObject from 'com.alibaba.fastjson.JSONObject';
+	export default {
+		data() {
+			return {
+				src: 'https://uniapp.dcloud.io/static/web-view.html',
+				webview_styles: {
+					progress: {
+						color: '#FF3333'
+					}
+				} as UTSJSONObject
+			}
+		},
+		methods: {
+			back() {
+				(this.$refs['web-view'] as IWebViewNode).back();
+			},
+			forward() {
+				(this.$refs['web-view'] as IWebViewNode).forward();
+			},
+			reload() {
+				(this.$refs['web-view'] as IWebViewNode).reload();
+			},
+			stop() {
+				(this.$refs['web-view'] as IWebViewNode).stop();
+			},
+			onPostMessage(event: WebViewPostMessageEvent) {
+				console.log(JSON.stringify(event.detail));
+				const data = event.detail.data as JSONObject;
+				switch (data['action']) {
+					case 'navigateTo':
+						uni.navigateTo({
+							url: data['url'] as string
+						});
+						break;
+					case 'redirectTo':
+						uni.redirectTo({
+							url: data['url'] as string
+						});
+						break;
+					case 'switchTab':
+						uni.switchTab({
+							url: data['url'] as string
+						});
+						break;
+					case 'reLaunch':
+						uni.reLaunch({
+							url: data['url'] as string
+						});
+						break;
+					case 'navigateBack':
+						uni.navigateBack({
+							delta: data['delta'] as number
+						});
+						break;
+					default:
+						uni.showModal({
+							content: JSON.stringify(event.detail),
+							showCancel: false
+						});
+						break;
+				}
+			},
+			error(event: WebViewErrorEvent) {
+				console.log(JSON.stringify(event.detail));
+			},
+			loading(event: WebViewLoadingEvent) {
+				console.log(JSON.stringify(event.type));
+			},
+			loaded(event: WebViewLoadedEvent) {
+				console.log(JSON.stringify(event.type));
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/tabBar/component/component.uvue b/pages/tabBar/component/component.uvue
index b6589d59..e0a90b7e 100644
--- a/pages/tabBar/component/component.uvue
+++ b/pages/tabBar/component/component.uvue
@@ -190,12 +190,12 @@
                     pages: [
                         {
                             name: '网络网页',
-                            enable: false,
+                            enable: true,
                             url: '/pages/component/web-view/web-view'
                         },
                         {
                             name: '本地网页',
-                            enable: false,
+                            enable: true,
                             url: '/pages/component/web-view-local/web-view-local'
                         }
                     ] as Page[]
-- 
GitLab

