如何在app.json配置顶部导航和底部导航?

2318次阅读

app.json文件在后台是看不到的,是在后台打包的时候动态生成的,是根据后台的导航、顶部导航和底部导航的设置生成的文件。

app.json需要用开发者工具打开才能看到。

1、pages页面路径列表

"pages": [

"pages/index/index",                        首页

"pages/index/list_product",              产品列表

"pages/index/index_product",          产品中心

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

"pages/index/info_product",             产品详情

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

"pages/index/info_article",               文章详情

"pages/index/page",                         单页面

"pages/index/page_8",                     自定义页面,和page类似

"pages/index/solution",                    自定义页面,解决方案

"pages/index/ask"                            自定义页面,在线留言

]

2、window全局的默认窗口表现

"window": {

"navigationBarBackgroundColor": "#ffffff",            顶部标题栏背景颜色

"navigationBarTitleText": "兴邦科技小程序",            顶部标题栏 标题文字内容

"navigationBarTextStyle": "black",                          顶部标题栏标题颜色

"backgroundTextStyle": "black",                             下拉 loading 的样式,仅支持 dark / light,默认值:dark

"enablePullDownRefresh": false

}

3、底部 tab 栏的表现,即底部导航

"tabBar": {

"color": "#ffffff",                                  底部导航默认文字颜色

"selectedColor": "#000000",               底部导航选中时文字颜色

"borderStyle": "black",                        底部导航边框颜色

"backgroundColor": "#C00;",              底部导航背景颜色

"list": [{

"pagePath": "pages/index/index",                           底部导航首页代码路径

"iconPath": "images/index_img.png",                      底部导航首页默认显示的图标

"selectedIconPath": "images/index_img.png",        底部导航首页选中时显示的图标

"text": "首页"                                                            底部导航首页显示的文字

}, {

"pagePath": "pages/index/index_product",                底部导航产品中心代码路径

"iconPath": "images/product_footer.png",                 底部导航产品中心默认显示的图标

"selectedIconPath": "images/product_footer.png",     底部导航产品中心选中时显示的图标

"text": "产品中心"                                                          底部导航产品中心显示的文字

}, {

"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特训营编辑整理。

搜外专注SEO培训和SEO周边Saas服务解决方案,10年来超过五万学员在此获得技术提升和人脉圈子。

SEO课程包含移动搜索、零基础建站、群站SEO思维、搜外6系统、SEM入门等。

192期A班报名时间7月1日-7月15日,请添加招生客服小沫微信:seowhy2021。 微信扫码添加客服人员

我们的目标是:让非技术人员轻松学会互联网技术。

  • 搜外会员SEO交流群(免费)

    微信扫码添加客服人员
  • 小程序运营交流群(免费)

    微信扫码添加客服人员
  • 搜外会员SEM竞价交流群(免费)

    微信扫码添加客服人员
  • 夫唯学员SEO交流群(VIP)

    微信扫码添加客服人员

扫码获取资源

微信扫码添加客服人员
  • SEO技术实战微信群

    微信扫码添加客服人员
  • 大站流量总监群(审核身份)

    微信扫码添加客服人员
  • Google独立站英文SEO群

    微信扫码添加客服人员
  • SEO团队KPI管理表格

    微信扫码添加客服人员
  • 工业品网站友情链接群

    微信扫码添加客服人员
  • 本地生活服务业友链群

    微信扫码添加客服人员

跟夫唯老师系统学习群站SEO
成为互联网运营推广大咖

掌握SEO技巧、建站前端、群站霸屏、SEM入门、新闻源推广……
Processed in 0.125171 Second , 40 querys.