sywebview

pages.json

@@ -78,6 +78,14 @@
 				"enablePullDownRefresh" : false,
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/syWebview/syWebview",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {

pages/syWebview/syWebview.vue

+<!--
+Webview页面使用说明：
+
+1. 基本使用：
+   uni.navigateTo({
+     url: '/pages/syWebview/syWebview?url=' + encodeURIComponent('https://example.com')
+   });
+
+2. 带标题的使用：
+   uni.navigateTo({
+     url: '/pages/syWebview/syWebview?url=' + encodeURIComponent('https://example.com') + '&title=' + encodeURIComponent('页面标题')
+   });
+
+3. 分享功能：
+   - 页面会自动接收webview发送的消息
+   - 消息格式：{ title: '标题', link: '链接', imgUrl: '图片', desc: '描述' }
+   - 支持数组格式：[{ title: '标题', link: '链接', imgUrl: '图片', desc: '描述' }]
+
+4. 分享数据示例：
+   {
+     title: '分享标题',
+     link: 'https://example.com/share',
+     imgUrl: 'https://example.com/image.jpg',
+     desc: '分享描述'
+   }
+-->
+
+<template>
+	<view class="webview-container">
+
+
+		<!-- Webview内容 -->
+		<web-view :src="webviewUrl" @message="getMessage" @load="onWebviewLoad" @error="onWebviewError"
+			class="webview-content"></web-view>
+
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			statusBarHeight: 0,
+			webviewUrl: '',
+			pageTitle: '加载中...',
+			share: null, // 分享数据
+			pageOptions: {} // 页面参数
+		}
+	},
+	onLoad(options) {
+		// 获取状态栏高度
+		const systemInfo = uni.getSystemInfoSync();
+		this.statusBarHeight = systemInfo.statusBarHeight || 0;
+
+		// 保存页面参数
+		this.pageOptions = options;
+
+		// 设置webview URL
+		if (options.url) {
+			this.webviewUrl = decodeURIComponent(options.url);
+		} else if (options.redirect) {
+			this.webviewUrl = decodeURIComponent(options.redirect);
+		} else {
+			this.webviewUrl = 'https://www.example.com'; // 默认URL
+		}
+
+		// 设置页面标题
+		if (options.title) {
+			this.pageTitle = decodeURIComponent(options.title);
+		}
+
+		console.log('Webview页面加载，URL:', this.webviewUrl);
+	},
+	onShareAppMessage(options) {
+		// 分享功能
+		const { share } = this;
+		console.warn(share?.link, "share.link--------", JSON.stringify(options));
+
+		if (share && share.link) {
+			const shareurl = share.link;
+
+			return {
+				title: share.title || this.pageTitle,
+				path: shareurl,
+				imageUrl: share.imgUrl || '',
+				success: function (res) {
+					console.log(res, '分享成功');
+					uni.showToast({
+						title: '分享成功',
+						icon: 'success'
+					});
+				},
+				fail: function (res) {
+					console.log(res, '分享失败');
+					uni.showToast({
+						title: '分享失败',
+						icon: 'none'
+					});
+				},
+				complete: function (res) {
+					console.log(res, '分享完成');
+				}
+			};
+		} else {
+			// 默认分享
+			return {
+				title: this.pageTitle,
+				path: "/pages/syWebview/syWebview?url=" + encodeURIComponent(this.webviewUrl),
+				imageUrl: "",
+				success: function (res) {
+					console.log(res, '分享成功');
+					uni.showToast({
+						title: '分享成功',
+						icon: 'success'
+					});
+				},
+				fail: function (res) {
+					console.log(res, '分享失败');
+					uni.showToast({
+						title: '分享失败',
+						icon: 'none'
+					});
+				},
+				complete: function (res) {
+					console.log(res, '分享完成');
+				}
+			};
+		}
+	},
+	methods: {
+		// 接收webview消息
+		getMessage(e) {
+			const { data } = e.detail;
+			console.log(data, "webview消息数据");
+
+			if (data && Array.isArray(data) && data.length > 0) {
+				// 更新分享数据
+				this.share = data[data.length - 1];
+				console.log('更新分享数据:', this.share);
+
+				// 如果消息包含标题，更新页面标题
+				if (this.share.title) {
+					this.pageTitle = this.share.title;
+				}
+			} else if (data && typeof data === 'object') {
+				// 如果data是对象而不是数组
+				this.share = data;
+				console.log('更新分享数据:', this.share);
+
+				if (this.share.title) {
+					this.pageTitle = this.share.title;
+				}
+			}
+		},
+
+		// Webview加载完成
+		onWebviewLoad(e) {
+			console.log('Webview加载完成:', e);
+			if (this.pageTitle === '加载中...') {
+				this.pageTitle = '网页';
+			}
+		},
+
+		// Webview加载错误
+		onWebviewError(e) {
+			console.error('Webview加载错误:', e);
+			uni.showToast({
+				title: '页面加载失败',
+				icon: 'none'
+			});
+		},
+
+		// 返回上一页
+		goBack() {
+			uni.navigateBack({
+				delta: 1
+			});
+		}
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.webview-container {
+	width: 100%;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	background-color: #fff;
+}
+
+.webview-content {
+	flex: 1;
+	width: 100%;
+}
+</style>