项目配置之路径配置和底部按钮配置的总结及实现

原创 2018-12-27 09:26:50 327
摘要:配置路径的作用就是指定小程序由哪些页面组成,每一项都对应一个页面的路径+文件名信息,文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理;通过配置根目录下的app.json的pages属性来配置。底部按钮配置就是配置小程序客户端窗口的底部或顶部有 tab 栏可以切换页面,可以通过根目录下的app.json文件的tabBar配置项指定

配置路径的作用就是指定小程序由哪些页面组成,每一项都对应一个页面的路径+文件名信息,文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理;通过配置根目录下的app.json的pages属性来配置。
底部按钮配置就是配置小程序客户端窗口的底部或顶部有 tab 栏可以切换页面,可以通过根目录下的app.json文件的tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页面,tab栏按钮最少是2个最多是5个。

app.json配置文件代码

{
  "pages":[
    "pages/index/index",
    "pages/goods/index",
    "pages/goods/list",
    "pages/goods/details",
    "pages/shop/list",
    "pages/shop/order",
    "pages/my/index",
    "pages/my/order",
    "pages/my/details"

  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#708090",
    "navigationBarTitleText": "微商城",
    "navigationBarTextStyle":"#fff"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "img/index.png",
      "selectedIconPath": "img/indexs.png"
    },
    {
      "pagePath": "pages/goods/index",
      "text": "商品",
      "iconPath": "img/goods.png",
      "selectedIconPath": "img/goodss.png"
    },
    {
      "pagePath": "pages/shop/list",
      "text": "购物车",
      "iconPath": "img/shop.png",
      "selectedIconPath": "img/shops.png"
    },
    {
      "pagePath": "pages/my/index",
      "text": "我的",
      "iconPath": "img/my.png",
      "selectedIconPath": "img/mys.png"
    }
    ]
  }
}


批改老师:查无此人批改时间:2018-12-27 09:29:16
老师总结:总结的不错,小程序配置比其他的语言简单,加油,好好学。

发布手记

热门词条