轻量级前端框架助力开发者提升项目效率与性能
3196
2023-11-14
使用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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//全局生效
// 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动态修改主题色的方法详解uni-app使用swiper实现轮播图的方法uni-app禁用返回按钮/返回键的具体实现uni-app弹出层uni-popup使用及修改默认样式的方法实例uni-app多环境部署解决方案详解uni-app路由配置文件pages.json平台化拆分
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~