WeChat ミニ プログラム開発の実践的なチュートリアル: ジェスチャーによるロック解除

この記事では、WeChat アプレット開発の実践的なチュートリアルでジェスチャーロック解除の関連情報を主に紹介しており、必要な友人は参考にすることができます

コード: https : //github.com/jsongo/wx-gesture-lock

このジェスチャーロック解除デモは https://github.com/lvming6816077/H5lock を使用します。このプロジェクトのアルゴリズムとメインロジックは WeChat アプレットに統合され、変更されています。多くの場所の構文は小規模なプログラムに適合しており、ウィンドウやドキュメントなどの機能は削除されていますが、同時に、以下で紹介するインターフェイス操作とサードパーティ ライブラリを分離するための新しいメカニズムが追加されています。

しかし、残念ながら、このデモは開発ツールでのみ再生できます。実機でテストすると、指をスライドさせるとすぐにページがスクロールし、ジェスチャーが使用できなくなります。

この例から学べる 2 つのポイントを分析してみましょう。

1. サードパーティライブラリの導入

上記の H5lock ライブラリは、マスターによって作成され、H5 用に設計された関数です。それを修正してミニプログラムに導入しました。

ここでは、サードパーティの JS ライブラリをミニ プログラムに導入する方法について説明します。手順は次のとおりです。

(1) モジュール化

ミニ プログラム コードでは、 module.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) サードパーティ ライブラリの一部の関数を変換します

アプレットは次の関数または API をサポートしていません。

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

のコードを一つずつ検索して、それらに代わる方法を見つける。

最も一般的なものは、一般的にドキュメントの操作であり、サードパーティのライブラリは主に dom を参照し、設定または変更するために使用されます。これは、以下のポイント 2 で説明するデカップリング技術によって巧みに回避できます。残りは開発者自身次第であり、ここですべての状況をリストすることはできません。

この記事のデモでは、クラス メソッドを使用してサードパーティ ライブラリを変換します。

2. 分離の方法

小さなプログラムを開発する場合、ページの js が長すぎる場合、または数千行を超える場合は、ファイルを複数の個別に分割することを検討する必要があります。または、作成したロジック コードが複数のページで共有される場合は、このページの JS からコードを分離する必要もあります。

これは明らかな問題につながります。他のファイルで、ページ上のデータを変更したい場合、ロジック コードがページ A とページ B で参照されるため、結合が大きすぎてはなりません。で参照されるため、この共有ファイルに setData 操作を置くことはできません。

それで、それを切り離す方法はありますか?

現時点では、通常のページ開発で使用されるトリガー メカニズムを思い浮かべるかもしれませんが、残念ながら、これは dom にのみバインドできます。あるいは、ライブラリ //m.sbmmt.com/ を使用して、ステート マシンの変更を通じて特定の操作をトリガーしたことがあるかもしれません。この方法は、このライブラリを使用したことがない開発者には、学習することをお勧めします。 。

しかし、まだ別のライブラリを導入する必要はありません。ここで簡単なライブラリを作成しましょう。わずか数行のコードだけで簡単です。

コードはここにあります: //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);
});
};

このライブラリの使用方法?一般的なプロセスを分析するのは、実際には非常に簡単です。呼び出されたときに、onXXX メソッドが存在するかどうかを確認し、存在する場合はそれを呼び出します。このメソッド名は、app.trigger('textChange') など、eventType パラメーターから変換されます。ここでは、ページに onTextChange メソッドがあるかどうかを調べます。したがって、実際には、この分離方法は本質的に仕様を定義します。

ホームページは app.js で導入され、onLaunch で呼び出されます:

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

次に、setData を使用する必要がある共有抽出ファイルに、次の形式で記述します:

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

次に、ページの JS コードにこのトリガーへの応答を追加します:

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

これらの 3 つの手順を完了すると、OK になります。

上記は、編集者が紹介した WeChat アプレット開発に関するジェスチャーロック解除の実践的なチュートリアルです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

WeChat ミニプログラム開発のジェスチャーロック解除に関する実践的なチュートリアルに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。