微信小程序——配置文件介绍

发表于 | 分类于 | 阅读次数

微信小程序中的文件类型有

1 .json 后缀的 JSON 配置文件
2 .wxml 后缀的 WXML 模板文件
3 .wxss 后缀的 WXSS 样式文件
4 .js 后缀的 JS 脚本逻辑文件

JSON配置文件

** app.json 是对当前小程序的全局配置，包括所有页面路径、界面表现、网络超时时间、底部tab等

注: .json不支持注释 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

/*
* 小程序所有页面路径
*/
"pages":[
	"pages/index/index",
	"pages/logs/logs"
],
/*
*界面表现
*/
"window":{
	"backgroundTextStyle":"light",  //下拉背景字体、loading图的样式，仅支持dark、light
    	"navigationBarBackgroundColor": "#fff",//导航栏背景颜色
    	"navigationBarTitleText": "WeChat",//导航栏标题文字内容
    	"navigationBarTextStyle":"black", //导航栏标题颜色，仅支持black/white
	"backgroundColor":"#fff",//窗口的背景颜色
	"enablePullDownRefresh":false//是否开启下拉刷新
},
/*
* tab
*/
"tabBar": {
    	"color":"#fff",//tab上文字默认颜色
	"selectedColor":"#fff",//tab上文字选中时颜色
	"backgroundColor":"#fff",//tab背景颜色
	"borderStyle":"black",//tabbar上边框的颜色，仅支持black/white
	//tab的列表，最少2个，最多5个tab
    	"list": [{
      		"pagePath": "pages/index/index",//页面路径，必须现在pages中定义
      		"text": "首页",//tab上的按钮文字
		"iconPath":"images/1.jpg",//图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
		"selectedIconPath":"images/2.jpg"//选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
    		}, {
      		"pagePath": "pages/logs/logs",
     	 	"text": "日志"
    	}],
	"position":"bottom"//可选值bottom/top
},
/*
* 网络请求超时时间
*/
"networkTimeout": {
    	"request": 10000,//	wx.request的超时时间，单位毫秒
	"connectSocket":10000,//wx.connectSocket的超时时间，单位毫秒
	"uploadFile":10000,//wx.uploadFile的超时时间，单位毫秒
    	"downloadFile": 10000//wx.downloadFile的超时时间，单位毫秒
},
/*
*在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。可以帮助开发者快速定位一些常见的问题
*/
"debug": true

** page.json页面配置。页面配置只需要配置Window配置项的内容，页面中的配置项会覆盖app.json中window中相同的配置项。

1
2
3
4
5
6
7
8
{
  	"navigationBarBackgroundColor": "#ffffff",
  	"navigationBarTextStyle": "black",
  	"navigationBarTitleText": "微信接口功能演示",
  	"backgroundColor": "#eeeeee",
  	"backgroundTextStyle": "light",
	"disableScroll":true//设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项
}

WXML配置文件

.wxml描述当前页面的结构

WXSS配置文件

.wxss描述 WXML 的组件样式
与 CSS 相比，WXSS 扩展的特性有：


  • 尺寸单位

  • 样式导入


尺寸单位

  • rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

    • 样式导入

  • 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

    • 选择器









    选择器样例样例描述
    .class.intro选择所有拥有 class=”intro” 的组件
    #id#firstname选择拥有 id=”firstname” 的组件
    elementview选择所有 view 组件
    element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
    ::afterview::after在 view 组件后边插入内容
    ::beforeview::before在 view 组件前边插入内容

    JS脚本逻辑文件

    .js交互逻辑，响应用户的操作