小程序配置文件

小程序结构目录

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

4、页面配置文件

每个页面都可以通过增加删改.json中的属性对本页面的窗口表现进行修改。页面中配置项在当前页面会覆盖app.json 的 window 中相同的配置项。

5、sitemap配置：

小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信索引。

一、模板语法

1、数据绑定

WXML 中的动态数据均来自对应 Page 的 data。
在WXML中，{ {msg}}
在.js中的pagedata中，data: {
msg:“hello,mina”}
将会显示msg对应的值的内容。