微信小程序学习笔记2

一、小程序的启动
在app.json的pages中可以看到小程序的所有页面路径，写在pages字段第一个页面就是这个小程序的首页
微信客户端将首页代码装载然后通过小程序底层的一些机制，就可以渲染这个页面
然后我们看看小程序启动后执行的函数吧！
程序被执行会执行生命周期函数，这跟其它客户端程序一样。
小程序的生命周期函数是在app.js中onLaunch中

App({
  onLaunch: function () {
    // 小程序启动之后 触发
      }
      //小程序显示的时候触发
  onShow:function(){
    
    console.log("生命周期函数－坚挺小程序显示的时候触发");
  },
  //小程序隐藏的时候触发
  onHide:function(){
    
    console.log("生命周期函数－坚挺小程序隐藏的时候触发");
  },
  //全局的属性
  globalData: {
    userInfo: null
  }
})

二、程序与页面
我们可以看到一般一个文件夹下会有四种文件，客户端会先根据.json配置生成一个界面，顶部颜色和文字可以在json文件定义好。紧接着会装载页面的wxml结构和wxss样式。最后装在.js，js大体是这样的

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    
    // Do some initialize when page load.
  },
  onReady: function() {
    
    // Do something when page ready.
  },
  onShow: function() {
    
    // Do something when page show.
  },
  onHide: function() {
    
    // Do something when page hide.
  },
  onUnload: function() {
    
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    
    // Do something when pull down.
  },
  onReachBottom: function() {
    
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    
   // return custom share data when user share.
  },
  onPageScroll: function() {
    
    // Do something when page scroll
  },
  // Event handler.
  viewTap: function() {
    
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
    
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

Page是页面构造器，这个构造器就生成了一个页面。生成页面的时候会把data数据和wxml一起渲染出最终的结构，渲染结束后页面会受到onLoad回调，我们可以在回调中处理自己的逻辑。
三、组件
组件对应程序开发的各种控件，不过小程序控件进行了一定的整合。
组件列表：（七大类）
视图容器有view、scroll－view 、swiper（视图容器、可滚动视图容器、滑块视图容器）
基本内容：
icon（图标）text（文字）progress（进度条）
表单:
button（按钮）form（表单）input（输入框）。。。
……
好，接下来，开始小程序之旅！！！