admin管理员组

文章数量:1600453

文章目录

  • 简介
  • 创建一个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程序的控制台输出一个下载链接,下载即可。




本文标签： 成安网页Uniapp

版权声明：本文标题：使用uni-app把h5网页封装成安卓app 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1728353784a1155342.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。