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

建站交流3年前 (2021-11-13)9160

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文件

<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标签里面

去除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程序的控制台输出一个下载链接,下载即可。


标签: uniapph5打包

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。