目录
1、应用目录结构
一个微信小程序 App 里面可能有多个界面，每一个界面包含四个文件（.js、.json、.wxml、.wxss），一般每一个界面所包含的文件存放到一个文件夹，然后将所有界面的文件夹存放到 pages 根文件夹下。全局 app.json 文件是进行一些全局配置，文件中的 pages 数组用来存储小程序的页面路径，这是一个小程序的页面加载入口。具体的目录结构如下图所示：
2、项目使用 git 管理
打开微信小程序开发工具，创建第一个微信小程序项目之后，为了方便项目代码的管理，最好将代码托管到 GitHub 上。大体步骤如下，首先打开小程序项目所在文件目录，git init、git add .、git commit -m '初始化项目' 这几个步骤初始化本地 git 仓库，并将代码提交到本地仓库区。第二步，到 github 上新建一个空项目，然后复制空项目的地址，再到本地文件目录下进行操作，具体步骤请移步到这里：传送门。
git 小知识：如果在学习小程序的过程中，为了并行管理每个知识点的代码，可以使用打 tag 的方式。每完成一个阶段性的学习之后，需要将其先进行提交：git add .、git commit -m '阶段1'，提交之后，给最新提交的代码 git tag <tagname> 打上 tag 。然后通过 git reset HEAD 回退到原始状态，然后在此基础上完成 阶段2 的编码，然后再提交、打 tag、回退 依次循环。也可以通过 git push --tags 将所有tag 版本的代码提交到远程仓库。等结业的时候，可以通过 git tag 罗列出每项 tag，如果向查看哪个知识点，只需要通过 git checkout <taggname> 切换到指定的tag下查看知识点代码。
3、几个基础知识点
（1）小程序的数据绑定 及 mustache语法 {{}}
小程序的数据绑定其实和 vue 很相似，如果向在 home 页面绑定一个数据，只需要到 home.js 文件中声明如下代码即可。
//home.wxml文件中的代码：
<view>Hello {{name}}</view> //页面上会显示: Hello World
<view>Age: {{age}}</view> //页面上会显示: Age: 18
//home.js文件中的代码：
Page({
data:{
name:World,
age:18
}
})（2）小程序的列表展示 wx：for
小程序的列表展示也和 vue 很相似，如果在 home 页面列表展示 students 数组中的信息，则需要进行如下操作：
//home.wxml文件中的代码：
<view wx:for="{{student}}">{{item.name}}--{{item.age}}</view> //页面会循环展示每个对象
//home.js文件中的代码：
Page({
data:{
students:[
{id:1,name:'erha1',age:18},
{id:2,name:'erha2',age:18},
{id:3,name:'erha3',age:18}
]
}
})（3）事件监听改变 data
小程序的事件监听和 vue 有所不同，首先是监听事件点击的关键字，小程序是：bindtap，其次是小程序内部没有定制发布订阅者模式来实现数据的双向绑定，所以为了让页面实现响应式，需要通过 setData() 方法来实现。
//home.wxml文件中的代码：
<view>当前数字：{{count}}</view>
<button size="mini",bindtap='handleBtnClick'>+</button>
//home.js文件中的代码：
Page({
data:{
count:0
},
handleBtnClick(){
//this.data.count += 1; //这种方式页面数据不会刷新，因为它不像vue有数据双向绑定的特性
this.setData({ count:this.data.count++ }) //通过 setData() 来实现页面数据的响应式
}
})4、小程序 MVVM 架构
Vue 的 MVVM 和小程序 MVVM 对比：Vue 是将 Model 层的数据通过数据绑定（Data Bindings）显示到视图层，然后在 View 层通过事件监听（DOM Listeners）来操作 Model 层的数据。小程序的 MVVM 架构是通过底层的 MINA 框架实现的，也是通过 数据绑定 和 DOM监听 。
MVVM 架构之所以好用，是因为 MVVM 架构将开发者从命令式编程转移到了声明式编程（不需要一步步操作 DOM）
（1）DOM Listeners：ViewModel 层可以将 DOM 的监听绑定到 Model 层。
（2）Data Bindings：ViewModel 层可以将数据的变量，响应式的反应到 View 层。
