本文于 2021-08-23 09:25 更新，部分内容具有时效性，如有失效，请留言

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
官网地址： https://uniapp.dcloud.io/

创建一个uni-app项目

找到pages/index/index.vue

将下边的代码替换到 index.vue中，然后将https://www.baidu.com 替换成你的网址

<template>
	<view class="content">
	  <web-view :webview-styles="webviewStyles" src="https://www.baidu.com"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'OKMG'
			}
		},
		onLoad() {},
		methods: {}
	}
</script>

点击运行-运行到内置浏览器或谷歌

发现上边还有个title的横条

右键打开检查

在uni-page-head下加一个 display:none; 但上边还是有个白条的空位置

找到嵌入网页的主框架，uni-page-wrapper标签

给主框架uni-page-wrapper标签一个高度100% 问题解决

所以最终的代码：

index.vue页面代码

<template>
	<view class="content">
	  <web-view :webview-styles="webviewStyles" src="https://www.baidu.com"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'OKMG'
			}
		},
		onLoad() {},
		methods: {}
	}
</script>

app.vue页面代码

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
   /*隐藏head标签*/	
	   uni-page-head{display: none;} 
	   /*body高度100%*/
	   uni-page-wrapper{height: 100% !important;}
</style>

打开manifest.json文件应用名称应用描述版本版本号

点击app图标配置，点击自动生成图标栏目后面的浏览，选择一张png格式的图标，点击自动生成所有图标并替换