小程序制作（超详解！！！）第十六节小程序的基本架构

news2024/9/30 11:35:29

1.题目描述

创建一个包含:首页、教学、科研、资讯和关于我们5个标签的小程序，每个标签都有对应的页面、图标和标签文字，点击某个标签将切换到对应的页面，同时该标签的图标和文字颜色都会发生变化页面的标题也发生相应的变化，而其他标签则变为非选中状态。

2.app.json

{
  "pages": [ 
    "pages/shouye/shouye",
    "pages/beibeiting/beibeiting",
    "pages/beibeile/beibeile",
    "pages/shequ/shequ",
    "pages/wode/wode"
  ],
  "window": { 
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "财小贝",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color":"#000",
    "selectedColor": "#00f",
    "list":[
      {
        "pagePath": "pages/shouye/shouye",
        "text":"贝贝看",
        "iconPath": "/images/贝贝看-关.png",
        "selectedIconPath": "/images/贝贝看-开.png"
      },
      {
        "pagePath": "pages/beibeiting/beibeiting",
        "text":"贝贝听",
        "iconPath": "/images/贝贝听-关.png",
        "selectedIconPath": "/images/贝贝听-开.png"
      },
      {
        "pagePath": "pages/beibeile/beibeile",
        "text":"贝贝乐",
        "iconPath": "/images/贝贝乐-关.png",
        "selectedIconPath": "/images/贝贝乐-开.png"
      },
      {
        "pagePath": "pages/shequ/shequ",
        "text":"社区",
        "iconPath": "/images/贝贝社区-关.png",
        "selectedIconPath": "/images/贝贝社区-开.png"
      },
      {
        "pagePath": "pages/wode/wode",
        "text":"我的",
        "iconPath": "/images/贝贝我的-关.png",
        "selectedIconPath": "/images/贝贝我的-开.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

3.shouye.json

{
  "navigationBarBackgroundColor": "#ff0000",
  "navigationBarTextStyle":"white",
  "navigationBarTitleText": "贝贝看"
}

4.目录

images中的照片要自己提前存。

5.总结

1.全局配置

app.json文件属性

属性	类型	必填	描述
pages	string[]	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部tab栏的表现
networkTimeout	Object	否	网络超时时间
debug	boolean	否	是否开启debug模式，默认关闭
permissiom	Object	否	小程序接口权限相关设置

Pages配置

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

Window配置

属性	类型	描述
navigationBarBackgroundColor	HexColor	导航栏背景颜色
navigationBarTextStyle	string	导航栏标题颜色
navigationBarTitleText	string	导航栏标题文字内容
backgroundColor	HexColor	窗口的背景色
backgroundTextStyle	string	下拉loading的样式，仅支持dark/light
pageOrientation	string	屏幕旋转设置，支持auto/portrait/landscape

tabBar配置

属性	类型	描述
color	HexColor	tab上的文字的默认颜色
selectedColor	HexColor	tab上选中文字的颜色
backgroundColor	HexColor	tab的背景色
borderStyle	string	tabbar上边框的颜色，仅支持black/white
list	Array	tab列表，最少2个、最多5个tab
position	string	tabBar的位置，仅支持bottom/top

list配置

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在pages中先定义
text	string	是	tab上按钮文字
iconPath	string	否	图片路径，icon大小限制为40kb，建议尺寸为81px*81px,不支持网络图片
selectedIdconPath	string	否	选中时的图片路径