Wechat applet learning notes 2

One 、 Start of applet
stay app.json Of pages You can see all the page paths of the applet , Written in pages The first page of the field is the homepage of the applet
Wechat client loads the homepage code and then passes some mechanisms at the bottom of the applet , You can render this page
Then let's look at the functions executed after the applet starts ！
When the program is executed, it will execute the life cycle function , This is the same as other client programs .
The life cycle function of the applet is in app.js in onLaunch in

App({
  onLaunch: function () {
    //  After the applet starts   Trigger 
      }
      // Triggered when the applet is displayed 
  onShow:function(){
    
    console.log(" Life cycle function － Triggered when the firm applet displays ");
  },
  // Triggered when the applet is hidden 
  onHide:function(){
    
    console.log(" Life cycle function － Triggered when the firm applet is hidden ");
  },
  // Global properties 
  globalData: {
    userInfo: null
  }
})

Two 、 Programs and pages
We can see that there are usually four kinds of files under one folder , The client will first according to .json Configuration generates an interface , The top color and text can be in json The file defines . Then the page will be loaded wxml The structure and wxss style . Finally installed in .js,js It's basically like this

//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 It's a page builder , This constructor generates a page . When generating pages, you will put data Data and wxml Render the final structure together , After rendering, the page will be onLoad Callback , We can handle our own logic in the callback .
3、 ... and 、 Components
Components correspond to various controls of program development , However, applet controls have been integrated .
Component list ：（ Seven categories ）
View container has view、scroll－view 、swiper（ View container 、 Scrollable view container 、 Slider view container ）
The basic content ：
icon（ Icon ）text（ written words ）progress（ Progress bar ）
Forms :
button（ Button ）form（ Forms ）input（ Input box ）...
……
good , Next , Start the journey of applet ！！！