微信小程序必须通过官方的微信开发者工具进行开发,每一个页面都至少由两部分组成 .wxml,.js,也有可能会有 .wxss, .json它们分别对应普通的HTML,JS, CSS但是又有细微的差别。
首先默认首页是index.wxml,其中app.js, app.json, app.wxs中存放一些全局公共的东西。
1.首先介绍app.json中的结构:
它是由json数据对构成,
eg:
{
"pages":[ //各个页面的路径
"pages/index/index", //默认的首页,排在第一个的时默认首页
"pages/logs/logs"
],
"window":{ //定义顶部导航条
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#200C3F", //顶部背景色
"navigationBarTitleText": "微信", //顶部文字内容
"navigationBarTextStyle":"#fff", //顶部文字颜色
"enablePullDownRefresh":true , //是否可以下拉刷新
"backgroundColor":"#fff", //下拉刷新时的背景颜色
},
"tabBar”:{ //定义底部切换按钮样式
"color":"#000”, //未选中时字的颜色
"selectedColor":"red”, //选中时字的颜色
"background":"#fff", //背景颜色
"borderStyle":"#000", //边框的颜色(白,黑)
"list":[{ //总共几个切换菜单就几个
"pagePath":"pages/index/index”, //点击时对应的页面
"text":"首页”, //显示的文字
"iconPath":"images/footerShop.png”, //图标的地址
"selectedIconPath":"images/footerShop1.png” //选中时图标的地址
},{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "images/footerOrder.png",
"selectedIconPath": "images/footerOrder1.png"
}]
},
"networkTimeout”:{ //网络请求超时时间
"request":30000,
"connectSocket":3000,
"uploadFile":3000,
"downloadFile":3000
},
"debug":true //是否在控制台打印信息
}
- 相关的颜色值除了黑白以外,都应该用#+三位十六进制的数字构成;
- navigationBarBackgroundColor 表示顶部颜色,可以任意;
- navigationBarTitleText 表示顶部的文字;
- navigationBarTextStyle 表示顶部的文字颜色,只能有白色或者黑色;
- enablePullDownRefresh 表示页面是否允许下拉刷新;
- 本页面的各属性属于默认值,为全局变量,当其他的页面有相同的属性时该页面的属性将覆盖掉此属性,但是他只在某一页面内有效
2.app.wxss:
文件中写一些通用的css样式。
3.app.js:
本页面的各属性属于默认值,为全局变量,当其他的页面有相同的属性时该页面的属性将覆盖掉此属性,但是他只在某一页面内有效