微信小程序JSON配置文件详细讲解作用

目录
  • 前言
  • 一、项目根目录中的app.json配置文件
  • 二、项目根目录中的project.config.json配置文件
  • 三、项目根目录中的sitemap.json配置文件
  • 四、每个页面文件夹中的.json配置文件

前言

小程序项目中有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配置文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序怎么加入JavaScript脚本,做出动态效果

    目录 一.数据绑定 二.全局数据 三.事件 四.动态提示 Toast 五.对话框 Modal 这篇文章主要介绍了教大家为小程序加入 JavaScript 脚本,做出动态效果,以及如何跟用户互动.学会了脚本,就能做出复杂的页面了. 一.数据绑定 前面的所有示例,小程序的页面都是写死的,也就是页面内容不会变.但是,页面数据其实可以通过脚本传入,通过脚本改变页面,实现动态效果. 小程序提供了一种特别的方法,让页面可以更方便地使用脚本数据,叫做"数据绑定"(data binding). 所谓&

  • JS实现微信播音效果示例详解

    目录 需要实现的效果 图片切换轮播法 CSS实现 需要实现的效果 图片切换轮播法 这个功能其实是我刚毕业的时候实现的,那也是5年前的事情了,受限于当时的水平,仅仅是实现了,其他啥都不是.相当简单. 当初微信的声音条还是竖状的,所以依旧按照但是的样子来实现. 看下面的这个图片就知道了,甚至于代码都不用贴

  • 使用nodejs搭建微信小程序支付接口的详细过程

    目录 前言 支付流程 在微信小程序发起支付 支付模块 使用npm安装 引入依赖包 创建支付实例 获取支付参数 处理业务逻辑 解密回调结果 完整代码 最后 参考 前言 前段时间在开发一个微信小程序的时候需要用到支付功能,我就去看了下微信支付的官方文档,好家伙,微信官方只提供了java.php还有Go语言的sdk.PHP我会点吧,但又不是很会,做为一个菜鸡前端,java也不会更别说go了.恰好我最近刚学了下nodejs,我就想找找有没有人做nodejs版的sdk开源,在微信开发者社区逛了逛没想到还真

  • 微信公众号weixin-js-sdk使用方法总结

    目录 1.安装weixin-js-sdk 2.封装wechat.js 3.main.js 4.页面调用方式 5.如果你需要用到其他功能,在这里按照这种方式接着定义新的方法: 总结 JS-SDK说明文档 网页授权说明文档 微信公众号授权登录参考方案 http接口请求封装参考方案 记录微信公众号开发过程中遇到的问题以及解决方案: 1.安装weixin-js-sdk npm install weixin-js-sdk 2.封装wechat.js import wx from 'weixin-js-sd

  • 微信小程序 火车票查询实例讲解

    微信小程序 简单实例---火车票查询应用,学习掌握小程序框架,及开发步骤的实现.微信小程序体现了轻便,易用的特点,并且上手快,前端知识好学易用. 1. 相关链接 本本项目代码获取地址 Github:https://github.com/VincentWYJ/WXAppTrain.git: Blog file:http://files.cnblogs.com/files/tgyf/WXAppTrain.rar: 微信小程序开发学习资料 微信开发者平台:https://mp.weixin.qq.co

  • 微信小程序 自定义创建详细介绍

    微信小程序 自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家.  微信小程序  自定义创建 自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录), 没哪个文件, 哦 原来是 app.json. 还记得 .json是什么文件不, 对喽, 全局配置文件. 没有配置文件就像没有汽油的布加迪, 跑起来才怪. 话

  • 微信小程序  自定义创建详细介绍

    微信小程序 自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家.  微信小程序  自定义创建 自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录), 没哪个文件, 哦 原来是 app.json. 还记得 .json是什么文件不, 对喽, 全局配置文件. 没有配置文件就像没有汽油的布加迪, 跑起来才怪. 话

  • 微信小程序 http请求详细介绍

    在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主 设置域名 要微信小程序进行网络通信,必须先设置域名,不然会出现错误: URL 域名不合法,请在 mp 后台配置后重试

  • 微信小程序云开发详细教程

    微信小程序云开发之初体验,供大家参考,具体内容如下 小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:既可在小程序前端操作,也能在云函数中读写的 JSON 数据库,免费2G容量 存储:可在小程序前端上传/下载云端文件,在云开发控制台可视化管理,免费5G容量 上手体验 打开微信开发者工具,新建

  • 微信 小程序Demo导入详细介绍

    微信小程序一出,立马炸开了锅,都去搭建自己的开发环境,我这里也来尝尝先,之前发了一篇文章,有人问Demo怎么导入? Demo源代码(来自网络) 百度: https://pan.baidu.com/s/1o8hJFuU (密码: bsky) 360: https://yunpan.cn/ckvXAacJjvsgR (提取码:3327) demo导入方式: 打开"微信web开发者工具" -->添加项目-->填写AppID(随便填).项目名称(随便填),选择本地开发目录(Demo

  • 微信小程序 Mustache语法详细介绍

    微信小程序  Mustache语法详解 最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序  Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档.比如小程序的wxml中的代码: {{userInfo.nick

  • 微信小程序 wx:key详细介绍

    微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下: 个人感觉官方给出的例 子不是很明确,官方解释如下: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key 的值以两种形式提供 字符串,代表在 for 循环的 array 中 item 的某

  • 微信小程序 闭包写法详细介绍

    微信小程序 闭包写法 在入口处的 app.js 中定义了一个获取用户 OpenId 的函数,在微信的登录接口 wx.login 中发起网络请求.这个函数传入一个回调函数 cb getOpenIdData: function(cb) { var that = this //调用登录接口 wx.login({ success: function(res) { wx.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', data:

  • 微信小程序  Mustache语法详细介绍

    微信小程序  Mustache语法详解 最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序  Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档.比如小程序的wxml中的代码: {{userInfo.nick

随机推荐