全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo

在网上好多人，喜欢找别人写好的一些线上的项目源码，比较完整的。想着学习的更加实用和全面一点。

这无可厚非，可是，我发现有好多人并非很在乎官方提供的demo。

好比ionic的tabs demo就没有什么人看。

我我的以为既然官方把这样的demo推到了入门的地位，那必然是有它的道理的。

因此我很喜欢从官方的demo开始学习，由于它足够简单，又足够让我明白它的用法和逻辑。

上一节课，咱们已经讲解了如何新建一个项目，而且讲解了工具里面的一部分功能。

剩下的在项目开发中比较经常使用的，不容易被忽略的，上一节就没详细讲解。会在以后的开发中介绍。

1、目录结构

小程序规定一个页面对应四个文件。（其中有的必须有的非必需，太麻烦了，反正记下来四个文件就好）

*.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页面修改为默认页面

-------------------2017年5月14日编辑到这里，2017年7月28日接着编辑，有点忘记这小节要讲什么了，补充一点算一点吧。---------------------------

打开工具-调试-console查看，打印日志。能够查看勾子函数的调用顺序，了解小程序的生命周期，其余没打印的函数，看名字，应该能明白。

其中两个函数，这里能够重复提一下。onPullDownRefresh（监听用户下拉动做）、onReachBottom（页面上拉触底事件的处理函数）

这两个函数onPullDownRefresh用于下拉刷新页面，可参考微信朋友圈，下拉拉取朋友们最新发布的朋友圈消息。

onReachBottom是用户加载更多列表，一样参考微信朋友圈，下拉拉取更多朋友圈列表历史记录，分页加载更多数据的概念。

接下来让咱们从新回到最原始的demo里查看index里面的内容。

修改app.json,将"pages/index/index"设置成page数组的第一项，是index页面做为启动页。

打开// pages/index/index.wxml

如今把全部的关注点集中在上图我标记的位置（我打开的时候我电脑里面的demo我作过一点点修改，可能跟原来的不太同样，可是这几个地方没有变化，不要太较真哦）

一、先看第二行class="container"这个和传统的html中的用法同样，只是对应文件wxss中的.container{}

二、标签，在小程序中，所使用的标签全是微信作过封装的，能够按照html的标签去理解记忆这些标签，可是不能彻底等同，应该查阅详细的api看看有什么属性，便于后续的开发，可能你要的什么功能，微信已经封装好了。

三、src=“{{地址变量}}”’这个和ng中的绑定数据很像，只是直接使用src，注意双大括号要当在双引号里面。

四、在标签中的绑定数据也是用双{{}}，如今好多新的框架基本上都是这么作的，注意这里双大括号不须要放在双引号里面。

五、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还有很多内容，介于篇幅将其余的内容放于后续的章节中讲解。

这节课的内容就到这里结束了。

感谢您的阅读。

我是小虎（最近把名字改为了莽夫，以为比较符合个人性格特征，说好的行不更名坐不改姓呢，捂脸），但愿你开心。

有什么问题能够直接联系个人我的微信yu_xiaohiu

但愿你们关注个人我的公众号ionic_