如何在app.json配置頂部導(dǎo)航和底部導(dǎo)航?

2312次閱讀

app.json文件在后臺是看不到的,是在后臺打包的時候動態(tài)生成的,是根據(jù)后臺的導(dǎo)航、頂部導(dǎo)航和底部導(dǎo)航的設(shè)置生成的文件。

app.json需要用開發(fā)者工具打開才能看到。

1、pages頁面路徑列表

"pages": [

"pages/index/index",? ? ? ? ? ? ? ? ? ? ? ? 首頁

"pages/index/list_product",? ? ? ? ? ? ? 產(chǎn)品列表

"pages/index/index_product",? ? ? ? ? 產(chǎn)品中心

"pages/index/index_article",? ? ? ? ? ? ?文章中心

"pages/index/info_product",? ? ? ? ? ? ?產(chǎn)品詳情

"pages/index/list_article",? ? ? ? ? ? ? ? ?文章列表

"pages/index/info_article",? ? ? ? ? ? ? ?文章詳情

"pages/index/page",? ? ? ? ? ? ? ? ? ? ? ? ?單頁面

"pages/index/page_8",? ? ? ? ? ? ? ? ? ? ?自定義頁面,和page類似

"pages/index/solution",? ? ? ? ? ? ? ? ? ? 自定義頁面,解決方案

"pages/index/ask"? ? ? ? ? ? ? ? ? ? ? ? ? ? 自定義頁面,在線留言

]

2、window全局的默認(rèn)窗口表現(xiàn)

"window": {

"navigationBarBackgroundColor": "#ffffff",? ? ? ? ? ??頂部標(biāo)題欄背景顏色

"navigationBarTitleText": "興邦科技小程序",? ? ? ? ? ??頂部標(biāo)題欄 標(biāo)題文字內(nèi)容

"navigationBarTextStyle": "black",? ? ? ? ? ? ? ? ? ? ? ? ??頂部標(biāo)題欄標(biāo)題顏色

"backgroundTextStyle": "black",? ? ? ? ? ? ? ? ? ? ? ? ? ? ?下拉 loading 的樣式,僅支持 dark / light,默認(rèn)值:dark

"enablePullDownRefresh": false

}

3、底部 tab 欄的表現(xiàn),即底部導(dǎo)航

"tabBar": {

"color": "#ffffff",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 底部導(dǎo)航默認(rèn)文字顏色

"selectedColor": "#000000",? ? ? ? ? ? ? ?底部導(dǎo)航選中時文字顏色

"borderStyle": "black",? ? ? ? ? ? ? ? ? ? ? ??底部導(dǎo)航邊框顏色

"backgroundColor": "#C00;",? ? ? ? ? ? ??底部導(dǎo)航背景顏色

"list": [{

"pagePath": "pages/index/index",? ? ? ? ? ? ? ? ? ? ? ? ? ?底部導(dǎo)航首頁代碼路徑

"iconPath": "images/index_img.png",? ? ? ? ? ? ? ? ? ? ? 底部導(dǎo)航首頁默認(rèn)顯示的圖標(biāo)

"selectedIconPath": "images/index_img.png",? ? ? ??底部導(dǎo)航首頁選中時顯示的圖標(biāo)

"text": "首頁"? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 底部導(dǎo)航首頁顯示的文字

}, {

"pagePath": "pages/index/index_product",? ? ? ? ? ? ? ??底部導(dǎo)航產(chǎn)品中心代碼路徑

"iconPath": "images/product_footer.png",? ? ? ? ? ? ? ? ?底部導(dǎo)航產(chǎn)品中心默認(rèn)顯示的圖標(biāo)

"selectedIconPath": "images/product_footer.png",? ? ?底部導(dǎo)航產(chǎn)品中心選中時顯示的圖標(biāo)

"text": "產(chǎn)品中心"? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??底部導(dǎo)航產(chǎn)品中心顯示的文字

}, {

"pagePath": "pages/index/index_article",

"iconPath": "images/news_footer.png",

"selectedIconPath": "images/news_footer.png",

"text": "新聞中心"

},{

"pagePath": "pages/index/solution",

"iconPath": "images/index_service.png",

"selectedIconPath": "images/index_service.png",

"text": "解決方案"

}, {

"pagePath": "pages/index/ask",

"iconPath": "images/message_footer.png",

"selectedIconPath": "images/message_footer.png",

"text": "在線留言"

}]

}

本文由夫唯SEO特訓(xùn)營編輯整理。

搜外專注SEO培訓(xùn)和SEO周邊Saas服務(wù)解決方案,10年來超過五萬學(xué)員在此獲得技術(shù)提升和人脈圈子。

SEO課程包含移動搜索、零基礎(chǔ)建站、群站SEO思維、搜外6系統(tǒng)、SEM入門等。

192期A班報(bào)名時間7月1日-7月15日,請?zhí)砑诱猩头∧⑿牛簊eowhy2021。 微信掃碼添加客服人員

我們的目標(biāo)是:讓非技術(shù)人員輕松學(xué)會互聯(lián)網(wǎng)技術(shù)。

  • 搜外會員SEO交流群(免費(fèi))

    微信掃碼添加客服人員
  • 小程序運(yùn)營交流群(免費(fèi))

    微信掃碼添加客服人員
  • 搜外會員SEM競價(jià)交流群(免費(fèi))

    微信掃碼添加客服人員
  • 夫唯學(xué)員SEO交流群(VIP)

    微信掃碼添加客服人員

掃碼獲取資源

微信掃碼添加客服人員
  • SEO技術(shù)實(shí)戰(zhàn)微信群

    微信掃碼添加客服人員
  • 大站流量總監(jiān)群(審核身份)

    微信掃碼添加客服人員
  • Google獨(dú)立站英文SEO群

    微信掃碼添加客服人員
  • SEO團(tuán)隊(duì)KPI管理表格

    微信掃碼添加客服人員
  • 工業(yè)品網(wǎng)站友情鏈接群

    微信掃碼添加客服人員
  • 本地生活服務(wù)業(yè)友鏈群

    微信掃碼添加客服人員

跟夫唯老師系統(tǒng)學(xué)習(xí)群站SEO
成為互聯(lián)網(wǎng)運(yùn)營推廣大咖

掌握SEO技巧、建站前端、群站霸屏、SEM入門、新聞源推廣……
Processed in 0.145888 Second , 40 querys.