uniapp 外接 html

<template>
	<view class="page">
		<web-view class="page" ref="shrimp" :src="url" @message="onMessage" @onPostMessage="onPostMessage"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// url: "http://10.210.212.75:8080/",
				url: "https://ifarm-shrimp-dev.cpcti.com",
				username: '',
				id: 0,
				height: 20
			}
		},
		onLoad() {
			console.log('load');
			try {
				const value = uni.getStorageSync('token')
				const name = uni.getStorageSync('userName')
				const id = uni.getStorageSync('userCode')
				this.username = name
				this.id = id
				if (value) this.token = value
				const barHeight = uni.getSystemInfoSync().statusBarHeight;
				this.height = barHeight
			} catch (e) {}
		},
		mounted() {
			this.url = this.url + "?platform=shrimp&token=" + this.token + "&username=" + this.username + "&uid=" + this
				.id + '&safeArea=' + this.height;
			console.log(this.url);
		},
		methods: {
			// nvue使用
			onPostMessage(res) {
				// 接收信息
				console.log('postres---------', JSON.stringify(res));

				// const  s = "window.JsBridge.shrimp='122112'"
				// this.$refs.shrimp.evalJs(s)
				const {
					data
				} = res.detail;
				const params = data[0];
				console.log(params);
				if (params && typeof params === 'object') {
					const {
						type,
						callbackId
					} = params;
					this.swicthFu(type)
					// if (type === "EXITWEBPAGE") {
					// 	uni.navigateBack({
					// 		delta: 1
					// 	})
					// }
					const res = {
						callbackId,
						data: {
							a: 11
						}
					}
					// 返回
					const str = `JsBridge.native_call_h5(${JSON.stringify(res)})`
					console.log('sstt------', str)
					this.$refs.shrimp.evalJs(str)
				}
			},
			// 判断并响应
			swicthFu(type) {
				switch (type) {
					case "EXITWEBPAGE":
						uni.navigateBack({
							delta: 1
						});
						break;
					case 1:
						break;
					case 2:
						break;
					case 3:
						break;
					case 4:
						break;
					default:
						break;
				}
			},
			// vue使用
			onMessage(res) {
				console.log('res---------', JSON.stringify(res));
				// var currentWebview = this.$scope.$getAppWebview()
				// const wv = currentWebview.children();
				// console.log('wv-----',JSON.stringify(wv))
				const {
					data
				} = res.detail;
				const params = data[0];
				if (params && typeof params === 'object') {
					console.log('pppppp==-==', params)
					const {
						type,
						callbackId
					} = params;
					const res = {
						callbackId,
						data: {
							a: 11
						}
					}
					const str = `window.JsBridge.native_call_h5(${JSON.stringify(res)})`
					console.log('sstt------', str)

					const evalJs = this.$refs.webview.evalJs;
					const data = {};
					const owm = this.$refs.webview.ownerDocument;
					console.log('own-----', owm)
					Object.keys(this.$refs.webview).forEach((key) => {
						const val = this.$refs.webview[key];
						if (typeof val === 'string' || typeof val === 'number') {
							data[key] = val
						} else {
							data[key] = ''
						}

					})
					console.log('web------', JSON.stringify(data))
					evalJs(str)
				}
			}
		}

	}
</script>

<style>
	.page {
		flex: 1;
		flex-direction: column;
		background-color: #fff;
	}
</style>