微信开发之旅———Day3（小程序框架——下）

昨天讲到整个微信小程序的大框架。今天来深入探究一波。
具体每个页面由什么组成呢？怎么运行起来的呢？
（本期有前端基础的同学可以直接跳过啦！！！！）

#页面结构

先来回顾一下每一个页面的组成

• page
  * page.wxml
  * page.wxss
  * page.js
  * page.json

简单的说微信的每个分为三层：逻辑层、视图层、数据层

##wxml
wxml可以称他为标签，或是组件。比如一个按钮，一个输入框，一个滑动条，都是由这些一个一个的组件组成的。

<text>这是文本</text>
<input>这是输入框</input>
<button>这是按钮</button>

这里就是一个最简单不过的示例了，大家可以手动操作一下，试验一下~
微信里的组件真的有很多很多，这里就不一一介绍了，详情请戳微信组件文档
而我们作为弱小的初学者，只需要知道一件事，一个页面上的所有内容（文字，图片，视频，音频等等等等）全部都是wxml文件去完成的。

##wxss
当你沉浸在第一个组件的喜悦当中时，有没有同学发现了一个严重的问题就是我们的页面是不是和别人的页面有那么一丝丝区别呢?

暴风哭泣ing。。。
怎么样才能拯救我们的小程序呢？wxss来帮你！
wxss可以按照你的心愿将每一个组件摆放到最适合它的位置。同时可以改变大小，字体，颜色等等等等一系列你想做的事，帮我们美化我们的页面。
这里同样不做过于细致的讲解，详情请戳----》官方文档

##js
明人不说暗话，美化完页面我们的工作并没有结束，这时我们的页面说白了就是一个图片而已，仅仅可能上面有几个按钮可以点击，仅此而已！
此时此刻，此情此景，唯有js可以拯救你我于水火之中。js就是用来写页面逻辑和每个地方的操作，跳转动画等等一系列操作的地方。有了js，我们的页面终于动了起来，此时才能被称之为小程序。这里相较于app.js也会有一个注册方法Page（）方法。

Page()的参数及其描述

参数	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数——监听页面加载
onReady	Function	生命周期函数——监听页面加载
onShow	Function	生命周期函数——监听页面加载
onHide	Function	生命周期函数——监听页面加载
onUnload	Function	生命周期函数——监听页面加载
onPullDownRefresh	Function	页面相关事件处理函数——监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角分享
其他	Any	开发者自定义函数或数据

代码示例：

// pages/ts/ts.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

##json
一个配置文件而已啦，仅仅能配置背景颜色和字颜色而已啦，详情参见上一讲。值得一提的是，页面的json配置只支持window配置项。

##其余想说的话

其实还可以再讲一下页面的周期和小程序的生命周期已经其内部的跳转方式，但是这会讲肯定会很抽象，所以我们先上手来一波实践再回过头来讨论这个问题。那时我们会更容易理解这里。

---

哈哈哈明天见咯~

上一篇：微信开发之旅———Day2（小程序框架——上）
下一篇：微信开发之旅———Day4（hello world~）