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