小程序结构目录
一、小程序文件结构和传统web对比
小程序框架提供了自己的视图层描述语言WXML和WXSS,Javascript,在视图层与逻辑层之间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
结构 | 传统web | 微信小程序 |
---|---|---|
结构 | HTML | WXML |
样式 | CSS | WXSS |
逻辑 | Javascript | Javascript |
配置 | 无 | JSON |
二、基本的项目目录
二、小程序配置文件
1、全局配置文件——pages字段
app.json中的pages字段显示了页面布局,表明当前项目有几个子页面,与左侧目录中的pages相对应。小程序中新增/减少页面,都需要对 pages 数组进行修改。
如果直接在app.json中新添一个字段,左侧资源管理器会自动在对应位置生成相应文件。
当前页面显示的为pages字段的第一个页面。
2、window字段
window字段描述全局的默认窗口表现,用于设置小程序的状态栏、导航条、标题、窗口背景色。
backgroundTextStyle:
下拉 loading 的样式,仅支持 dark / light。light时下拉加载圈为白色,dark为黑色圈。
navigationBarTitleText:导航栏标题文字内容。
navigationBarBackgroundColor:导航栏背景颜色,如 #000000。
enablePullDownRefresh:是否开启全局的下拉刷新。值为true和false。
backgroundColor:窗口的背景色。即下拉后加载处显示的颜色。
3、tabbar字段
客户端窗口的底部或顶部有 tab 栏可以切换页面。
需要注意的是,tabbar里面必须放列表,最少 2 个、最多 5 个 tab。
pagePath:显示点击对应图标是跳转的页面,该页面在pages字段中。
text:指示tab的文本字段。
iconpath:即点击之前tab图标的样式,值为图标路径
selectediconpath:选中时的图片路径。
color:tab 上的文字默认颜色,仅支持十六进制颜色
selectedcolor:tab 上的文字选中时的颜色,仅支持十六进制颜色,与list同级。如设置color为蓝色。