這篇文章主要介紹了微信小程式開發實戰教程之手勢解鎖的相關資料,本文分步驟給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
代碼：https://github.com/jsongo/wx-gesture-lock
這個手勢解鎖的demo使用了https://github.com/lvming6816077/H5lock 這個專案的演算法和主邏輯，整合到微信小程式來，修改了很多地方的語法來適配小程序，去掉了window、document等函數，同時也加入了新的機制來解耦介面的操作和第三方庫，這個下面會介紹到。
不過可惜的是，這個demo也只能在開發工具上玩玩，到真機上測試的時候，手指一滑動，頁面會跟著滾動，手勢沒法使用。
下面我們從這個例子中，來分析兩個可以學習的點。
1、引入第三方函式庫
我們上面提到的H5lock這個函式庫，是個大神寫的、專給H5用的一個功能。我們對它進行了一翻修改，把它引入到小程式上來了。
這裡討論下如何把第三方js函式庫引入到小程式來，分以下幾個步驟：
（1）模組化
小程式碼中，只能透過module.exports來導出的模組才能被引用，所以第一步，我們要對程式碼進行第一個改造，做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(); // 执行document
frames
self
location
navigator
localStorage
history
caches
screen
alert
confirm
prompt
XMLHttpRequest
WebSocket
2、一種解耦的方式
在小程式開發的時候，如果一個頁面的js寫得太長，甚至超過了上千行，那你就要考慮把這個文件分拆成幾個。或者你寫的邏輯程式碼，可以幾個頁面共用，那你也是要把程式碼從這個頁面的js拆出來的。 這裡就引出了一個比較顯明的問題：在其它文件中，要修改頁面上的數據，又不能耦合性太大，因為你的這段邏輯代碼，在頁面A中會引用到，在頁面B中也會引用到，這樣總不能把setData操作放到這個共用的檔案裡吧。 那有什麼辦法可以解耦呢？ 這個時候，可能你會想到一般頁面開發時，用到的trigger機制，可惜這個只能在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);
});
};var event = require('lib/event.js');
App({
onLaunch: function () {
event(this); // 在onLaunch里调用，传入的this就是app本身
},
globalData:{
}
});app.trigger('titleChanged', '请解锁');
#
Page({
…
onTitleChanged: function(newTitle) { // 文字变化的事件，自定义
this.setData({
title: newTitle
});
}
...
});
