위챗 미니프로그램 : 프로젝트 LifeCycle

유튜브 강좌 : youtu.be/FGnI5kezdO0

 

- 위챗 미니프로그램 프로젝트는 Applet과 여러 Pages로 구성되어진다. 

Applet의 주요 구성은 3개의 파일로 구성되며 프로젝트의 루트 디렉토리에 존재해야 합니다.

Applet	필수여부
app.js	예	Applet 자바스크립트
app.json	예	미니프로그램 공통 설정
app.wxss	아니오	미니프로그램 공통 스타일 시트

Page의 주요 구성은 4개의 파일로 구성되며 사용자 정의에 따라 디렉토리에 존재한다.

Page	필수여부
페이지명.js	예	Page 자바스크립트
페이지명.json	아니오	Page 설정
페이지명.wxml	예	Page 뷰
페이지명.wxss	아니오	Page 스타일 시트

 

 

- 위챗 미니프로그램 프로젝트의 LifeCycle은 다음과 같다.

첫번째 app.js의 LifeCycle은 아래 이미지처럼 OnLaunch()를 거쳐 OnShow()를 호출한다.

OnShow()에서 필요한 부분을 처리한 후 기본적으로 지정된 메인 Page의 onLoad()를 호출한다.

app.json

{
  "pages": [
    "pages/page1/page1", => 첫줄이 메인 Page로 지정
    "pages/page2/page2"
  ],
  .
  .
  .
}  

 

두번째 Page1.js의 LifeCycle은 아래 이미지처럼 onLoad() => onShow() => onReady()가 차례로 호출된다.

to Background : 먼저 page1.js의 onHide()호출후 app.js의 onHide()가 호출된다.

to Foreground : 먼저 app.js의 onShow()호출후 page1.js의 onShow()가 호출된다.

wx.navigateTo : page1에서 page2를 호출할때 사용하는 API이다.

이때 page1.js의 onHide()가 호출된후 page2.js의  onLoad() => onShow() => onReady()가 차례로 호출된다.

wx.navigateBack : 현재 page에서 이전 page로 돌아간다. 이때 page2.js의 onUnload()호출후 이전 page의 onShow()가 호출된다.

app.js 코드 :

App({
  onLaunch (options) {
    console.log("app : onLaunch");
  },
  onShow (options) {
    console.log("app : onShow");
  },
  onHide () {
    console.log("app : onHide");
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

app.json 코드 :

{
  "pages": [
    "pages/page1/page1",
    "pages/page2/page2"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

page1.js 코드 :

// pages/page1/page1.js
Page({

  /**
   * Page initial data
   */
  data: {

  },

  /**
   * Lifecycle function--Called when page load
   */
  onLoad: function (options) {
    console.log("page1 : onLoad()");
  },

  /**
   * Lifecycle function--Called when page is initially rendered
   */
  onReady: function () {
    console.log("page1 : onReady()");
  },

  /**
   * Lifecycle function--Called when page show
   */
  onShow: function () {
    console.log("page1 : onShow()");
  },

  /**
   * Lifecycle function--Called when page hide
   */
  onHide: function () {
    console.log("page1 : onHide()");
  },

  /**
   * Lifecycle function--Called when page unload
   */
  onUnload: function () {
    console.log("page1 : onUnload()");
  },

  /**
   * Page event handler function--Called when user drop down
   */
  onPullDownRefresh: function () {

  },

  /**
   * Called when page reach bottom
   */
  onReachBottom: function () {

  },

  /**
   * Called when user click on the top right corner to share
   */
  onShareAppMessage: function () {

  },

  goPage2: function() {
    wx.navigateTo({
      url: '/pages/page2/page2',
    })
  }
})

page1.wxml 코드 :

<!--pages/page1/page1.wxml-->
<text>pages/page1/page1.wxml</text>
<button bindtap="goPage2">go page2</button>

page2.js 코드 :

// pages/page2/page2.js
Page({

  /**
   * Page initial data
   */
  data: {

  },

  /**
   * Lifecycle function--Called when page load
   */
  onLoad: function (options) {
    console.log("page2 : onLoad()");
  },

  /**
   * Lifecycle function--Called when page is initially rendered
   */
  onReady: function () {
    console.log("page2 : onReady()");
  },

  /**
   * Lifecycle function--Called when page show
   */
  onShow: function () {
    console.log("page2 : onShow()");
  },

  /**
   * Lifecycle function--Called when page hide
   */
  onHide: function () {
    console.log("page2 : onHide()");
  },

  /**
   * Lifecycle function--Called when page unload
   */
  onUnload: function () {
    console.log("page2 : onUnload()");
  },

  /**
   * Page event handler function--Called when user drop down
   */
  onPullDownRefresh: function () {

  },

  /**
   * Called when page reach bottom
   */
  onReachBottom: function () {

  },

  /**
   * Called when user click on the top right corner to share
   */
  onShareAppMessage: function () {

  },
  
  goBack: function () {
    wx.navigateBack({
      delta: 2
    })
  }

})

page2.wxml 코드 :

<!--pages/page2/page2.wxml-->
<text>pages/page2/page2.wxml</text>
<button bindtap="goBack">go back</button>