前言

小程序项目中有4种json配置文件,分别是:

1.项目根目录中的app.json配置文件

2.项目根目录中的project.config.json 配置文件

3.项目根目录中的sitemap.json配置文件

4.每个页面文件夹中的.json配置文件

一、项目根目录中的app.json配置文件

app.json是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。

pages存放着所以小程序页面的路径

window是修改小程序全局背景,文字样式,修改标题

下图就是展现出,app.json配置底部tabBar,具体方法在前几篇文章中有详细的介绍

完整代码段

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tabbar/index.png",
        "selectedIconPath": "static/tabbar/indexSelected.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/class/class",
        "iconPath": "static/tabbar/class.png",
        "selectedIconPath": "static/tabbar/classSelected.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "static/tabbar/cart.png",
        "selectedIconPath": "static/tabbar/cartSelected.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "static/tabbar/my.png",
        "selectedIconPath": "static/tabbar/mySelected.png",
        "text": "我的"
      }
    ]
  }

二、项目根目录中的project.config.json配置文件

project.config.json是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:

1.setting 中保存了编译相关的配置

2.projectname中保存的是项目名称

3.appid中保存的是小程序的账号ID

三、项目根目录中的sitemap.json配置文件

微信现已开放小程序内搜索,开发者可以通过sitemap.json配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。

sitemap 配置:

小程序根目录下的sitemap.json文件用来配置小程序及其页面是否允许被微信索引。

例1:

{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}

所有页面都会被微信索引(默认情况)

例2:

{
  "rules":[{
    "action": "disallow",
    "page": "path/to/page"
  }]
}

配置path/to/page页面不被索引,其余页面允许被索引

例3:

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page"
  }, {
    "action": "disallow",
    "page": "*"
  }]
}

配置path/to/page页面被索引,其余页面不被索引

例4:

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "inclusive"
  }, {
    "action": "allow",
    "page": "*"
  }]
}

包含a 和 b参数的path/to/page页面会被微信优先索引,其他页面都会被索引,例如:

  • path/to/page?a=1&b=2=> 优先被索引
  • path/to/page?a=1&b=2&c=3=> 优先被索引
  • path/to/page=> 被索引
  • path/to/page?a=1=> 被索引
  • 其他页面都会被索引

例5:

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "inclusive"
  }, {
    "action": "disallow",
    "page": "*"
  }, {
    "action": "allow",
    "page": "*"
  }]
}
  • path/to/page?a=1&b=2=> 优先被索引
  • path/to/page?a=1&b=2&c=3=> 优先被索引
  • path/to/page=> 不被索引
  • path/to/page?a=1=> 不被索引
  • 其他页面由于命中第二条规则,所以不会被索引
  • 由于优先级的问题,第三条规则是没有意义的

注:没有 sitemap.json 则默认所有页面都能被索引

注:{"action": "allow", "page": "*"}是优先级最低的默认规则,未显式指明 "disallow" 的都默认被索引

四、每个页面文件夹中的.json配置文件

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

每一个页面可以单独设置样式,如下修改背景颜色

到此这篇关于微信小程序JSON配置文件详细讲解作用的文章就介绍到这了,更多相关小程序JSON配置文件内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

微信小程序JSON配置文件详细讲解作用的更多相关文章

  1. 微信小程序“圣诞帽”的实现思路详解

    这两天朋友圈被圣诞帽刷屏,下面通过本文给大家分享微信小程序“圣诞帽”的实现思路详解,需要的朋友参考下吧

  2. Swift - 自定义UIActivity分享

    UIActivity可以十分方便地将文字、图片等内容进行分享,比如分享到微信、微博、发送邮件、短信等等。下面通过继承UIActivity实现定制按钮和功能,通过调用UIActivityViewController来展示分享框。,NSURL]//新建自定义的分享对象数组acts=[WeiXinActivity(),147)!important;font-family:Consolas,UIActivityTypePrintUIActivityTypeAssignToContactUIActivityType

  3. php微信公众平台交互与接口详解

    这篇文章主要为大家详细介绍了php微信公众平台开发,交互与接口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. AngularJS下$http服务Post方法传递json参数的实例

    下面小编就为大家分享一篇AngularJS下$http服务Post方法传递json参数的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  5. 小程序实现图片裁剪上传

    这篇文章主要为大家详细介绍了小程序实现图片裁剪上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. php版微信数据统计接口用法示例

    这篇文章主要介绍了php版微信数据统计接口用法,结合实例形式分析了php微信数据统计接口功能及相关的使用技巧,需要的朋友可以参考下

  7. JSON 入门教程基础篇 json入门学习笔记

    刚开始接触json的时候感觉有点奇怪的命名,后来使用才发现这么简单而且用好用,扩展性很强,这里就为大家整理一下

  8. PHP仿微信发红包领红包效果

    最近项目开发要求实现红包功能,仿微信(不含留言),但只能使用余额发红包。下面小编给大家分享PHP仿微信发红包领红包效果,感兴趣的朋友一起看看吧

  9. jQuery+ajax读取json数据并按照价格排序示例

    这篇文章主要介绍了jQuery+ajax读取json数据并按照价格排序,涉及jQuery基于ajax动态获取json文件数据并进行数据遍历与排序的相关操作技巧,需要的朋友可以参考下

  10. Yii2语言国际化自动配置详解

    这篇文章主要介绍了Yii2语言国际化自动配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部