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工具,就不做打包示范啦!
可以