Praktisches Tutorial zur WeChat Mini-Programmentwicklung: Entsperren von Gesten

Dieser Artikel stellt hauptsächlich die relevanten Informationen zum Entsperren von Gesten im praktischen Tutorial der WeChat-Applet-Entwicklung vor. Dieser Artikel führt Sie Schritt für Schritt ausführlich ein und hat Referenzwert

Code: https://github.com/jsongo/wx-gesture-lock

Diese Demo zum Entsperren von Gesten verwendet https://github.com/lvming6816077/H5lock dieses Algorithmus und Hauptlogik des Projekts wurden an vielen Stellen zur Anpassung an das Applet integriert. Gleichzeitig wurden neue Mechanismen hinzugefügt, um die Bedienung zu entkoppeln die Schnittstelle und die Bibliothek Dritter, die im Folgenden vorgestellt werden.

Aber leider kann diese Demo nur auf Entwicklungstools gespielt werden. Beim Testen auf einer echten Maschine wird die Seite gescrollt, sobald der Finger bewegt wird, und Gesten können nicht verwendet werden.

Lassen Sie uns zwei Punkte analysieren, die aus diesem Beispiel gelernt werden können.

1. Einführung einer Bibliothek eines Drittanbieters

Die oben erwähnte H5lock-Bibliothek ist eine von einem Master geschriebene Bibliothek, die speziell für verwendet wird H5. Funktion. Wir haben es modifiziert und in das Miniprogramm eingeführt.

Hier diskutieren wir, wie man JS-Bibliotheken von Drittanbietern in Miniprogramme einführt, die in die folgenden Schritte unterteilt sind:

(1) Modularisierung

Im Miniprogrammcode Nur Module, die über module.exports exportiert werden können, können referenziert werden. Daher müssen wir im ersten Schritt die erste Änderung am Code vornehmen und Exporte exportieren:

module.exports = {
...
}
如果要在被引入的时候，执行一些操作，可以用以下两种方式：
//// mylib.js
module.exports = (function() {
// 这里写上你要执行的代码
…
return xxx; //返回你要导出的方法，如果多个就写成一个map
})();
…
//// 其它文件中这么引用和执行：
let MyLib = require('mylib.js');
let lib = Mylib();
lib.xxx(); // 执行
或es6中的class：
//// mylib.js
module.exports = class {
constructor() { // 
// 这里写上你要执行的代码
}
// 其它方法
xxx() { 
...
}
}
…
//// 其它文件中这么引用和执行：
let MyLib = require('mylib.js');
let lib = new Mylib(); // 用new来生成类的对象
lib.xxx(); // 执行

(2) Transformieren Sie einige Funktionen in Bibliotheken von Drittanbietern

Das Applet unterstützt die folgenden Funktionen oder APIs nicht:

Fenster

Dokument

Frames
Selbst
Standort
Navigator
Lokaler Speicher
Verlauf
Caches
Bildschirm
Warnung
Bestätigen
Eingabeaufforderung
XMLHttpRequest
WebSocket

Suchen Sie nacheinander nach den oben genannten Codes und finden Sie Möglichkeiten, diese zu ersetzen.

Die häufigste Methode ist im Allgemeinen die Dokumentoperation. Bibliotheken von Drittanbietern verwenden sie hauptsächlich, um auf Dom zu verweisen und es festzulegen oder zu ändern. Dies kann durch die in Punkt 2 unten besprochenen Entkopplungstechniken geschickt umgangen werden. Der Rest bleibt den Entwicklern selbst überlassen und es gibt hier keine Möglichkeit, alle Situationen aufzulisten.

Die Demo in diesem Artikel verwendet die Klassenmethode, um die Bibliothek eines Drittanbieters zu transformieren.

2. Eine Möglichkeit zur Entkopplung

Wenn bei der Entwicklung kleiner Programme die js einer Seite zu lang sind, sogar mehr als tausend Zeilen, dann müssen Sie es tun Erwägen Sie, diese Datei in mehrere aufzuteilen. Oder der von Ihnen geschriebene Logikcode kann von mehreren Seiten gemeinsam genutzt werden. Dann müssen Sie den Code auch von den js dieser Seite trennen.

Dies führt zu einem offensichtlichen Problem: Wenn Sie in anderen Dateien die Daten auf der Seite ändern möchten, dürfen diese nicht zu stark gekoppelt werden, da auf Seite A auf Ihren Logikcode verwiesen wird auf Seite B, daher kann der setData-Vorgang nicht in dieser freigegebenen Datei platziert werden.

Gibt es also eine Möglichkeit, es zu entkoppeln?

Zu diesem Zeitpunkt denken Sie vielleicht an den Auslösemechanismus, der bei der normalen Seitenentwicklung verwendet wird. Leider kann dies nur an den Dom gebunden werden. Oder vielleicht haben Sie die Bibliothek http://www.php.cn/ verwendet, um bestimmte Operationen durch Änderungen in der Zustandsmaschine auszulösen. Entwicklern, die noch nicht mit dieser Bibliothek in Berührung gekommen sind, wird empfohlen, sie zu erlernen .

Aber wir müssen noch keine weitere Bibliothek vorstellen. Hier schreiben wir eine einfache. Es ist so einfach wie nur ein paar Zeilen Code.

Der Code ist hier: http://www.php.cn/

module.exports = function(app) {
app && (app.trigger = function(eventType, data) {
var pages = getCurrentPages(),
curPage = pages[pages.length-1],
methodName = 'on' + eventType.charAt(0).toUpperCase() + eventType.substr(1),
callback = curPage[methodName];
callback && callback.call(curPage, data);
});
};

Wie verwende ich diese Bibliothek? Analysieren Sie den allgemeinen Prozess. Es besteht darin, der App eine Triggermethode hinzuzufügen. Überprüfen Sie, ob sich die onXXX-Methode auf der aktuellen Seite befindet. Dieser Methodenname wird aus dem eventType-Parameter umgewandelt, z. B. app.trigger('textChange'). Hier finden wir dann heraus, ob es auf der Seite eine onTextChange-Methode gibt. Tatsächlich definiert diese Entkopplungsmethode im Wesentlichen eine Spezifikation.

Die Homepage wird in app.js eingeführt und in onLaunch aufgerufen:

var event = require('lib/event.js');
App({
onLaunch: function () {
event(this); // 在onLaunch里调用，传入的this就是app本身
},
globalData:{
}
});

Dann in der freigegebenen extrahierten Datei, wo setData verwendet werden muss, schreiben Sie es in der folgenden Form:

app.trigger('titleChanged', '请解锁');

Fügen Sie dann die Antwort auf diesen Trigger im js-Code der Seite hinzu:

Page({
…
onTitleChanged: function(newTitle) { // 文字变化的事件，自定义
this.setData({
title: newTitle
});
}
...
});

Nach Abschluss dieser drei Schritte ist es in Ordnung.

Das obige ist ein praktisches Tutorial zur WeChat-Applet-Entwicklung, das vom Herausgeber eingeführt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht pünktlich zu Ihnen. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Artikel zum praktischen Tutorial zur WeChat Mini-Programmentwicklung zum Entsperren von Gesten finden Sie auf der chinesischen PHP-Website!