微信小程序笔记（一）---框架

这个星期忙着研究微信小程序，所以停了几天没更新了，现在小程序已经研究完了，就接着分享以下，现在会保证把每一章节的笔记都更新出来供大家学习，为了章节性只有分开发布，保证每天更新，谢谢大家关注。

1、单例的app：一个小程序必须有且只有一个app.xx。并且在根目录下。

• app.js：相当于安卓中的application。必须有。

• app.json：相当于安卓中的配置清单文件。必须有。

• app.wxss：相当于安卓中的主题theme，可选。

2、文件夹

可以有很多层文件夹，名字随意，可以叫page，也可以叫pages

3、页面（每一个页面都要在app.json的pages属性中注册）

在文件夹中创建单例的文件，如login.xx

• login.js：业务逻辑代码，相当于安卓中的java文件

• login.wxml：页面布局，相当于安卓中的xml文件

• login.wxss：本页面的样式文件

• login.json：本页面的配置文件

<!--只对本页page做window配置，所以不用加window-->{//窗口的一些设置 "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "小程序", "backgroundColor": "#eeeeee",//窗口背景色 "backgroundTextStyle": "light", "enablePullDownRefresh": true//窗口是否可以下拉刷新，通常页面是否可下拉在这里设置，而不再app.json中设置

}

4、配置（配置json文件是不可以有注释的）

app.json是全局配置，参考官方教程

json文件中不能有注释，下面的注释只是为了帮助理解

{ "pages":[//所有的页面，要在此注册

"page3/page3", "page2/page2", "page/index"

], "window": {//窗口的一些设置

"navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "小程序", "backgroundColor": "#eeeeee",//窗口背景色

"backgroundTextStyle": "light", "enablePullDownRefresh": true//窗口是否可以下拉刷新

}, "tabBar": { "color": "#ff0000",//字体颜色

"selectedColor": "#0000ff",//选中时的字体颜色

"backgroundColor": "#ffffff",//背景色

"list": [{ "pagePath": "pagePath", "text": "text", "iconPath": "iconPath", "selectedIconPath": "selectedIconPath"

}]

}, "networkTimeout": {//分别是请求超时、连接超时、上传超时、下载超时

"request": 20000, "connectSocket": 20000, "uploadFile": 20000, "downloadFile": 20000

}, "debug": true //是否开启debug模式}

4、样式文件

• pages：一个数组，里面是每个页面的路径，用逗号分隔

• window：一个object，里面是键值对，逗号分隔

• tabbar：键值对

• networkTimeout：键值对

• debug：直接设布尔值

5、初始化

app.js是全局的入口，有三个生命周期方法。还可以自己添加其他函数或数据，App()方法好像不写程序也能运行，但建议写上更标准。

App({ onLaunch: function () { console.log('App Launch')

}, onShow: function () { console.log('App Show')

}, onHide: function () { console.log('App Hide')

}, otherObj: { hasLogin: false

}

})