查看更多精彩前端资源

【前言】

         在上一篇文章中，已为大家详细介绍如何开启你的第一个小程序的设置。下面继续为大家介绍小程序里面一些文件结构与配置。

【微信小程序的文件结构】

主体文件结构

主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序公共样式表

页面文件结构

页面由四个文件组成，分别是：

文件类型	必填	作用
js	是	页面逻辑 ( 微信小程序没有window和document对象 )
wxml	是	页面结构  ( XML语法，不是HTML语法 )
wxss	否	页面样式表 ( 拓展了rpx尺寸单位，微信专属响应式像素 )
json	否	页面配置  ( 不能写注释，否则编译报错 )

【微信小程序配置】

app.json 配置项列表

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

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

1.    Pages参数

如图所示，pages参数里面，配置的是微信小程序的页面的路径，并且这个路径是按顺序显示的，如果把”pages/logs/logs”放在最前面，那么小程序一打开，显示的页面就是logs日志页面了。

并且，在pages下面配置好页面路径，文件夹pages就会自动生成一组页面，里面的js，json，wxml，wxss文件都自动生成好。

2.    window参数

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

注意：页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。

属性	默认值	描述
navigationBarBackgroundColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	无	导航栏标题文字内容
backgroundColor	#ffffff	窗口的背景色
backgroundTextStyle	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	false	是否全局开启下拉刷新。
onReachBottomDistance	50	页面上拉触底事件触发时距页面底部距离，单位为px。

注意：其中backgroundTextStyle需要配合enablePullDownRefresh一起使用，下页面下拉的时候出现下拉刷新状态

3.    tabBar参数

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

注意：

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，设置成top是无图标

图示：

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

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

如下图所示：

查看更多精彩前端资源

【前言】

         在上一篇文章中，已为大家详细介绍如何开启你的第一个小程序的设置。下面继续为大家介绍小程序里面一些文件结构与配置。

【微信小程序的文件结构】

主体文件结构

主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序公共样式表

页面文件结构

页面由四个文件组成，分别是：

文件类型	必填	作用
js	是	页面逻辑 ( 微信小程序没有window和document对象 )
wxml	是	页面结构  ( XML语法，不是HTML语法 )
wxss	否	页面样式表 ( 拓展了rpx尺寸单位，微信专属响应式像素 )
json	否	页面配置  ( 不能写注释，否则编译报错 )

【微信小程序配置】

app.json 配置项列表

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

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

1.    Pages参数

如图所示，pages参数里面，配置的是微信小程序的页面的路径，并且这个路径是按顺序显示的，如果把”pages/logs/logs”放在最前面，那么小程序一打开，显示的页面就是logs日志页面了。

并且，在pages下面配置好页面路径，文件夹pages就会自动生成一组页面，里面的js，json，wxml，wxss文件都自动生成好。

2.    window参数

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

注意：页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。

属性	默认值	描述
navigationBarBackgroundColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	无	导航栏标题文字内容
backgroundColor	#ffffff	窗口的背景色
backgroundTextStyle	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	false	是否全局开启下拉刷新。
onReachBottomDistance	50	页面上拉触底事件触发时距页面底部距离，单位为px。

注意：其中backgroundTextStyle需要配合enablePullDownRefresh一起使用，下页面下拉的时候出现下拉刷新状态

3.    tabBar参数

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

注意：

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，设置成top是无图标

图示：

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

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

如下图所示：