uniapp 打包h5

最新推荐文章于 2025-01-07 16:58:04 发布

拿回忆下酒

最新推荐文章于 2025-01-07 16:58:04 发布

阅读量1k

点赞数

文章标签： uniapp app-plus

本文链接：https://blog.csdn.net/qq_38998250/article/details/113309165

版权

uni-app允许开发者使用Vue.js编写代码，实现多平台发布，包括iOS、Android、H5及各小程序。本文介绍了如何通过HBuilderX进行H5打包，并解决在H5和微信小程序中导航栏的兼容问题。通过配置pages.json，可以全局或局部设置导航栏样式，避免在微信公众号中出现双导航。

摘要由CSDN通过智能技术生成

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS，Android，H5，以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台。

通过HBuilderX可视化界面

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

HBuilderX：官方IDE下载地址
HBuilderX是通用的前端开发工具，但为uni-app制成特别强化。

打包h5

在这里插入图片描述

打包路径

在这里插入图片描述
打包后，找到静态文件，正常部署h5项目就可以了。

设置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文档