胜杰工作室
记录年轻与智慧的

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

本文于 2021-08-23 09:25 更新,部分内容具有时效性,如有失效,请留言

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

 

创建一个uni-app项目

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

找到pages/index/index.vue

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

将下边的代码 替换到 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-app把网页封装成双端app,安卓,苹果

右键打开检查

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

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

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

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

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

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

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

所以最终的代码:

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格式的图标,点击自动生成所有图标并替换

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

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

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

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

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

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

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

 

 

内容查看此内容仅限注册用户查看,请先
如有疑问联系QQ:153960048 本站仅提供学习参考源码,不支持商用,商用请购买官方正版 本站源码均来自网友提供 理论上是不提供技术服务, 如果我有时间会帮你解决一些问题。
赞(0) 打赏
转载请注明来源:胜杰博客 » 快速使用uni-app把网页封装成双端app,安卓,苹果
分享到: 更多 (0)

评论 1

评论前必须登录!

 

  1. #1

    可以

    91营销宝12分钟前

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏