如何使用uni-app打包H5

本文小編為大家詳細介紹“如何使用uni-app打包H5”，內容詳細，步驟清晰，細節處理妥當，希望這篇“如何使用uni-app打包H5”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

1. 找到項目中 manifest.json --- H5 配置---運行時的基礎路徑， 將路徑修改為 相對路徑（./ ）

2. 修改完后，點擊工具欄 --- 發行 --- 網站pc web或手機 h6

3. 彈出彈窗，修改網站標題與網站域名（網站域名取對應項目的域名，一般為https/http開頭）填完后直接點擊發行。

4. 點擊發行后如圖

5. 發行成功后，找到 unpackage --- dist --- build --- h6 文件夾， 在外部資源中打開，將 h6 文件夾打包成 zip 格式，然后給到運維，運維會幫忙發布到服務器，發布成功后，運維會給你一個屬于 h6 項目的域名 https://xxxx.xxx.com/app/  拿取H5域名去拼接頁面，就能在瀏覽器中打開對應的頁面了。 （ https://xxxx.xxx.com/app/#/pages/index/index ）

設置h6導航欄

uniapp 一套代碼，可以運行到多個平臺，但是不同平臺都有細微的差別，這里便需要進行兼容處理。

這里咱們主要介紹一下 h6導航欄問題。

正常運行在瀏覽器，h6項目都是有導航欄的，但是同樣的代碼放到 微信公眾號 便會出現雙導航的情況

配置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"
			}
		}
	}
]

讀到這里，這篇“如何使用uni-app打包H5”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。