⼩程序结构⽬录
⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP验的服务。
⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ,以及 JavaScript ,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
⼩程序⽂件结构和传统web对⽐
结构 | 传统web | 微信⼩程序 |
---|---|---|
结构 | HTML | WXML |
样式 | CSS | WXSS |
逻辑 | Javascript | Javascript |
配置 | ⽆ | JSON |
通过以上对⽐得出,传统web 是三层结构。⽽微信⼩程序 是四层结构,多了⼀层 配置.json
基本的项⽬⽬录
pages:页面文件夹
- index:首页
- index.js
- Index.json
- Index.wxml
- Index.wxss
- logs:日志页面
- logs.js
- logs.json
- logs.wxml
- logs.wxss
utils:第三方工具
app.js:项目全局文件 人口文件
app.json:全局配置文件
app.wxss:全局样式文件
project.onfig.son:项目配置文件 appid
stemap.json:微信索引配置文件
⼩程序配置⽂件
⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的 page.json
注意:配置文件中不能出现注释
app.json 是当前⼩程序的全局配置,包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。
普通快速启动项⽬⾥边的 app.json 配置
pages: [
'pages/game/index',
'pages/user/index',
'pages/knapsack/index',
'pages/login/index',
'pages/favourite/index',
],
window: {
backgroundTextStyle: 'dark',
navigationBarBackgroundColor: '#000',
navigationBarTitleText: '魔熊潮玩',
navigationBarTextStyle: 'white',
backgroundColor: '#000',
}
字段的含义
- pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径,这是为了让微信客⼾端知道当前你的⼩程序
⻚⾯定义在哪个⽬录。
-
window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊定义等。
-
完整的配置信息请参考 app.json配置
- backgroundColor:背景色
- selectedColor:选中的元素的字体颜色
- color:元素的字体颜色
- borderStyle:边框颜色(black
/
white) - position:位置(top/bottom)
- list:tab 的列表
- pagePath:跳转地址
- text:名称
- selectedIconPath:选中的元素的icon图标地址
- IconPath:元素的icon图标地址
这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。
开发者可以独⽴定义每个⻚⾯的⼀些属性,如顶部颜⾊、是否允许下拉刷新等等。
⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容,⻚⾯中配置项会覆盖 app.json 的 window 中相同的配置项。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜⾊,如 #000000 |
navigationBarTextStyle | String | white | 导航栏标题颜⾊,仅⽀持 black / white |
navigationBarTitleText | String | 导航栏标题⽂字内容 | |
backgroundColor | HexColor | #ffffff | 窗⼝的背景⾊ |
backgroundTextStyle | String | dark | 下拉 loading 的样式,仅⽀持 dark / light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新。 详⻅ Page.onPullDownRefresh |
onReachBottomDistance | Number | 50 | ⻚⾯上拉触底事件触发时距⻚⾯底部距离,单位为px。 详⻅ Page.onReachBottom |
disableScroll | Boolean | false | 设置为 true 则⻚⾯整体不能上下滚动;只在⻚⾯配置中有 |
⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引