1、创建小程序
2、代码构成
2.1 小程序配置 app.json
app.json是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。
- pages:用于描述当前小程序所有的页面路径,这是为了让微信客户端知道当前你的小程序定义在那个目录
- window:定义小程序所有页面的顶部背景颜色,文字颜色等。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
2.2工具配置 project.config.json
通常大家再使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等。小程序为了方便开发者,在工具上做的任何配置都会写入到这个文件,当重新安装的时候,只要载入同一个项目的代码包,开发者工具就会自动配置。
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"autoAudits": false
},
"compileType": "miniprogram",
"libVersion": "2.0.4",
"appid": "wxf3fbf56554e22c88",
"projectname": "demo",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
2.3页面配置 page.json
这里的 page.json
其实用来表示 pages/logs 目录下的 logs.json
这类和小程序页面相关的配置
如果你整个小程序的风格是蓝色调,那么你可以在 app.json
里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块,因此我们提供了 page.json
,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。