WeChat Mini Program Development Practical Tutorial: Gesture Unlocking

This article mainly introduces the relevant information of gesture unlocking in the practical tutorial of WeChat applet development. This article introduces you step by step in very detail and has reference value. Friends in need can refer to it

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

This gesture unlock demo uses https://github.com/lvming6816077/H5lock this The algorithm and main logic of the project were integrated into the WeChat applet. The syntax in many places was modified to adapt to the applet. Functions such as window and document were removed. New mechanisms were also added to decouple the operation of the interface and third parties. Library, which will be introduced below.

But unfortunately, this demo can only be played on development tools. When tested on a real machine, as soon as the finger slides, the page will scroll, and gestures cannot be used.

Let’s analyze two points that can be learned from this example.

1. Introducing a third-party library

The H5lock library we mentioned above is a library written by a great god and is specially used for H5. Function. We have modified it and introduced it into the mini program.

Here is a discussion on how to introduce third-party js libraries into mini programs, divided into the following steps:

(1) Modularization

In the mini program code, only Only modules that can be exported through module.exports can be referenced, so in the first step, we need to make the first modification to the code and export exports:

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) Transform some functions in third-party libraries

The applet does not support the following functions or APIs:

window
document
frames
self
location
navigator
localStorage
history
caches
screen
alert
confirm
prompt
XMLHttpRequest
WebSocket

Search for the codes related to the above one by one and find ways to replace them.

The most common one is generally document operation. Third-party libraries mainly use it to reference dom and set or modify it. This can be cleverly bypassed through the decoupling techniques discussed in point 2 below. The rest is up to the developers themselves, and there is no way to list all the situations here.

The demo of this article uses the class method to transform the third-party library.

2. A decoupling method

When developing small programs, if the js of a page is too long, or even exceeds thousands of lines, Then you need to consider splitting this file into several. Or the logic code you write can be shared by several pages, then you also need to separate the code from the js of this page.

This leads to an obvious problem: in other files, you need to modify the data on the page, but the coupling cannot be too great, because your logic code will be referenced in page A. , will also be referenced in page B, so the setData operation cannot be placed in this shared file.

So is there any way to decouple it?

At this time, you may think of the trigger mechanism used in ordinary page development. Unfortunately, this can only be bound to the dom. Or maybe you have used the library //m.sbmmt.com/ to trigger certain specific operations through changes in the state machine. This method is very clever. Developers who have not come into contact with this library are recommended to learn it.

But we don’t need to introduce another library yet. Here, let’s write a simple one. It's as simple as just a few lines of code.

The code is here: //m.sbmmt.com/

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);
});
};

How to use this library? Analyze the general process. It is actually very simple. It is to add a trigger method to the app. When it is called, check whether the onXXX method is in the current page. If so, call it. This method name is transformed from the eventType parameter, such as app.trigger('textChange'), then here we will find whether there is an onTextChange method on the page. So in fact, this decoupling method essentially defines a specification.

The homepage is introduced in app.js and called in onLaunch:

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

Then in the shared extracted file, Where setData needs to be used, write it in the following form:

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

Then add the response to this trigger in the js code of the page:

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

It will be ok after completing these three steps.

The above is the gesture unlocking practical tutorial on WeChat applet development introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. . I would also like to thank you all for your support of the PHP Chinese website!

For more articles related to WeChat Mini Program Development Practical Tutorial on Gesture Unlocking, please pay attention to the PHP Chinese website!