Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6006
Star 91
Fork 164
H
hello uni-app x
切换分支/标签
查找文件 普通视图历史永久链接Permalink
local.html 3.1 KB
Newer Older
DCloud-yinjiacheng's avatar
新增web-view示例  
DCloud-yinjiacheng 已提交
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 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>