从零开始自制微信小程序13--初识微信小程序9--配置tabBar-对若干一级页面的入口链接--[ app.json 文件内容错误] app.json: [“tabBar“][1][“pagePath

很多时候，对于about页和weekly页，这样的一级页面，我们希望实现的是在他们之间的快速的任意的切换

配置（顶部/底部）标签栏

 

配置tabBar底部标签栏（第一个weekly，第二个about）

-配置tabBar-对若干一级页面的入口链接

-全局配置app.json

-新问题引入：原来about页的<navigator>元素点击无效

 

icons图

 

在网上找icons图，网不太好。中断，下次更新博客。

下载好后，导入images文件夹下icons下

app.json

{
  "pages": [
    "pages/about/about",
    "pages/weekly/weekly"
  ],
  "tabBar": {
    "list": [
      {
        "text": "每周推荐",
        "pagePath": "pages/weekly/weekly",
        "iconPath": "images/icons/001.png",
        "selectedIconPath": "images/icons/002.png"
      },
      {
        "text": "关于",
        "pagePath": "pages/adout/about",
        "iconPath": "images/icons/003.png",
        "selectedIconPath": "images/icons/004.png"
      }
    ]
  },
  "sitemapLocation": "sitemap60.json"
}

报错[ app.json 文件内容错误] app.json: ["tabBar"][1]["pagePath"]: "pages/adout/about" need in ["pages"]

参考

https://blog.csdn.net/sinat_38708970/article/details/92623768

 

修改，复制张贴，把下面的    "pages/about/about", ，复制到上面，报错消失。

 

设置文本颜色和选择之后的颜色

app.json

{
  "pages": [
    "pages/about/about",
    "pages/weekly/weekly"
  ],
  "tabBar": {
    "list": [
      {
        "text": "每周推荐",
        "pagePath": "pages/weekly/weekly",
        "iconPath": "images/icons/001.png",
        "selectedIconPath": "images/icons/002.png"
      },
      {
        "text": "关于",
        "pagePath": "pages/about/about",
        "iconPath": "images/icons/003.png",
        "selectedIconPath": "images/icons/004.png"
      }
    ],
    "color": "#000",
    "selectedColor": "#00f"    
  },
  "sitemapLocation": "sitemap60.json"
}

 

navigator元素点击之后没有反应

 

小程序navigator 标签open-type属性 有值

Yietion 

值	说明
navigate	保留当前页面，跳转到应用内的某个页面
redirect	关闭当前页面，跳转到应用内的某个页面
reLaunch	关闭所有页面，打开到应用内的某个页面
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

注释：由于小程序页面有层数限制，目前打开的页面最多只能有 5 层

https://blog.csdn.net/u010496966/article/details/86470964?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522160832561116780261987395%252522%25252C%252522scm%252522%25253A%25252220140713.130102334..%252522%25257D&request_id=160832561116780261987395&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-7-86470964.nonecase&utm_term=open-type

 

navigator值改为switchTab

about.wxml

<view class='container'>
  <image class='about-banner' src="/images/004.jfif"></image>
  <text style="font-weight: bold; font-size: 60rpx;">电影周围看</text>
  <view>
    <text>我</text>
    <navigator  style='display: inline;' 
                url='/pages/weekly/weekly' 
                open-type="switchTab" 
                hover-class='nav-hover'
                class='nav-default'>每周推荐</navigator>
    <text>一部好片</text>
  </view>
  <text>我的微博：xxxx</text>
</view>

 

实际上包含两个操作

第一个操作，页面的跳转。

第二步，tabBar切换。