快速使用uni-app把网页封装成双端app,安卓,苹果

快速使用uni-app把网页封装成双端app,安卓,苹果

文章目录[隐藏]

简介

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

 

创建一个uni-app项目

找到pages/index/index.vue

将下边的代码 替换到 index.vue中,然后将https://www.baidu.com 替换成你的网址

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

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

点击 运行-运行到内置浏览器  或谷歌

发现上边还有个title的横条

右键打开检查

在uni-page-head下 加一个 display:none;  但上边还是有个白条的空位置

找到嵌入网页的主框架,uni-page-wrapper标签

给主框架uni-page-wrapper标签 一个高度100%  问题解决

所以最终的代码:

index.vue页面代码

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

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

app.vue页面代码

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

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

打开manifest.json文件  应用名称  应用描述  版本 版本号

点击app图标配置,点击自动生成图标栏目后面的浏览,选择一张png格式的图标,点击自动生成所有图标并替换

这样就可以啦,剩下的选项 按需选择即可。

最后一步 点击原生app 云打包

打包完成之后 下边的控制台 会返回一个下载地址,点击下载  保存app包就好啦!  这里小编用的是老版本的HBuilder工具,就不做打包示范啦!

 

 

分享到 :

发表评论

登录... 后才能评论