在网上好多人，喜欢找别人写好的一些线上的项目源码，比较完整的。想着学习的更加实用和全面一点。
这无可厚非，但是，我发现有好多人并不是很在意官方提供的demo。比如ionic的tabs demo就没有什么人看。
我个人觉得既然官方把这样的demo推到了入门的地位，那必然是有它的道理的。所以我很喜欢从官方的demo开始学习，因为它足够简单，又足够让我明白它的用法和逻辑。
上一节课，我们已经讲解了如何新建一个项目，并且讲解了工具里面的一部分功能。剩下的在项目开发中比较常用的，不容易被忽略的，上一节就没详细讲解。会在之后的开发中介绍。
一、目录结构
小程序规定一个页面对应四个文件。（其中有的必须有的非必需，太麻烦了，反正记下来四个文件就好）
*.js 小程序的逻辑文件
*.json 小程序的配置文件
*.wxss 小程序的样式文件--相当于css
*.wxml 小程序的页面结构--相当于html
每一个子页面都对应四个上述的文件。
在根目录下还有三个文件，可以理解为存放公共配置、公共逻辑、公共样式的地方。这么理解吧，小程序会首先使用这外面的三个文件。如果子页面自己的相应文件做了修改，则会使用子页面的配置和样式。
接下来我们打开app.json文件
看第一个page属性，是一个字符串数组，用于配制子页面的文件路径。
注意数组的第一项就是打开小程序时的主页面。
还有这里有一个新建页面的技巧，最开始我新建一个页面是先新建一个文件夹，然后在文件夹里面新建四个文件，最后再在配置表里面添加路径。
有一次由于拼写错误，发现，工具自动新建里一个文件夹和页面所需的文件，并且文件里面还写了必要的内容。
如：在page里面写上"pages/test/test". 按ctrl+s保存（Mac用command+s），工具就自动创建了四个文件了。
接着看app.json里面的window属性。
window属性用来配置小程序的状态栏、导航栏、标题和窗口的背景色。注意每个子页面都可以在自己的json文件里面，单独对上述这四个属性做单独的配置。
除了图中四种属性，还有enablePullDownRefresh 是否开启下拉刷新。
接下来我们打开app.wxss
这个属于公共的样式表，只要在这个文件中定义的样式文件，可以在任何子页面中调用。
而在子页面中定义的独立样式，则只能在自己的结构文件中调用，子页面之间不能相互调用。
/util/util.js
工具文件，编辑一些常用工具方法，用的比较多的就是用来配置服务器请求路径。
这应该是用来做公用方法的，但是公用方法又可以写在app.js中，所以我也不是太清楚，这个文件的意义是什么。
接下来我们来看一下，我们刚刚新建的test.js文件。
// pages/test/test.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
这个新建的文件，比demo现有的代码能让我们更清楚的知道小程序的生命周期。
我们现在每一个勾子函数中打印出相应的日志。
如：
修改app.json文件，将test页面修改成默认页面
补充一点
打开工具-调试-console查看，打印日志。可以查看勾子函数的调用顺序，了解小程序的生命周期，其他没打印的函数，看名字，应该能明白。
其中两个函数，这里可以重复提一下。onPullDownRefresh（监听用户下拉动作）、onReachBottom（页面上拉触底事件的处理函数）
这两个函数onPullDownRefresh用于下拉刷新页面，可参考微信朋友圈，下拉拉取朋友们最新发布的朋友圈消息。
onReachBottom是用户加载更多列表，同样参考微信朋友圈，下拉拉取更多朋友圈列表历史记录，分页加载更多数据的概念。
接下来让我们重新回到最原始的demo里查看index里面的内容。
修改app.json,将"pages/index/index"设置成page数组的第一项，是index页面作为启动页。
打开// pages/index/index.wxml
现在把所有的关注点集中在上图我标记的位置（我打开的时候我电脑里面的demo我做过一点点修改，可能跟原来的不太一样，但是这几个地方没有变化，不要太较真哦）
1、先看第二行class="container"这个和传统的html中的用法一样，只是对应文件wxss中的.container{}
2、标签，在小程序中，所使用的标签全是微信做过封装的，可以按照html的标签去理解记忆这些标签，但是不能完全等同，应该查阅详细的api看看有什么属性，便于后续的开发，可能你要的什么功能，微信已经封装好了。
3、src=“{{地址变量}}”’这个和ng中的绑定数据很像，只是直接使用src，注意双大括号要当在双引号里面。
4、在标签中的绑定数据也是用双{{}}，现在好多新的框架基本上都是这么做的，注意这里双大括号不需要放在双引号里面。
5、bindtap="bindTiewTap" 事件绑定，这里先略过，后续的详细的出一节讲解所有的绑定事件，也可查阅官方文档。
接下来我们先深入的看小程序的数据绑定，这里我们从上图中的标记4{{'你好，'+userInfo.nickName}}入手了解。
这里可以知道这里的数据绑定了userInfo变量的nickName属性。那这个userInfo又是从哪里来的呢？
接着我们打开文件// pages/index/index.js
看第五行的data，我们知道userInfo是这个data的一个属性。这里我们知道小程序把界面绑定在了他相对应的js的data中。
这么理解吧，js中的Page对应一个界面。
看第3行，创建了一个变量app通过全局方法，getApp()获取了当前应用实例。
在19行中调用了app.getUserInfo的方法。这里可以跟进查看到上一层的app.js中。
这里我们就知道了，在index.js中调用getApp()方法获取的就是app.js中的这个App();
接下来我们把注意力集中在getUserInfo这个方法中，这里出现一个wx.login()方法。
这里我们并没有人任何一个地方定义了wx变量，所以这里可以知道，小程序中把wx作为官方API的保留关键字。这里调用了微信的登录接口，获取了用户数据。
那么这一整个流程就是进入index界面-调用onload方法-调用app.js中的getUserInfo方法-调用微信登录接口-获取用户数据-通过回调函数cb-回调到index.js中-
将数据赋值给data的userInfo-传递到界面中的{{userInfo.nikeName}}实现数据展示。
其实要深究的话这个demo还有不少内容，介于篇幅将其他的内容放于后续的章节中讲解。
这节课的内容就到这里结束了。
感谢您的阅读。
