微信小程序开发(2)—项目的组成篇
一.小程序目录的构成
pages
用来存放所有小程序的页面utils
用来存放工具性质的模块(例如:格式化时间的自定义模块)app.js
小程序项目的入口文件 — main.jsapp.json
小程序项目的全局配置文件app.wxss
小程序项目的全局样式文件project.config.json
项目的配置文件sitemap.json
用来配置小程序及其页面是够允许被微信索引 – SEO – 搜索引擎优化
二.小程序页面构成:
小程序页面由4个基本文件组成
.js
文件 – 页面的脚本文件,存放页面的数据、事件处理函数、生命周期等
.json
文件 – 当前页面的配置文件,配置页面的外观、表现等
.wxml
文件 – 页面的模板结构文件
.wxss
文件 – 当前页面的样式表文件
示例:
三.小程序中的 4 种配置文件
JSON 是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现
小程序项目通过设置不同的 .json 配置文件,对小程序项目进行不同级别的配置。
小程序项目中有4 种json文件:
- 项目根目录中
app.json
文件:全局配置文件✨ - 页面文件夹中
xxx.json
文件: 本页面窗口外观配置文件✨ - 项目根目录中
project.config.json
文件: 开发工具配置文件 - 项目根目录中
sitemap.json
文件: 是否允许微信搜索
1. app.json
app.json 是当前小程序的全局配置文件
全局配置文件就是指配置好以后,能够影响到每一个页面
包括了小程序的所有页面路径、窗口外观、界面表现、设置网络超时时间、底部 tab 等
具体参考:小程序全局配置
app.json
中常用的几个配置项及其作用:
字段名 | 作用说明 | 类型 |
---|---|---|
pages(✨必填) | 页面路径列表,指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息 | string[] |
sitemapLocation (✨必填) | 指明 sitemap.json 的位置 | string |
window | 全局的默认窗口表现 | Object |
tabBar | 底部 tab 栏的表现 | Object |
networkTimeout | 网络超时时间 | Object |
style | 指定使用升级后的weui样式;“style”: "v2"可表明启用新版的组件样式 | string |
示例:
//app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/demo/demo",
"pages/test/test"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/demo/demo",
"text": "demo"
},{
"pagePath": "pages/test/test",
"text": "test"
}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2. xxx.json
小程序中的每一个页面,可以使用
.json
文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json
中的window
中的配置项
详情参考: 小程序页面配置
xxx.json
中常用的几个配置项及其作用:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
usingComponents✨ | 页面自定义组件配置 | Object | |
navigationBarBackgroundColor | 导航栏背景颜色 | HexColor | #000000 |
navigationBarTextStyle | 导航栏标题颜色,仅支持 black / white | string | white |
navigationBarTitleText | 导航栏标题文字内容 | string | |
backgroundColor | 窗口的背景色 | HexColor | #ffffff |
backgroundTextStyle | 下拉 loading 的样式,仅支持 dark / light | string | dark |
enablePullDownRefresh✨ | 是否开启当前页面下拉刷新。 | boolean | false |
onReachBottomDistance✨ | 页面上拉触底事件触发时距页面底部距离,单位为px。 | number | 50 |
disableScroll | 设置为 true 则页面整体不能上下滚动。 | boolean | boolean |
initialRenderingCache | 页面初始渲染缓存配置 | string |
3. sitemap.json
小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引
详情参考: 小程序sitemap配置
属性 | 描述 | 类型 | 必填 |
---|---|---|---|
rules | 索引规则列表 | Object[] | 是 |
4. project.config.json
记录对小程序开发工具所做的个性化配置
小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,在工具上做的任何配置都会写入到这个文件,当重新安装工具或者换电脑工作时,只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项
详情参考 : 小程序工具配置
属性 | 描述 | 类型 |
---|---|---|
packOptions | 打包配置选项] | Object |
setting | 项目配置 | Object |
compileType | 编译类型 | String |
libVersion | 基础库版本 | String |
appid | 项目的appid,只在新建项目时读取 | String |
projectname | 项目名字,只在新建项目时读取 | String |
debugOptions | 调试配置选项 | Object |
scripts | 自定义预处理 | Object |
staticServerOptions | ||
isGameTourist | ||
condition | 编译模式,增加编译模式时,会添加到下面的对应数组 | Object |
示例:
{
"description": "项目配置文件", //描述
"packOptions": { //用以配置打包时对符合指定规则的文件或文件夹进行忽略
"ignore": []
},
"setting": { //项目设置
"urlCheck": false, //不检查安全域名和 TLS 版本
"es6": true, //启用 es6 转 es5
"postcss": true, //上传代码时样式自动补全
"minified": true, //上传代码时自动压缩
"newFeature": true //新特征,文档中未描述
},
"compileType": "miniprogram", //编译类型,miniprogram为普通小程序项目
"libVersion": "2.3.0", //基础库版本
"appid": "touristappid", //AppID
"projectname": "%E6%B5%85%E8%93%9D%E5%95%86%E5%9F%8EPRO", //项目名字,只在新建项目时读取,urlDecode解码(路径解码)
"debugOptions": {
"hidedInDevtools": [] //配置调试时于调试器 Sources 面板隐藏源代码的hidedInDevtools 的配置规则和 packOptions.ignore 是一致的。
},
"scripts": {}, //自定义预处理的命令 beforeCompile编译前预处理命令、beforePreview预览前预处理命令、beforeUpload上传前预处理命令
"condition": { //编译模式,增加编译模式时,会添加到下面的对应数组
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"plugin": { //插件
"current": -1,
"list": []
},
"game": { //小游戏
"list": []
},
"miniprogram": { //小程序
"current": -1,
"list": []
}
}
}