Explication détaillée du fichier de configuration JSON avec suffixe json dans la composition du code du mini programme

php是最好的语言
Libérer: 2018-07-28 09:56:03
original
3015 Les gens l'ont consulté

Le code de l'applet WeChat se compose des quatre types de fichiers suivants :

  1. Fichier de configuration JSON avec suffixe .json

  2. Fichier de modèle WXML avec suffixe .wxml

  3. Fichier de style WXSS avec suffixe wxss

  4. Script JS avec suffixe .js Fichier logique

1. Configuration JSON

On voit qu'il y a un app.json et project.config.json dans le répertoire racine du projet, et dans les pages/logs Il y a aussi un logs.json dans le répertoire. Expliquons tour à tour leurs utilisations.

Configuration du mini programme app.json

app.json est la configuration globale du mini programme actuel, y compris tous les chemins de page du mini programme, performances de l'interface, délai d'attente du réseau, onglet inférieur, etc. Le contenu de la configuration app.json dans le projet QuickStart est le suivant :

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
Copier après la connexion

Parlons brièvement de la signification de chaque élément de cette configuration :

  1. champ pages - utilisé pour la description Le chemin de toutes les pages du mini programme actuel. Ceci permet au client WeChat de savoir dans quel répertoire votre mini page de programme est actuellement définie.

  2. champ de fenêtre - la couleur d'arrière-plan supérieure de toutes les pages du mini programme, et la couleur du texte est définie ici.

Configuration de l'outil project.config.json

Habituellement, lorsque les gens utilisent un outil, ils se concentrent sur eux-mêmes préférences Effectuez des configurations personnalisées, telles que la couleur de l'interface, la configuration de la compilation, etc. Lorsque vous passez à un autre ordinateur et réinstallez l'outil, vous devrez le reconfigurer.

Dans cet esprit, le Mini Program Developer Tool générera un project.config.json dans le répertoire racine de chaque projet. Toute configuration que vous effectuez sur l'outil sera écrite dans ce fichier lorsque vous redémarrerez. en installant des outils ou en changeant d'ordinateur pour travailler, il vous suffit de charger le package de code du même projet, et les outils de développement vous aideront automatiquement à restaurer la configuration personnalisée lors du développement du projet, y compris la couleur de l'éditeur et l'heure à laquelle le code a été téléchargé. Compression automatique et une gamme d'options.

Configuration de la page page.json

Le page.json ici est en fait utilisé pour représenter le logs.json dans le répertoire pages/logs. Configuration liée à la page du mini programme.

Si le style de l'ensemble de votre mini-programme est bleu, alors vous pouvez déclarer que la couleur supérieure est le bleu dans app.json. La situation réelle n'est peut-être pas la même. Peut-être que chaque page de votre mini-programme a une tonalité de couleur différente pour distinguer les différents modules fonctionnels. Par conséquent, nous fournissons page.json afin que les développeurs puissent définir indépendamment certains attributs de chaque page, comme tout à l'heure. Parlez de la couleur supérieure, de l'opportunité d'autoriser l'actualisation déroulante, etc.

Les fichiers de détails de configuration

app.json sont utilisés pour configurer globalement l'applet WeChat, déterminer le chemin du fichier d'échange, les performances de la fenêtre, définir le délai d'expiration du réseau, définir plusieurs onglets, etc.

Ce qui suit est un app.json qui contient toutes les options de configuration :

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
Copier après la connexion

liste des éléments de configuration app.json

属性 类型 必填 描述
pages String Array 设置页面路径
window Object 设置默认页面的窗口表现
tabBar Object 设置底部 tab 的表现
networkTimeout Object 设置网络超时时间
debug Boolean 设置是否开启 debug 模式

pages

接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。

文件名不需要写文件后缀,因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

如开发目录为:

pages/

pages/index/index.wxml

pages/index/index.js

pages/index/index.wxss

pages/logs/logs.wxml

pages/logs/logs.js

app.js

app.json

app.wxss

则需要在 app.json 中写

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}
Copier après la connexion

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000"
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
navigationStyle String default 导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮 微信版本 6.6.0
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark/light
backgroundColorTop String #ffffff 顶部窗口的背景色,仅 iOS 支持 微信版本 6.5.16
backgroundColorBottom String #ffffff 底部窗口的背景色,仅 iOS 支持 微信版本 6.5.16
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px

注:HexColor(十六进制颜色值),如"#ff00ff"

注:navigationStyle 只在 app.json 中生效。开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用) 可方便切到旧视觉

如 app.json :

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}
Copier après la connexion

tabBar

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

Tip:

  1. 当设置 position 为 top 时,将不会显示 icon

  2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

属性说明:

属性 类型 必填 默认值 描述
color HexColor tab 上的文字默认颜色
selectedColor HexColor tab 上的文字选中时的颜色
backgroundColor HexColor tab 的背景色
borderStyle String black tabbar上边框的颜色, 仅支持 black/white
list Array tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String bottom 可选值 bottom、top

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字
iconPath String 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片
selectedIconPath String 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

networkTimeout

可以设置各种网络请求的超时时间。

属性说明:

属性 类型 必填 说明
request Number wx.request的超时时间,单位毫秒,默认为:60000
connectSocket Number wx.connectSocket的超时时间,单位毫秒,默认为:60000
uploadFile Number wx.uploadFile的超时时间,单位毫秒,默认为:60000
downloadFile Number wx.downloadFile的超时时间,单位毫秒,默认为:60000

debug

可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有Page的注册页面路由数据更新事件触发 。 可以帮助开发者快速定位一些常见的问题。

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键,如:

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000"
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数。
disableScroll Boolean false 设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}
Copier après la connexion

相关文章:

微信小程序 教程之小程序配置    

微信小程序的配置

相关视频:

App.json全局配置文件详解-微信小程序开发视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal