微信小程序必须通过官方的微信开发者工具进行开发,每一个页面都至少由两部分组成 .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:
本页面的各属性属于默认值,为全局变量,当其他的页面有相同的属性时该页面的属性将覆盖掉此属性,但是他只在某一页面内有效













