零基础学习微信小程序(3):全局配置文件

app.json:

文件截图:
在这里插入图片描述

pages字段:

用于描述当前小程序的所有页面路径
里面的内容即为小程序的页面,可以在该文件里直为小程序添加页面。并且pages里的书写顺序和pages文件夹里的文件顺序是对应的。
这里说一个添加页面的好用的小技巧:
即:直接再pages里添加内容,可以直接为小程序添加一个新页面:
在这里插入图片描述
其中pages第一行,即为小程序的首页,不信你看:
在这里插入图片描述
在VS Code里这么做也是一样的效果,注意点在于:写完VS Code以后需进行保存,保存以后再到微信开发者工具里进行编译。

window字段:

定义小程序所有页面的顶部背景颜色和文字颜色定义等,是全局默认窗口表现
原样式:
在这里插入图片描述
修改以后:
在这里插入图片描述
注意点:
(1)”navigationBarTextStyle“字段必须为black或者white(不能太花里胡哨的)
(2)"backgroundTextStyle"是一个下拉loading的样式,仅支持dark和light,需要配合上“enablePullDownRefresh”来使用

tabbar字段:

在这里插入图片描述
在这里插入图片描述
(1)pagesPath:里面填写的是路径,即进行点击图标后,向某个页面跳转。其中的pagesPath必须是存在玉pages中的,不能是不存在的页面路径
(2)text:图标下方的文字
(3)iconPath:未选择的图标路径
(4)selectedIconPath:已选择的图标路径

在进行实验之前需要准备图标,并且需要两种图标,一种是未被选中的状态时的图标,另一种是已经选中时的图标。
在这里插入图片描述
随后将放有图标的文件夹,放到微信小程序的文件夹下
首先根据需要添加新的页面:

"pages":[
    "pages/index/index",
    "pages/cart/cart",
    "pages/category/category",
    "pages/my/my",
    "pages/demo01/demo01",
    "pages/demo02/demo02",
    "pages/logs/logs"
  ],
"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icons/home.png",
      "selectedIconPath": "icons/home-o.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "分类",
      "iconPath": "icons/category.png",
      "selectedIconPath": "icons/category-o.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "icons/cart.png",
      "selectedIconPath": "icons/cart-o.png"
    },
    {
      "pagePath": "pages/my/my",
      "text": "个人中心",
      "iconPath": "icons/my.png",
      "selectedIconPath": "icons/my-o.png"
    }
  ]
  },

在这里插入图片描述
在这里插入图片描述
点击图标时图标改变,以及样式也改变了。
如果要对样式进行改变,那么可以自己查找开发文档,添加新的样式

sitemap配置:

用于配置小程序及其页面是否允许被微信索引
开发者可以通过sitemap.json配置,或者是管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将展示再搜索结果中。如果小程序爬虫发现的页面数据和真实用户展示的不一样,那么该页面就不会进入到索引中。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章