Analyse du code de l'applet WeChat : 2. Couche logique-Développement de mini-programmes-php.cn

Analyse du code de l'applet WeChat : 2. Couche logique

高洛峰

Libérer： 2017-03-02 13:12:35

original

1755 Les gens l'ont consulté

Cet article présente principalement les trois fonctions importantes App()getApp()Page() dans l'applet WeChat, ainsi que l'initialisation du page , fonction de modularisation des données.

App()
App() est utilisée pour enregistrer un petit programme. Accepte un paramètre d'objet, qui spécifie la fonction de cycle de vie de l'applet, etc.
description du paramètre d'objet :

sera déclenchée. >

Attribut	Type	Description	Déclencheur Timing
onLaunch	Fonction	Fonction de cycle de vie --écouter l'initialisation de l'applet	Lorsque l'applet Lorsque l'initialisation est terminée, onLaunch sera déclenché (uniquement déclenché une fois globalement)
onShow	Fonction	Vie fonction de cycle - écoute du petit affichage du programme	Lorsque l'applet est démarrée ou entre dans l'affichage au premier plan depuis l'arrière-plan, onShow
onHide	La fonction	Fonction de cycle de vie --écoutez le masquage du mini-programme	Lorsque le mini-programme entre en arrière-plan depuis le premier plan, onHide sera déclenché
Autres	Tous	Les développeurs peuvent ajouter n'importe quelle fonction ou donnée au paramètre Objet, accessible à l'aide de ceci

Définition du premier plan et de l'arrière-plan : Lorsque l'utilisateur clique sur le coin supérieur gauche pour fermer, ou appuie sur l'appareil Accueil Lorsque vous appuyez sur la touche pour quitter WeChat, le mini-programme n'est pas détruit, mais entre en arrière-plan lorsque vous redémarrez WeChat ou ouvrez à nouveau le mini-programme, il entrera au premier plan depuis l'arrière-plan.
Ce n'est que lorsque le mini-programme entre en arrière-plan pendant un certain temps ou que l'utilisation des ressources du système est trop élevée qu'il sera véritablement détruit. .

//app.js  
App({  
  onLaunch: function () {  
    //调用API从本地缓存中获取数据  
    var logs = wx.getStorageSync(&#39;logs&#39;) || []  
    logs.unshift(Date.now())  
    wx.setStorageSync(&#39;logs&#39;, 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"  
  }  
})

Copier après la connexion

Copier le code
getApp()
Nous fournissons la fonction globale getApp(), vous pouvez Obtenez l'instance d'applet.

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

Copier après la connexion

Copier le code
Remarque :
App() doit être présent app .js et ne peut pas en enregistrer plusieurs.
Ne le définissez pas dans App() < Pour appeler getApp() dans une fonction dans 🎜>, utilisez ceci peut obtenir l'instance d'application.
Ne pas appeler getCurrentPage(), la page n'a pas encore été générée.
Après avoir obtenu l'instance via getApp, n'appelez pas la fonction de cycle de vie en privé.

Page
< La fonction 🎜>Page() est utilisée pour enregistrer une page. Accepte un paramètre d'objet, qui spécifie les données initiales, la fonction de cycle de vie, la fonction de traitement des événements, etc. de la page.
description du paramètre d'objet :

初始化数据
初始化数据将作为页面的第一次渲染。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;}]  
  }  
})

Copier après la connexion

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

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

Copier après la connexion

复制代码
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;  
    })  
  }  
})

Copier après la connexion

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

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

Copier après la connexion

复制代码

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

var common = require(&#39;common.js&#39;)  
Page({  
  helloMINA: function() {  
    common.sayHello(&#39;MINA&#39;)  
  }  
})

Copier après la connexion

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

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