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

赞 (0)

相关推荐

  • Vue uni-app以H5模式引入Jquery配置教程

    目录 Vue配置Jquery uni-app配置Jquery 总结 Vue配置Jquery 安装Jquery npm install jquery --save or yarn add jquery main.js中引入jquery,供全局使用 import Vue from 'vue' import jquery from "jquery"; Vue.prototype.$ = jquery; 在页面中使用,运行如下代码,在控制台就可以查看引入结果 <template>

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

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

    1. 找到项目中 manifest.json --- H5 配置---运行时的基础路径, 将路径修改为 相对路径(./ ) 2. 修改完后,点击工具栏 --- 发行 --- 网站pc web或手机 h5 3. 弹出弹窗,修改网站标题与网站域名(网站域名取对应项目的域名,一般为https/http开头)填完后直接点击发行. 4. 点击发行后如图 5. 发行成功后,找到 unpackage --- dist --- build --- h5 文件夹, 在外部资源中打开,将 h5 文件夹打包成 zip

  • VS2017 安装打包插件的图文教程

    VS2017 安装打包插件的图文教程

    安装 打开VS2017:工具 --> 扩展和更新 --> 联机,搜索Microsoft Visual Studio 2017 Installer Projects,如下图: 在搜索中输入:Microsoft Visual Studio 2017 Installer Projects,搜索结果如下: 下载Microsoft Visual Studio 2017 Installer Projects,如下图: 按照提示,关闭所有VS窗口,自动安装,如下图: 选择[修改] 安装完成 看看安装日志,了

  • vue.js项目打包上线的图文教程

    vue.js项目打包上线的图文教程

    最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的.这里我简单的列出这个过程: 首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里

  • VS2019简单快速的打包可安装项目(图文教程)

    一.准备工作 (一)教程以"Hello World"为例: (二)安装VS自带打包插件 下面是一系列的安装需要走的步骤,就不详细介绍了. 二.开始打包 (一)右键解决方案->添加->新建项目 (二)新建一个Setup Project (三)进入了这个界面 如果不小心关闭了,右击新建的打包工程,浏览文件系统就可以看见上面的图了. (四)添加打包文件 首先获取项目路径. 右键Application Foluder->Add->文件. 输入刚才的地址,选取全部. (五

  • Asp.net与SQLserver一起打包部署安装图文教程

    Asp.net与SQLserver一起打包部署安装图文教程

    一.准备必要的文件1. SQL脚本文件,生成以后安装过程中需要的表和存储过程等等:生成之后,就暂时把它命名为db.sql(注意大小写)2.LisenceFile.rtf的安装文件,因为我的系统是个人的,而且free的,所以就没有做.这个以后也是要用到的.二.在自己现有的项目里面创建部署项目:1. 在"文件"菜单上指向"添加项目",然后选择"新建项目".(图1-2)2. 在"添加新项目"对话框中,选择"项目类型&quo

  • HBuilder打包App方法(图文教程)

    HBuilder打包App方法(图文教程)

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP. HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包. 1,下载HBuilder,注册并登陆.首先打开"文件"-"新建"-"移动APP",输入"应用名称","位置

  • Python3 安装PyQt5及exe打包图文教程

    环境: Python 3.6.4 + Pycharm Professional 2017.3.3 + PyQt5 + PyQt5-tools ① Python 3 安装 Python 3.x 安装时,默认勾选ADD Python 3.6 to PATH和ADD Python to environment variables的情况下,系统会向path中增加以下两个环境变量. D:\Program Files\Python36\Scripts\; D:\Program Files\Python36\

  • Android Studio签名打包的两种方式(图文教程)

    签名打包的两种方式: 注:给我们自己开发的app签名,就代表着我自己的版权,以后要进行升级,也必须要使用相同的签名才行.签名就代表着自己的身份(即keystore),多个app可以使用同一个签名. 如果不知道签名是啥意思,请自行百度哦.在eclipse中签名的方法是:选中工程,邮件选择"export-android-export android application", 1.方式1:通过Android Studio进行签名: 选中app这个module,选择菜单栏"Buil

  • Android eclipse使用gradle打包的图文教程

    1 . gradle 安装 1.1.下载安装包: https://gradle.org/releases 官方网站提供了最新以及历史版本,根据需求下载对应的版本.建议用最新的 1.2.解压到常用目录,此例放入D:\Program Files 1.3.配置环境变量,使得命令能够执行 1.4.检查安装配置是否正确.window系统下使用"gradle -v"命令查看,mac系统下使用"./gradlew -v"命令查看 2 2 . Eclipse 配置 2.1 .安装插

  • Vue.js项目模板搭建图文教程

    Vue.js项目模板搭建图文教程

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

随机推荐