uniapp 引入h5页面

如何在app中引入网页？通过使用webview 标签

• uniapp 官网给出的webview使用方法:
  https://uniapp.dcloud.io/component/web-view
  但是给出的基本都是在app中使用原生html页面的方法和demo，但是用vue写的H5页面就不能正常使用，下面是解决方法：

第一步：在app项目中新建webview页面（src为你自己的网页地址）

<template>
    <view>
        <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html" @message="getMessage"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                webviewStyles: {
                    progress: {
                        color: '#FF3333'
                    }
                }
            }
        },
        methods: {
		    getMessage(event) {
		      console.log(event);
		      uni.showModal({
		        content: JSON.stringify(event.detail),
		      });
		  }
	  }
    }
</script>

<style>

</style>

第二步：在你的H5页面引入 https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js 然后在你的H5页面进行使用，切记，使用里面的API一定要加上webView，例如（uni.webView.postMessage({});更多相关的API在官网里面自行查找，代码如下

<template>
	<view class="w-full" style="background-color: #fafbfa;">
		<view @click = messageApp>点击发送消息</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			
		};
	},
	computed: {},
	onShow() {},
	methods: {
		messageApp(){
			uni.webView.postMessage({
				data: {
					data: '这是向app发送的消息',
					type: 'message'
				}
			});
		}
	}
};
</script>

<style></style>