脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uni-app打包H5

使用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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript数据类型转换详解（推荐）

    JavaScript数据类型转换详解（推荐）

    众所周知JavaScript是一门弱类型（语言，即变量的类型是不确定的。所以下面这篇文章主要给大家介绍了关于JavaScript数据类型转换的相关资料,需要的朋友可以参考下
    2021-05-05
  • JavaScript中的事件与异常捕获详析

    JavaScript中的事件与异常捕获详析

    这篇文章主要给大家介绍了关于JavaScript中事件与异常捕获的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-02-02
  • JavaScript中for-in遍历方式示例介绍

    JavaScript中for-in遍历方式示例介绍

    for-in遍历方式的循环计数器是字符串类型，遍历对象时为对象属性/方法名，遍历数组时为数组元素下标索引，与普通的for循环不同,需要的朋友可以参考下
    2014-02-02
  • 封装了一个js图片轮换效果的函数

    封装了一个js图片轮换效果的函数

    图片轮换的效果随处可见，但是我还是试着封装了一个函数。一个页面上可以多次调用。。。由于初学代码写的不是多好，其中有个文件是可以踢出到一个js文件里的，这是为了测试方便，我都给放在了一个页面里了。
    2011-09-09
  • JavaScript oncopy事件用法实例解析

    JavaScript oncopy事件用法实例解析

    这篇文章主要介绍了JavaScript oncopy事件用法实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JS实现根据详细地址获取经纬度功能示例

    JS实现根据详细地址获取经纬度功能示例

    这篇文章主要介绍了JS实现根据详细地址获取经纬度功能,涉及javascript与百度地图接口交互进行地址经纬度查询的相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • bootstrap侧边栏圆点导航

    bootstrap侧边栏圆点导航

    这篇文章主要为大家详细介绍了bootstrap侧边栏圆点导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 浅析Javascript使用include/require

    浅析Javascript使用include/require

    它有一个要求就是你的前端js是作为模块式的开发, 在前端逻辑比较复杂的话, 使用模块式来进行前端开发应该是种不错的选择。这里只简单介绍一下
    2013-11-11
  • JavaScript实现点击图片翻转效果

    JavaScript实现点击图片翻转效果

    这篇文章主要为大家详细介绍了JavaScript实现点击图片翻转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 使用js解决由border属性引起的div宽度问题

    使用js解决由border属性引起的div宽度问题

    由于border属性引起的div宽度问题，确实很让人头疼，在本文将为大家介绍下使用JS是如何解决的，感兴趣的朋友不要错过
    2013-11-11

最新评论