admin管理员组文章数量:1600685
文章目录
- 简介
- 创建一个uni-app项目
- 使用web-view组件
- 设置内嵌的页面高度为100%
- 运行测试
- 去除title元素
- 发布安卓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"></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程序的控制台输出一个下载链接,下载即可。
版权声明:本文标题:使用uni-app把h5网页封装成安卓app 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728353784a1155342.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论