How to unlock gesture in WeChat applet development tutorial

This article mainly introduces the materials related to gesture unlocking in the practical tutorial of mini-program development. This article describes in detail in steps and has reference value, for more information about how to unlock a gesture in the demo of small program development, see this article, for more information, see

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

This gesture unlocked the demo using the https://github.com/lvming6816077/H5lock of the project algorithm and the main logic, integrated into the small program, modified a lot of local syntax to adapt to the small program, remove functions such as window and document, and add a new mechanism to decouple interface operations and third-party libraries.

Unfortunately, this demo can only be used on development tools. when testing on a real machine, the page will scroll and the gesture will not work.

In this example, we will analyze two learning points.

1. introduce a third-party library

The H5lock library we mentioned above is a function specially designed for H5 by a Great God. We modified it and introduced it to the applet.

Here we will discuss how to introduce a third-party js library to a small program by taking the following steps:

(1) modularization

In the applet code, only modules exported through module. exports can be referenced. Therefore, in the first step, we need to perform the first transformation of the code and export the code using exports:

Module. exports = {...} if you want to perform some operations when you are introduced, you can use either of the following methods: // mylib. jsmodule. exports = (function () {// write the code you want to execute here... Return xxx; // return the method you want to export. if there are multiple methods, write them as one map })();... /// Reference and execute this in other files: let MyLib = require ('mylib. js'); let lib = Mylib (); lib. xxx (); // class in execution or es6: // mylib. jsmodule. exports = class {constructor () {// write the code you want to execute here} // Other methods xxx (){...}}... /// Reference and execute this in other files: let MyLib = require ('mylib. js '); let lib = new Mylib (); // use new to generate the class object lib. xxx (); // execute

(2) transform some functions in a third-party library

Applets do not support the following functions or APIs:

Window
Document
Frames
Self
Location
Navigator
LocalStorage
History
Caches
Screen
Alert
Confirm
Prompt
XMLHttpRequest
WebSocket

The code related to the above is searched one by one and replaced by another.

The most common operation is document operations. a third-party library uses it to reference the dom and set or modify it. This can be cleverly bypassed through the decoupling technique described in the following 2nd points. The rest depends on the developers themselves, and there is no way to list all the situations here.

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

2. a decoupling method

When developing small programs, if javascript code on a page is too long, or even more than thousands of lines, you should consider splitting the file into several. Or the logic code you write can be shared by several pages, so you also need to split the code from the js of this page.

This leads to a more obvious problem: in other files, you need to modify the data on the page, and cannot be too coupled, because of your logical code, it will be referenced in page A and in page B, so you cannot put the setData operation in this shared file.

Is there any way to decouple it?

At this time, you may think of the trigger mechanism used during normal page development. Unfortunately, this can only be bound to the dom. You may have used the # Library to trigger certain operations through changes in the state machine. this method is very clever and has never been used by developers of this library. we suggest you learn it.

However, we do not need to introduce another database. here, we will write a simple one. Just a few lines of code.

The code is here :#

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? An analysis of the general process is actually very simple. it is to add a trigger method to the app. when it is called, you can find whether the current page is in the onXXX method. If yes, you can call it. This method name is transformed by the eventType parameter, for example, app. trigger ('textchange'). here, we will find whether the onTextChange method exists on the page. Therefore, in essence, this decoupling method 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); // called in onLaunch, the incoming this is the app itself}, globalData :{}});

Then, in the shared extracted files, the setData format is as follows:

App. trigger ('titlechanged ', 'unlock it ');

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

Page ({... OnTitleChanged: function (newTitle) {// event of text change, custom this. setData ({title: newTitle });}...});

After completing these three steps, you are OK.

The above section describes how to unlock the gesture of the small program development practice tutorial. I hope it will help you. if you have any questions, please leave a message and I will reply to you in a timely manner. I would like to thank you for your support for PHP chinnet!

For more articles about how to unlock gestures in the practical tutorial of small program development, please follow the PHP Chinese network!