Code-Analyse des WeChat-Applets: 2. Logikschicht

In diesem Artikel werden hauptsächlich die drei wichtigen Funktionen App()getApp()Page() im WeChat-Applet sowie die Initialisierung vorgestellt Seite, Datenmodularisierungsfunktion.



App()
App() wird zum Registrieren eines kleinen Programms verwendet. Akzeptiert einen Objektparameter, der die Lebenszyklusfunktion des Applets usw. angibt.
Objektparameterbeschreibung:

angezeigt wird ausgelöst. >

Attribut	Typ	Beschreibung	Trigger Timing
onLaunch	Funktion	Lebenszyklusfunktion – lauschen Sie der Initialisierung des Applets	Wenn die Initialisierung des Applets abgeschlossen ist, wird onLaunch ausgelöst (global nur einmal ausgelöst)
onShow	Funktion	Leben Zyklusfunktion – kleine Programmanzeige abhören	Wenn das Applet gestartet wird oder aus dem Hintergrund in den Vordergrund eintritt, wird onShow
onHide	Funktion	Lebenszyklusfunktion – auf das Ausblenden des Miniprogramms warten	Wenn das Miniprogramm aus dem Vordergrund in den Hintergrund tritt, wird onHide ausgelöst
Andere	Jeder	Entwickler können beliebige Funktionen oder Daten zum Objektparameter hinzufügen, auf die mit diesem zugegriffen werden kann

Vorder- und Hintergrunddefinition: Wenn der Benutzer zum Schließen auf die obere linke Ecke klickt, oder drückt das Gerät Home Wenn Sie die Taste drücken, um WeChat zu verlassen, wird das Miniprogramm nicht zerstört, sondern tritt in den Hintergrund ein, wenn Sie WeChat erneut starten oder das Miniprogramm erneut öffnen.
Erst wenn das Miniprogramm für eine bestimmte Zeit in den Hintergrund tritt oder die Systemressourcennutzung zu hoch ist, wird es wirklich zerstört .

//app.js  
App({  
  onLaunch: function () {  
    //调用API从本地缓存中获取数据  
    var logs = wx.getStorageSync('logs') || []  
    logs.unshift(Date.now())  
    wx.setStorageSync('logs', logs)  
  },  
  getUserInfo:function(cb){  
    var that = this;  
    if(this.globalData.userInfo){  
      typeof cb == "function" && cb(this.globalData.userInfo)  
    }else{  
      //调用登录接口  
      wx.login({  
        success: function () {  
          wx.getUserInfo({  
            success: function (res) {  
              that.globalData.userInfo = res.userInfo;  
              typeof cb == "function" && cb(that.globalData.userInfo)  
            }  
          })  
        }  
      });  
    }  
  },  
  globalData:{  
    userInfo:null,  
    ceshi:"I am global data"  
  }  
})

Code kopieren
getApp()
Wir stellen die globale Funktion getApp() zur Verfügung Rufen Sie die Applet-Instanz ab.

// other.js  
var appInstance = getApp()  
console.log(appInstance.globalData) // I am global data

Code kopieren
Hinweis:
App() muss vorhanden sein app .js und kann nicht mehr als eine registrieren.
Definieren Sie es nicht in App() getApp() in einer Funktion innerhalb von 🎜> aufzurufen, verwenden Sie dies kann die App-Instanz erhalten.
Nicht anrufen getCurrentPage(), die Seite wurde noch nicht generiert.
Nachdem Sie die Instanz über getApp erhalten haben, rufen Sie die Lebenszyklusfunktion nicht privat auf.


Seite
Page() wird zum Registrieren einer Seite verwendet. Akzeptiert einen Objektparameter, der die Anfangsdaten, die Lebenszyklusfunktion, die Ereignisverarbeitungsfunktion usw. der Seite angibt.
Objektparameterbeschreibung:

初始化数据
初始化数据将作为页面的第一次渲染。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中文网！