⼩程序（JSON配置⽂件、WXML模板⽂件⼀）
⼩程序（JSON配置⽂件）
新建页⾯
新建页⾯page
（1）⼿动创建
①右键单击 [pages] ⽂件夹，在弹出的菜单中选择“新建⽬录”
②右键单击新建的⽬录，在弹出的菜单中选择“新建Page”
（2）⾃动创建
直接在app.json⽂件的pages选项中将新页⾯的路径写好，系统会⾃动创建所对应的四个⽂件page.wxml模板⽂件、page.wxss样式⽂件、page.json配置⽂件、page.js逻辑⽂件
删除页⾯
删除页⾯page
⼿动删除
⿏标右键单击需要删除的页⾯⽂件夹，在弹出的菜单中选择“删除”
配置⽂件
配置⽂件
后缀：.json，⽂件格式遵循JSON语法规范
作⽤：对⼩程序进⾏全局配置，设置页⾯⽂件的路径、窗⼝表现、设置⽹络超时时间、设置多 tab 切换页等
分类：⼩程序全局配置⽂件app.json和页⾯配置⽂件page.json
接下来分别介绍下⼩程序配置⽂件app.json与页⾯配置⽂件page.json
⼩程序配置⽂件app.json
⼩程序配置⽂件
⼩程序/全局配置⽂件 ⼩程序根⽬录下的 app.json ⽂件⽤来对⼩程序进⾏全局配置 ⽂件内容本质就是⼀个 JSON 对象。 ⼩程序/全局配置⽂件------>pages属性 作⽤：⽤于指定⼩程序由哪些页⾯组成，每⼀项都对应⼀个页⾯的 路径（含⽂件名） 信息。⽂件名不需要写⽂件后缀，框架会⾃动去寻对于位置的 .json, .js, .wxml, .wxss 四个⽂件进⾏处理。 注意：数组的第⼀项代表⼩程序的初始页⾯（⾸页）。⼩程序中新增/减少页⾯，都会对 pages 数组⾃动进⾏修改。
例如开发⽬录为：
注意：数组的第⼀项代表⼩程序的初始页⾯（⾸页）
⼩程序/全局配置⽂件------>window属性 作⽤：⽤于设置⼩程序的状态栏、导航条、标题、窗⼝背景⾊
⼩程序/全局配置⽂件------>window属性~下拉刷新 （1）新建⼀个空⽩页，例如home页，建好后会发现home.js⽂件中已经写好各个阶段钩⼦函数。 观察后发现onPullDownRefresh下拉函数，这⾥添加验证代码，输出验证。 （2）下拉⽆效 然⽽下拉后发现触发不了js回调，因为下拉功能需要配置，才可以⽀持下拉功能，即enablePullDownRefresh设置为true 注意： ①如果是在⼩程序配置⽂件app.json
中设置该字段，则⼩程序下的所有页⾯都可以下拉 ②如果在页⾯配置⽂件page.json设置该字段，则只能在当前设置过字段的页⾯执⾏下拉操作③开发建议：只在需要执⾏下拉操作的页⾯设置该字段即可，例如本例中的home页⾯。
（3）下拉 loading 的样式
通过前⾯已经知道，可以在app.json中进⾏全局配置，使所有页⾯都带有下拉刷新功能；也可以在需要下拉刷新功能的page对应的json中配置。
还有⼀点点不完美的地⽅，别⼈的⼩程序，下拉刷新时，可以看到顶部有三个点闪烁的动画，⽽此时⼩程序顶部⼀⽚空⽩。
观察app.json后发现window属性中已经将backgroundTextStyle即下拉loading样式设置为light。
那为什么还不管⽤呢？
（4）窗⼝背景⾊
因为背景是⽩⾊的，由于颜⾊的缘故，三个点闪烁的动画看不到，因此背景需要进⾏以下配置：
（5）loading样式
之前设置的下拉loading样式backgroundTextStyle为light浅⾊点，接下来可以改为dark深⾊点体验下
（6）真机下拉bug
经过之前步骤，已经可以在模拟器实现下拉效果，但真机测试后容易出现不缩回的现象，这时可以在下拉监听事件中添加⼿动缩回的代码。⽅案：⼩程序还提供了停⽌下拉刷新效果的api，如果发现进⼊刷新状态，⽆法停⽌，可以使⽤wx.stopPullDownRefresh这个api
设置1.5s后回复到原先状态
⼩程序/全局配置⽂件------>sitemapLocation属性 作⽤：指明 sitemap.json 的位置；默认为 ‘sitemap.json’ 即在 app.json 同级⽬录下名字的 sitemap.json ⽂件 sitemap.json为⼩程序收录设置⽂件，默认所有页⾯都能被索引，开发中⼀般不⽤进⾏相关配置
以上即为⼩程序配置⽂件app.json的⼀些基础属性，除此之外还有其他属性，后续涉及到会再⼀⼀介绍。
⼩程序/全局配置⽂件------>⼩结
①pages字段：描述当前⼩程序所有页⾯路径，便于让客户端知道当前⼩程序页⾯定义在哪个⽬录。
②window字段：⼩程序的状态栏、导航条、标题、窗⼝背景⾊
③sitemapLocation字段：指明⼩程序收录设置⽂件sitemap.json的位置
页⾯配置⽂件page.json
接下来介绍下页⾯page配置⽂件page.json
案例：例如logs.json
页⾯配置⽂件page.json
作⽤：对本页⾯的窗⼝表现进⾏配置，⽂件内容本质为⼀个 JSON 对象
场景：如果整个⼩程序的风格是蓝⾊调，那么在 app.json ⾥边声明顶部颜⾊是蓝⾊即可。实际情况可能不是这样，可能你⼩程序⾥边的每个页⾯都有不⼀样的⾊调来区分不同功能模块，因此⼩程序提供了 page.json，让开发者可以独⽴定义每个页⾯的⼀些属性，例如顶部颜⾊、是否允许下拉刷新等等。
简单理解：就是对单个⼩程序页⾯的配置，可以覆盖全局配置app.json。
特性：覆盖性，即每⼀个⼩程序页⾯可以使⽤同名 .json ⽂件来对本页⾯的窗⼝表现进⾏配置，但页⾯中配置项会覆盖 app.json 的window 中相同的配置项。
js导航栏下拉菜单常⽤配置项属性 配置项属性—navigationStyle导航栏样式 接下来介绍下页⾯page配置⽂件 配置项属性—navigationStyle导航栏样式 注意： ①最低版本要求：客户端 7.0.0），客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中⽣效 ②图⽚存储：本地图⽚过⼤会有限制提⽰，⼀般本地只存项⽬所⽤图标即可，如果是⼤图⽚，在开发⾥可以⽤链接指向图⽚位置。 图⽚测试： 在根⽬录下新建images ⽂件夹存放图⽚，这⾥存放图⽚01.jpg，⼤⼩为2.27MB。当点击预览或者上传时都会给出相应警告提⽰ 配置项属性—disableScroll页⾯滚动 原理：最外侧元素设置超出隐藏 接下来介绍下页⾯pag
e配置⽂件—⼩结 注意： ①页⾯配置中只能设置 app.json 中 window 对应的配置项，以决定本页⾯的窗⼝表现，所以⽆需写 window 这个属性； ②usingComponents为页⾯⾃定义组件配置，⾮必填项，数据类型为对象Object，以后涉及到再详细介绍。
json语法结构
（1）优点
①简单易读：易于⼈的阅读和编写，通常不需要特殊的⼯具，就能读懂和修改
②轻量：是⼀种轻量级的数据交换格式
（2）格式
JSON⽂件都是被包裹在⼀个⼤括号中 {}，通过key-value的⽅式表
（3）注意事项
json格式看起来和js的对象表达⽅式⼗分相似，但是有所不同
JSON的Key必须包裹在⼀个双引号中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
（4）数据格式限制
JSON的值只能是以下⼏种数据格式：
（4）数据格式限制
其他任何格式都会触发报错，例如 JS中的 undefined
（5）注释限制
JSON ⽂件中⽆法使⽤注释，添加注释将会引发报错
总结
以上便是⼩程序配置⽂件 app.json和页⾯配置⽂件 page.json的相关介绍。
别名：⼩程序配置也叫全局配置，页⾯配置也叫局部配置。
重点：
①覆盖性：页⾯配置⽂件相关设置会覆盖⼩程序配置⽂件中已有配置
②书写格式：页⾯配置中只能设置 app.json 中 window 对应的配置项，以决定本页⾯的窗⼝表现，所以⽆需写 window 这个属性
③JSON语法格式及相关限制
⼩程序（WXML模板⽂件⼀）
页⾯根元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。