前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序开发(全局配置文件)

微信小程序开发(全局配置文件)

作者头像
全栈开发日记
发布2022-05-13 14:27:49
9450
发布2022-05-13 14:27:49
举报
文章被收录于专栏:全栈开发日记

目录:

papes字段 window字段 tabbar字段

微信小程序中全局配置文件指:app.json文件,该文件通过微信开发者工具新建项目后会自动生成,无需自己手动创建。

本文主要来了解一下全局配置文件中各字段的作用或含义。

pages字段

作用:控制页面目录

在小程序开发时,每个页面都对应一个目录,每个目录又分别有wxmlwxssjsjson四个文件。详细说明可查看后续文章介绍,本文主要详解全局配置文件。

该字段内容是一个字符串形式数组,数组中每一个元素代表一个页面。快捷键CTRL+S保存后会自动生成对应目录和页面。

window字段

作用:控制小程序顶部背景颜色,标题等元素

该字段内容是一个json字符串,key和value都需要用引号包含。

代码语言:javascript
复制
"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "标题名称",
    "navigationBarTextStyle":"white"
  },

backgroundTextStyle:下拉 loading 的样式,仅支持 dark / light

navigationBarBackgroundColor:导航栏背景颜色,如 #000000

navigationBarTitleText:导航栏标题文字内容。

navigationBarTextStyle:导航栏标题颜色,仅支持 black / white

更多属性请移步微信开放文档中查看。

tabBar字段

作用:控制导航条样式和内容。

代码语言:javascript
复制
"tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./icon/主页0.png",
        "selectedIconPath": "./icon/主页1.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "./icon/分类0.png",
        "selectedIconPath": "./icon/分类1.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "./icon/购物车0.png",
        "selectedIconPath": "./icon/购物车1.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "./icon/我的0.png",
        "selectedIconPath": "./icon/我的1.png"
      }
    ]
  },

控制的正是图中的内容

color:tab 上的文字默认颜色,仅支持十六进制颜色。

selectedColor:tab 上的文字选中时的颜色,仅支持十六进制颜色。

backgroundColor:tab 的背景色,仅支持十六进制颜色。

position:tabBar 的位置,仅支持 bottom / top

borderStyle:tabbar 上边框的颜色, 仅支持 black / white

list属性

pagePath:指定点击后要跳转的页面路径。

text:显示的页面名称。

iconPath:未被点击时的图标图片。

selectedIconPath:被点击后的图标图片。

更多属性请移步微信开放文档中查看。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-12-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈开发日记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • pages字段
  • window字段
  • 作用:控制小程序顶部背景颜色,标题等元素
  • tabBar字段
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档