使用uni-app把h5网页封装成安卓app

简介

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

开发需要使用到HBuilderX软件
下载地址: https://www.dcloud.io/hbuilderx.html

创建一个uni-app项目

使用web-view组件

修改 page/index/index.vue文件,把web-view 标签的src属性换成你的应用的访问路径

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

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

设置内嵌的页面高度为100%

<style>
	.webviewStyles{
     
     
		height: 100vh !important;
	}
	.content {
     
     
		height: 100vh !important;
	}
	iframe{
     
     
		height: 100% !important;
	}
</style>

运行测试

重浏览器自带的手机网页模拟器中可以看到页面上方有个一个title

重页面的源代码中可以看到uni-page-wrapper标签是内嵌的网页主题内容,title内容在uni-page-header标签里面

扫描二维码关注公众号，回复： 11926201 查看本文章

去除title元素

在App.vue文件中添加样式

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

刷新页面可以看到title内容已经消失了。

发布安卓app

• 勾选Android,取消iOS的勾选
• 证书选择测试的证书
• 点击打包
• 打包完成会在HBuilderX程序的控制台输出一个下载链接,下载即可。