使用uni-app打包H5的图文教程

更新时间：2022年11月12日 11:07:04 作者：雁南飞

uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS，Android,H5,以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台,这篇文章主要给大家介绍了关于使用uni-app打包H5的相关资料,需要的朋友可以参考下

1. 找到项目中 manifest.json --- H5 配置---运行时的基础路径， 将路径修改为相对路径（./ ）

2. 修改完后，点击工具栏 --- 发行 --- 网站pc web或手机 h5

3. 弹出弹窗，修改网站标题与网站域名（网站域名取对应项目的域名，一般为https/http开头）填完后直接点击发行。

4. 点击发行后如图

5. 发行成功后，找到 unpackage --- dist --- build --- h5 文件夹，在外部资源中打开，将 h5 文件夹打包成 zip 格式，然后给到运维，运维会帮忙发布到服务器，发布成功后，运维会给你一个属于 h5 项目的域名 https://xxxx.xxx.com/app/ 拿取H5域名去拼接页面，就能在浏览器中打开对应的页面了。（ https://xxxx.xxx.com/app/#/pages/index/index ）

设置h5导航栏

uniapp 一套代码，可以运行到多个平台，但是不同平台都有细微的差别，这里便需要进行兼容处理。

这里咱们主要介绍一下 h5导航栏问题。

正常运行在浏览器，h5项目都是有导航栏的，但是同样的代码放到微信公众号便会出现双导航的情况

配置pages.json

//全局生效
// app-plus -- titleNView --  false  将导航栏隐藏
"globalStyle": {
	"navigationBarTextStyle": "black",
	"navigationBarTitleText": "xxxx",
	"navigationBarBackgroundColor": "#FFFFFF",
	"backgroundColor": "#f8f8f8",
	"app-plus":{"titleNView":false}
}


//某个页面生效
"pages":[
	{
        "path" : "pages/xxx/list",
        "style" : {
			"navigationBarTitleText": "我的xxx"
			"app-plus": {
				"bounce": "none"
			}
		}
	}
]

感兴趣可以去app-plus文档

总结

到此这篇关于使用uni-app打包H5的文章就介绍到这了,更多相关uni-app打包H5内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

小程序富文本提取图片可放大缩小
这篇文章主要为大家详细介绍了小程序富文本提取图片可放大缩小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
js实现单行文本向上滚动效果实例代码
这篇文章主要介绍了js实现单行文本向上滚动效果,大家参考使用吧
2013-11-11
微信用户访问小程序的登录过程详解
这篇文章主要介绍了微信用户访问小程序的登录过程详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
uniapp实现单选框的示例代码
本文给大家介绍uniapp实现单选框的示例代码,采用uniapp-vue3实现的一款单选框组件,提供丝滑的动画选中效果,支持不同主题配置,适配web、H5、微信小程序,感兴趣的朋友跟随小编一起看看吧
2024-03-03
JavaScript循环遍历的24个方法,你都知道吗
这篇文章主要给大家介绍了关于JavaScript循环遍历的24个方法,文中对每种方法都给出了详细的实例代码,方便大家理解学习,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2021-09-09
mui上拉加载更多下拉刷新数据的封装过程
mui的上拉加载和下拉刷新类似，都属于pullRefresh插件。今天小编抽空给大家分享mui上拉加载更多下拉刷新数据的封装过程，需要的朋友参考下吧
2017-11-11
JS简单操作select和dropdownlist实例
这篇文章主要介绍了JS简单操作select和dropdownlist的方法,以实例形式讲述了js针对服务器控件select和dropdownlist的读写操作方法,是js与.net交互的典型应用实例,需要的朋友可以参考下
2014-11-11
javascript基于prototype实现类似OOP继承的方法
这篇文章主要介绍了javascript基于prototype实现类似OOP继承的方法,实例分析了JavaScript使用prototype实现面向对象程序设计的中类继承的相关技巧,需要的朋友可以参考下
2015-12-12
js中如何复制一个数组(浅复制、深复制)
这篇文章主要介绍了js中如何复制一个数组(浅复制、深复制)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
JavaScript实现的购物车效果可以运用在好多地方
JavaScript实现的购物车效果，当然这个效果可以运用在好多地方，比如好友的选择，人力资源模块等等，需要的朋友可以参考下
2014-05-05