使用uni-app打包H5的圖文教程
1. 找到項(xiàng)目中 manifest.json --- H5 配置---運(yùn)行時(shí)的基礎(chǔ)路徑， 將路徑修改為 相對(duì)路徑（./ ）
2. 修改完后，點(diǎn)擊工具欄 --- 發(fā)行 --- 網(wǎng)站pc web或手機(jī) h5
3. 彈出彈窗，修改網(wǎng)站標(biāo)題與網(wǎng)站域名（網(wǎng)站域名取對(duì)應(yīng)項(xiàng)目的域名，一般為https/http開(kāi)頭）填完后直接點(diǎn)擊發(fā)行。
4. 點(diǎn)擊發(fā)行后如圖
5. 發(fā)行成功后，找到 unpackage --- dist --- build --- h5 文件夾， 在外部資源中打開(kāi)，將 h5 文件夾打包成 zip 格式，然后給到運(yùn)維，運(yùn)維會(huì)幫忙發(fā)布到服務(wù)器，發(fā)布成功后，運(yùn)維會(huì)給你一個(gè)屬于 h5 項(xiàng)目的域名 https://xxxx.xxx.com/app/ 拿取H5域名去拼接頁(yè)面，就能在瀏覽器中打開(kāi)對(duì)應(yīng)的頁(yè)面了。 （ https://xxxx.xxx.com/app/#/pages/index/index ）
設(shè)置h5導(dǎo)航欄
uniapp 一套代碼，可以運(yùn)行到多個(gè)平臺(tái)，但是不同平臺(tái)都有細(xì)微的差別，這里便需要進(jìn)行兼容處理。
這里咱們主要介紹一下 h5導(dǎo)航欄問(wèn)題。
正常運(yùn)行在瀏覽器，h5項(xiàng)目都是有導(dǎo)航欄的，但是同樣的代碼放到 微信公眾號(hào) 便會(huì)出現(xiàn)雙導(dǎo)航的情況
配置pages.json
//全局生效
// app-plus -- titleNView -- false 將導(dǎo)航欄隱藏
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "xxxx",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#f8f8f8",
"app-plus":{"titleNView":false}
}
//某個(gè)頁(yè)面生效
"pages":[
{
"path" : "pages/xxx/list",
"style" : {
"navigationBarTitleText": "我的xxx"
"app-plus": {
"bounce": "none"
}
}
}
]
感興趣可以去app-plus文檔
總結(jié)
到此這篇關(guān)于使用uni-app打包H5的文章就介紹到這了,更多相關(guān)uni-app打包H5內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript數(shù)據(jù)類型轉(zhuǎn)換詳解（推薦）
眾所周知JavaScript是一門弱類型（語(yǔ)言，即變量的類型是不確定的。所以下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要給大家介紹了關(guān)于JavaScript中事件與異常捕獲的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
for-in遍歷方式的循環(huán)計(jì)數(shù)器是字符串類型，遍歷對(duì)象時(shí)為對(duì)象屬性/方法名，遍歷數(shù)組時(shí)為數(shù)組元素下標(biāo)索引，與普通的for循環(huán)不同,需要的朋友可以參考下2014-02-02
圖片輪換的效果隨處可見(jiàn)，但是我還是試著封裝了一個(gè)函數(shù)。一個(gè)頁(yè)面上可以多次調(diào)用。。。由于初學(xué)代碼寫的不是多好，其中有個(gè)文件是可以踢出到一個(gè)js文件里的，這是為了測(cè)試方便，我都給放在了一個(gè)頁(yè)面里了。2011-09-09
JavaScript oncopy事件用法實(shí)例解析
這篇文章主要介紹了JavaScript oncopy事件用法實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JS實(shí)現(xiàn)根據(jù)詳細(xì)地址獲取經(jīng)緯度功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)根據(jù)詳細(xì)地址獲取經(jīng)緯度功能,涉及javascript與百度地圖接口交互進(jìn)行地址經(jīng)緯度查詢的相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
bootstrap側(cè)邊欄圓點(diǎn)導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了bootstrap側(cè)邊欄圓點(diǎn)導(dǎo)航效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
它有一個(gè)要求就是你的前端js是作為模塊式的開(kāi)發(fā), 在前端邏輯比較復(fù)雜的話, 使用模塊式來(lái)進(jìn)行前端開(kāi)發(fā)應(yīng)該是種不錯(cuò)的選擇。這里只簡(jiǎn)單介紹一下2013-11-11
JavaScript實(shí)現(xiàn)點(diǎn)擊圖片翻轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊圖片翻轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
使用js解決由border屬性引起的div寬度問(wèn)題
由于border屬性引起的div寬度問(wèn)題，確實(shí)很讓人頭疼，在本文將為大家介紹下使用JS是如何解決的，感興趣的朋友不要錯(cuò)過(guò)2013-11-11