WeChat 애플릿의 코드 분석: 2. 로직 레이어

이 글에서는 주로 WeChat 애플릿의 세 가지 중요한 기능인 App()getApp()Page()와 페이지, 데이터 모듈화 기능.



앱()
App() 함수는 작은 프로그램을 등록하는데 사용됩니다. 애플릿의 수명주기 기능 등을 지정하는 객체 매개변수를 허용합니다.
객체 매개변수 설명:

속성 유형 설명 트리거 타이밍 onLaunch 함수 라이프 사이클 함수--애플릿 초기화 듣기 애플릿 초기화가 완료되면 onLaunch가 트리거됩니다(전역적으로 한 번만 트리거됨) onShow Function Life 순환 기능--작은 프로그램 표시 듣기 애플릿이 시작되거나 배경에서 전경 표시로 들어갈 때 onShow onHide 함수가 트리거됩니다. >라이프 사이클 함수--미니 프로그램 숨기기를 수신합니다. 미니 프로그램이 전경에서 백그라운드로 들어가면 onHide가 트리거됩니다. 기타 모두 개발자는 이 매개변수를 사용하여 액세스할 수 있는 Object 매개변수에 기능이나 데이터를 추가할 수 있습니다.

属性	类型	描述	触发时机
onLaunch	Function	生命周期函数--监听小程序初始化	当小程序初始化完成时，会触发onLaunch（全局只触发一次）
onShow	Function	生命周期函数--监听小程序显示	当小程序启动，或从后台进入前台显示，会触发onShow
onHide	Function	生命周期函数--监听小程序隐藏	当小程序从前台进入后台，会触发onHide
其他	Any	开发者可以添加任意的函数或数据到Object参数中，用this可以访问

전경 및 배경 정의: 사용자가 왼쪽 상단을 클릭하여 닫는 경우 또는 장치 홈을 누릅니다. 키를 눌러 WeChat을 종료하면 미니 프로그램이 삭제되지 않지만 WeChat을 다시 시작하거나 미니 프로그램을 다시 열면 배경에서 전경으로 들어갑니다.
미니프로그램이 일정시간동안 백그라운드로 들어가거나, 시스템 리소스 사용량이 너무 높을 경우에만 진짜 소멸되나요? .

아아앙

코드 복사
getApp()
글로벌 getApp() 기능을 제공하고 있습니다. 미니 프로그램 예시.

아아앙

코드 복사
참고:
App()이 앱에 있어야 합니다. Node.js를 등록하세요. 한 개 이상 등록할 수 없습니다.
App()에 정의하지 마세요. 내의 함수에서 getApp()을 호출하려면 다음을 사용하세요. 이 앱 인스턴스를 가져올 수 있습니다.
전화하지 마세요 getCurrentPage() 아직 페이지가 생성되지 않았습니다.
getApp을 통해 인스턴스를 얻은 후 비공개적으로 라이프사이클 함수를 호출하지 마세요.


페이지
Page() 함수를 사용합니다. 페이지의 초기 데이터, 수명주기 기능, 이벤트 처리 기능 등을 지정하는 개체 매개변수를 허용합니다.
객체 매개변수 설명:

初始化数据
初始化数据将作为页面的第一次渲染。data将会以JSON的形式由逻辑层传至渲染层，所以其数据必须是可以转成JSON的格式：字符串，数字，布尔值，对象，数组。
渲染层可以通过WXML对数据进行绑定。
示例代码：

<view>{{text}}</view>  
<view>{{array[0].msg}}</view>  
Page({  
  data: {  
    text: &#39;init data&#39;,  
    array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]  
  }  
})

复制代码
事件处理函数
除了初始化数据和生命周期函数，Page中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行Page中定义的事件处理函数。
示例代码：

<view bindtap="viewTap"> click me </view>  
Page({  
  viewTap: function() {  
    console.log(&#39;view tap&#39;)  
  }  
})

复制代码
Page.prototype.setData()
setData函数用于将数据从逻辑层发送到视图层，同时改变对应的this.data的值。
注意：

• 直接修改this.data无效，无法改变页面的状态，还会造成数据不一致。

• 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
  

setData()参数格式
接受一个对象，以key，value的形式表示将this.data中的key对应的值改变成value。
其中key可以非常灵活，以数据路径的形式给出，如array[2].message，a.b.c.d，并且不需要在this.data中预先定义。
示例代码：

<!--index.wxml-->  
<view>{{text}}</view>  
<button bindtap="changeText"> Change normal data </button>  
<view>{{array[0].text}}</view>  
<button bindtap="changeItemInArray"> Change Array data </button>  
<view>{{obj.text}}</view>  
<button bindtap="changeItemInObject"> Change Object data </button>  
<view>{{newField.text}}</view>  
<button bindtap="addNewField"> Add new data </button>  
//index.js  
Page({  
  data: {  
    text: &#39;init data&#39;,  
    array: [{text: &#39;init data&#39;}],  
    object: {  
      text: &#39;init data&#39;  
    }  
  },  
  changeText: function() {  
    // this.data.text = &#39;changed data&#39;  // bad, it can not work  
    this.setData({  
      text: &#39;changed data&#39;  
    })  
  },  
  changeItemInArray: function() {  
    // you can use this way to modify a danamic data path  
    var changedData = {}  
    var index = 0  
    changedData[&#39;array[&#39; + index + &#39;].text&#39;] = &#39;changed data&#39;  
    this.setData(changedData)  
  },  
  changeItemInObject: function(){  
    this.setData({  
      &#39;object.text&#39;: &#39;changed data&#39;  
    });  
  },  
  addNewField: function() {  
    this.setData({  
      &#39;newField.text&#39;: &#39;new data&#39;  
    })  
  }  
})

复制代码
模块化
我们可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块。模块只有通过module.exports才能对外暴露接口。

// common.js  
function sayHello(name) {  
  console.log('Hello ' + name + '!')  
}  
module.exports = {  
  sayHello: sayHello  
}

复制代码

在需要使用这些模块的文件中，使用require(path)将公共代码引入。

var common = require('common.js')  
Page({  
  helloMINA: function() {  
    common.sayHello('MINA')  
  }  
})

复制代码下一篇我们会介绍视图层的WXML。

更多微信小程序之代码解析：二.逻辑层 相关文章请关注PHP中文网！