Tutoriel pratique de développement de programmes WeChat Mini : Déverrouillage gestuel

Cet article présente principalement les informations pertinentes sur le déverrouillage gestuel dans le tutoriel pratique de développement de l'applet WeChat. Cet article vous présente étape par étape de manière très détaillée et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

.

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

Cette démo de déverrouillage par geste utilise https://github.com/lvming6816077/H5lock ce L'algorithme et la logique principale du projet ont été intégrés dans l'applet WeChat. La syntaxe a été modifiée à de nombreux endroits pour s'adapter à l'applet. Des fonctions telles que la fenêtre et le document ont été supprimées. l'interface et les tiers Bibliothèque, qui seront présentés ci-dessous.

Mais malheureusement, cette démo ne peut être jouée que sur des outils de développement. Lorsqu'elle est testée sur une vraie machine, dès que le doigt glisse, la page défile, et les gestes ne peuvent pas être utilisés.

Analysons deux points qui peuvent être tirés de cet exemple.

1. Présentation d'une bibliothèque tierce

La bibliothèque H5lock que nous avons mentionnée ci-dessus est une bibliothèque écrite par un maître et est spécialement utilisée pour H5. Fonction. Nous l'avons modifié et introduit dans le mini programme.

Nous discutons ici de la manière d'introduire des bibliothèques js tierces dans des mini-programmes, qui sont divisés en les étapes suivantes :

(1) Modularisation

Dans le code du mini-programme , seuls seuls les modules qui peuvent être exportés via module.exports peuvent être référencés, donc dans la première étape, nous devons effectuer la première transformation du code et exporter les exportations :

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) Transformer certaines fonctions dans des bibliothèques tierces

L'applet ne prend pas en charge les fonctions ou API suivantes :

fenêtre
document
frames
auto
localisation
navigateur
localStorage
historique
caches
écran
alerte
confirmation
invite
XMLHttpRequest
WebSocket

Recherchez les codes liés à ce qui précède un par un et trouvez des moyens de les remplacer.

Le plus courant est généralement l'opération sur les documents. Les bibliothèques tierces l'utilisent principalement pour référencer dom et le définir ou le modifier. Ceci peut être intelligemment contourné grâce aux techniques de découplage évoquées au point 2 ci-dessous. Le reste dépend des développeurs eux-mêmes, et il n'est pas possible de lister ici toutes les situations.

La démo de cet article utilise la méthode class pour transformer la bibliothèque tierce.

2. Une manière de découpler

Lors du développement de petits programmes, si le js d'une page est trop long, voire plus de mille lignes, alors il faut pensez à diviser ce fichier en plusieurs. Ou le code logique que vous écrivez peut être partagé par plusieurs pages, alors vous devez également séparer le code du js de cette page.

Cela amène à un problème évident : dans d'autres fichiers, si vous souhaitez modifier les données de la page, cela ne peut pas être trop couplé, car votre code logique sera référencé dans la page A., sera également référencé à la page B, l'opération setData ne peut donc pas être placée dans ce fichier partagé.

Alors, y a-t-il un moyen de le découpler ?

À l'heure actuelle, vous pensez peut-être au mécanisme de déclenchement utilisé dans le développement de pages ordinaires. Malheureusement, cela ne peut être lié qu'au dom. Ou peut-être avez-vous utilisé la bibliothèque http://www.php.cn/ pour déclencher certaines opérations spécifiques via des modifications dans la machine à états. Cette méthode est très intelligente. Il est recommandé aux développeurs qui ne sont pas entrés en contact avec cette bibliothèque de l'apprendre. .

Mais nous n'avons pas besoin d'introduire une autre bibliothèque. Ici, écrivons-en une simple. C'est aussi simple que quelques lignes de code.

Le code est ici : 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);
});
};

Comment utiliser cette bibliothèque ? Analysez le processus général. C'est en fait très simple. Il s'agit d'ajouter une méthode de déclenchement à l'application. Lorsqu'elle est appelée, vérifiez si la méthode onXXX est dans la page actuelle. Ce nom de méthode est transformé à partir du paramètre eventType, tel que app.trigger('textChange'), puis nous verrons ici s'il existe une méthode onTextChange sur la page. En fait, cette méthode de découplage définit essentiellement une spécification.

La page d'accueil est introduite dans app.js et appelée dans onLaunch :

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

Puis dans le fichier extrait partagé, où setData doit être utilisé, écrivez-le sous la forme suivante :

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

Ajoutez ensuite la réponse à ce déclencheur dans le code js de la page :

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

C'est OK après avoir terminé ces trois étapes.

Ce qui précède est un tutoriel pratique sur le développement d'applets WeChat basé sur le déverrouillage gestuel présenté par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, laissez-moi un message et l'éditeur vous répondra. à vous à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles liés au didacticiel pratique de développement de programmes WeChat Mini sur le déverrouillage gestuel, veuillez faire attention au site Web PHP chinois !