小程序结构目录

小程序结构目录

一、小程序文件结构和传统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为蓝色。小程序结构目录

上一篇:uni-app自定义导航栏(搜索框和按钮)


下一篇:一个最简单的LRUCache实现 (JAVA)