微信小程序入门篇（二）

上篇我们讲解了一下小程序的整体架构，今天来讲一下，一个页面的具体实现原理，好注意听，下面要开始画重点啦~哈哈

页面的构成

1. 还记得我们在上篇文章中讲解如何加入一个界面吗？在app.json中的pages加入要加的文件路径就可以啦，文件路径可以随便起，系统会自动创建出来的，那么我就接着之前的讲，我们之前创建了一个页面叫addPage，addPage里面包含四个文件* addPage.js、addPage.json、addPage.wxml、addPage.wxss*这四个对应的作用是什么呐？
   
   • addPage.js 页面数据的存储，网络请求的加载都是在这里
   • addPage.json 用于设置导航栏样式，和app.json性质一样，如果没设置样式，默认用app.json中的样式
   • addPage.wxml 页面的效果都在这里面，就是展现给用户的界面
   • addPage.wxss 页面样式设计，页面的一些样式属性都写在这里
     

页面的解析

1. addPage.js解析

   // pages/addPage/addPage.js
   Page({
   
     /**
      * 页面的初始数据
      */
     data: {
   
     },
   
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
       console.debug("onLoad--监听页面加载");
     },
   
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
     onReady: function () {
       console.debug("onReady--监听页面初次渲染完成");
     },
   
     /**
      * 生命周期函数--监听页面显示
      */
     onShow: function () {
       console.debug("onShow--监听页面显示");
     },
   
     /**
      * 生命周期函数--监听页面隐藏
      */
     onHide: function () {
       console.debug("onHide--监听页面隐藏");
     },
   
     /**
      * 生命周期函数--监听页面卸载
      */
     onUnload: function () {
       console.debug("onUnload--监听页面卸载");
     },
   
     /**
      * 页面相关事件处理函数--监听用户下拉动作
      */
     onPullDownRefresh: function () {
       console.debug("onPullDownRefresh--监听用户下拉动作");
     },
   
     /**
      * 页面上拉触底事件的处理函数
      */
     onReachBottom: function () {
       console.debug("onReachBottom--页面上拉触底事件的处理函数");
     },
   
     /**
      * 用户点击右上角分享
      */
     onShareAppMessage: function () {
       console.debug("onShareAppMessage--用户点击右上角分享");