微信小程序开发入门(七)

小程序的基本架构

全局配置 

  利用app.json 文件对小程序进行全局配置 

  app.json文件属性 

    

   Pages配置 

    pages用于指定小程序由哪些页面组成,每一项 都对应一个页面的路径(含文件名)信息。文件名 不需要写文件后缀,框架会自动去寻找对应位置 的 .json, .js, .wxml, .wxss 四个文件进行处理。数组的第一项代表小程序的初始页面(首页)。

    小程序中新增/减少页面,都需要对 pages 数组进行修改。

  Window配置 

    

   tabBar配置 

    

   list配置 

    

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/index/HelloWechat/index",
    "pages/jiaoxue/jiaoxue",
    "pages/keyan/keyan",
    "pages/zixun/zixun",
    "pages/guanyu/guanyu"
  ],
  "window":{
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "开心每一天",
    "navigationBarTextStyle": "black"
  },
  "tabBar":{
    "color": "#000",
    "selectedColor": "#00f",
    "list":[
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/home-off.png",
        "selectedIconPath": "/images/home-on.png"
      },
      {
        "pagePath": "pages/jiaoxue/jiaoxue",
        "text": "教学",
        "iconPath": "/images/jiaoxue-off.png",
        "selectedIconPath": "/images/jiaoxue-on.png"
      },
      {
        "pagePath": "pages/keyan/keyan",
        "text": "科研",
        "iconPath": "/images/keyan-off.png",
        "selectedIconPath": "/images/keyan-on.png"
      },
      {
        "pagePath": "pages/zixun/zixun",
        "text": "资讯",
        "iconPath": "/images/zixun-off.png",
        "selectedIconPath": "/images/zixun-on.png"
      },
      {
        "pagePath": "pages/guanyu/guanyu",
        "text": "关于我们",
        "iconPath": "/images/guanyu-off.png",
        "selectedIconPath": "/images/guanyu-on.png"
      }
    ]
  }
}

  图片事先放到images目录下

  pages页面

    pages下加页面

  "window":标题栏

    "navigationBarBackgroundColor": "#fff",  标题栏颜色
    "navigationBarTitleText": "开心每一天",  标题栏文字
    "navigationBarTextStyle": "black"  标题栏文本样式
  "tabBar"标签栏
    "color": "#000",  默认文本颜色
    "selectedColor": "#00f",  选中后文本颜色

页面配置

  利用同名 .json 文件对本页面窗口表现进行配置 

  每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项。 

index.json

-------------

{
"usingComponents": {}
}
-------------------------------------------

jiaoxue.json

----------------

{
"navigationBarBackgroundColor": "#ff0000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "教学"
}
------------------------------------------
keyan.json
--------------
{
"navigationBarTitleText": "科研"
}
------------------------------------------

 

原文地址:https://www.cnblogs.com/suitcases/p/13397992.html