小程序文件结构介绍

参考博客

微信小程序开发入门
微信小程序 app.json 配置
微信小程序学习(2):小程序目录结构介绍

整体思路

什么是小程序
小程序结构介绍
API介绍

什么是小程序

小程序使用的微信自己开发 MINA 框架,提供了视图层描述语言，WXML 和 WXSS 以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

小程序结构介绍

下载小程序开发工具，创建一个最简单的demo，树结构如下：

全局文件：
其中app.js、app.json、app.wxss 是必不可少的，是小程序生成的依赖文件。
app.js 监听并控制这整个程序的生命周期，也是全局变量声明的地方

上述API介绍：
App : 注册一个小程序
onLunch :程序加载时执行的方法
getStorageSync：以同步的方式获取本地缓存
setStorageSync：设置缓存
wx.getUserInfo: 获取用户信息

app.json 是对整个小程序的全局配置。不可注释。
pages为注册页面的列表，均为相对路径，省去了后缀名，程序默认显示列表第一个。

app.wxss 是整个小程序的公共样式表。
其中：
apx 是尺寸单位，可根据屏幕宽度自适应大小。与之对应的有rem：规定屏幕宽度为20rem；1rem = (750/20)rpx 。

index文件内容：
index.js ,index.wxml ,index.wxss,

*index.wxml页面的结构（wxml）
这是一个展示页面，作用于html相同。可以看出，内容分块均采用 view 标签，这也很容易让人想到Android 中的布局，但其实只是更多的是 div 标签的另一个版本，在这里面有很多 MINA 自定义的属性，而且在我们在其中也看到了{{ }}样式的值操作，这也很容易让人联想到 angularJS 中的数据双向绑定，在 MINA 中也是支持的。
同时，页面的展示，均需要在小程序全局的json配置文件中配置，前面已有说明。

index.js逻辑（js）
getApp() 获取应用实例
Page ： 声明页面。
data: 定义数据
bindViewTap ：为在view中绑定的是tap事件定义操作方法。
wx.navigateTo ：导航到响应页面。
onLoad ： 定义页面加载时的事件。在这里使用了在全局 app.js 中定义的回调函数，将data中的数据更新，由于双向的绑定，页面中的 userInfo 实例也会更新，显示出您的头像和昵称。

index.wxss样式（wxss）
中同样定义了一些样式，写法思路与css文件基本一致，只是不需要再去关心屏幕适配问题。

.json为配置文件，用于修改导航栏显示样式等

子文件中的 .json只能设置window相关的配置项，以决定本页面的窗口表现，所以无需写window这个键
window ：用于设置小程序的状态栏、导航条、标题、窗口背景色。