1、文件结构
a、公共的文件
app.js(必须存在)
app.json(必须存在)
主要配置项:
pages --- 需要引进页面的路径
window --- 窗口颜色显示标题、颜色以及全部内容背景颜色
tabBar -- 页面固定的导航里面的item内容以及显示样式
debug --- 为true时在页面调试的时候再console可看到调试结果
networkTimeout --- 设置各种网络请求超时时间
app.wxss
b、页面文件
一个页面的组成部分一共有
js(必须)
wxml(必须)
wxss
json
总结:
1、同一个页面上的文件规定相同的路径与文件名,文件后缀不一样而已,如果文件名不一样,需要单独添加在配置项中pages中
2、如果在tabBar中没有添加该链接,在该页面中不显示tabBar?
代码
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/test/test"
],
"window":{
"backgroundTextStyle":"dark", //加载时显示loading的样式,根据backgroundColor的背景颜色而定。light在背景颜色为白色时将看不到
"navigationBarBackgroundColor": "#3399ff", //设置顶部固定标签页背景颜色
"navigationBarTitleText": "测试小程序", //标签页的内容
"backgroundColor":"#fdfdfd", //专场时的背景颜色(或者下拉刷新时会看到)
"navigationBarTextStyle":"#fff", //标签页字体的颜色
"enablePullDownRefresh":true //设置是否有下拉刷新的样式
},
"tabBar": {
"color":"#999999", //固定tab字体颜色
"selectedColor":"#3399ff", //选中后的颜色字体
"borderStyle":"black", //tab上边框的颜色
"backgroundColor":"#fff", //tab导航的背景颜色
"list": [ //设置tab里面的内容
{
"pagePath": "pages/index/index", //item跳转对应链接
"text": "首页", //tab文本内容
"iconPath":"images/sort_asc.png", //tab的icon图标
"selectedIconPath":"images/sort_desc.png"//选中后tab的icon图标,使用的相对路径即可,这里是在根目录添加一个images文件,将图片放在里面即可
},
{
"pagePath": "pages/test/test",
"text": "测试",
"iconPath":"images/sort_asc.png",
"selectedIconPath":"images/sort_desc.png"
},
{
"pagePath":"pages/logs/logs",
"text":"日志",
"iconPath":"images/sort_asc.png",
"selectedIconPath":"images/sort_desc.png"
}
],
"position":"bottom" //tabBar的具体位置,设置为top时,就在顶部了,但是在navigationBar的上面(在微信开发者上面,手机未测)
},
"debug":false,
"networkTimeout":{ //未亲测
"request":1000,
"connectSocket":1000,
"uploadFile":1000,
"downloadFile":1000
}
}
本文详细介绍了小程序的文件结构及app.json配置项,包括页面文件组成、公共文件的作用及配置参数说明,如pages、window、tabBar等,并提供了具体的配置示例。
1348

被折叠的 条评论
为什么被折叠?



