jsongo0：微信小程序?qū)崙?zhàn)：手勢(shì)解鎖（附demo下載）
代碼：https://github.com/jsongo/wx-gesture-lock
這個(gè)手勢(shì)解鎖的demo使用了https://github.com/lvming6816077/H5lock 這個(gè)項(xiàng)目的算法和主邏輯，整合到微信小程序來(lái)，修改了很多地方的語(yǔ)法來(lái)適配小程序，去掉了window、document等函數(shù)，同時(shí)也添加了新的機(jī)制來(lái)解耦界面的操作和第三方庫(kù)，這個(gè)下面會(huì)介紹到。
不過(guò)可惜的是，這個(gè)demo也只能在開發(fā)工具上玩玩，到真機(jī)上測(cè)試的時(shí)候，手指一滑動(dòng)，頁(yè)面會(huì)跟著滾動(dòng)，手勢(shì)沒法使用。
下面我們從這個(gè)例子中，來(lái)分析兩個(gè)可以學(xué)習(xí)的點(diǎn)。
1、引入第三方庫(kù)
我們上面提到的H5lock這個(gè)庫(kù)，是個(gè)大神寫的、專給H5用的一個(gè)功能。我們對(duì)它進(jìn)行了一翻修改，把它引入到小程序上來(lái)了。
這里討論下如何把第三方j(luò)s庫(kù)引入到小程序來(lái)，分以下幾個(gè)步驟：
（1）模塊化
小程序代碼中，只能通過(guò)module.exports來(lái)導(dǎo)出的模塊才能被引用，所以第一步，我們要對(duì)代碼進(jìn)行第一個(gè)改造，做exports導(dǎo)出：
module.exports = {
...
}
如果要在被引入的時(shí)候，執(zhí)行一些操作，可以用以下兩種方式：
//// mylib.js
module.exports = (function() {
// 這里寫上你要執(zhí)行的代碼
…
return xxx; //返回你要導(dǎo)出的方法，如果多個(gè)就寫成一個(gè)map
})();
…
//// 其它文件中這么引用和執(zhí)行：
let MyLib = require('mylib.js');
let lib = Mylib();
lib.xxx(); // 執(zhí)行
或es6中的class：
//// mylib.js
module.exports = class {
constructor() { //
// 這里寫上你要執(zhí)行的代碼
}
// 其它方法
xxx() {
...
}
}
…
//// 其它文件中這么引用和執(zhí)行：
let MyLib = require('mylib.js');
let lib = new Mylib(); // 用new來(lái)生成類的對(duì)象
lib.xxx(); // 執(zhí)行
（2）對(duì)第三方庫(kù)中的一些函數(shù)進(jìn)行改造
小程序不支持以下幾個(gè)函數(shù)或api：
|
window document frames self location navigator localStorage history caches screen alert confirm prompt XMLHttpRequest WebSocket |
跟以上相關(guān)的代碼一個(gè)個(gè)搜索出來(lái)，并想辦法替換掉。
最常見的一般是document操作，第三方庫(kù)主要是用它來(lái)引用dom，并對(duì)它進(jìn)行設(shè)置或修改。這個(gè)可以通過(guò)下面第2點(diǎn)會(huì)講的解耦技巧來(lái)巧妙地繞過(guò)。其它的就靠開發(fā)者自己去想了，這里沒辦法一一列出所有的情況。
本文的demo用的是class的方式來(lái)改造了第三方庫(kù)。
2、一種解耦的方式
在小程序開發(fā)的時(shí)候，如果一個(gè)頁(yè)面的js寫得太長(zhǎng)，甚至超過(guò)了上千行，那你就要考慮把這個(gè)文件分拆成幾個(gè)?；蛘吣銓懙倪壿嫶a，可以幾個(gè)頁(yè)面共用，那么你也是要把代碼從這個(gè)頁(yè)面的js里拆出來(lái)的。
這里就引出了一個(gè)比較顯明的問(wèn)題：在其它文件中，要修改頁(yè)面上的數(shù)據(jù)，又不能耦合性太大，因?yàn)槟愕倪@段邏輯代碼，在頁(yè)面A中會(huì)引用到，在頁(yè)面B中也會(huì)引用到，這樣總不能把setData操作放到這個(gè)共用的文件里吧。
那有什么辦法可以解耦呢？
這個(gè)時(shí)候，可能你會(huì)想到普通頁(yè)面開發(fā)時(shí)，用到的trigger機(jī)制，可惜這個(gè)只能在dom上綁定。也或許你用過(guò)http://statejs.org/ 這個(gè)庫(kù)，通過(guò)狀態(tài)機(jī)的變化來(lái)觸發(fā)某些特定的操作，這個(gè)方法非常巧妙，沒接觸過(guò)這個(gè)庫(kù)的開發(fā)者，建議學(xué)習(xí)一下。
不過(guò)我們還不需要再引入一個(gè)庫(kù)，這里，我們來(lái)寫個(gè)簡(jiǎn)單的。簡(jiǎn)單到只有幾行代碼。
代碼在這里：https://github.com/jsongo/wx-gesture-lock/blob/master/lib/event.js
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);
});
};
如何使用這個(gè)庫(kù)？分析一下大概的過(guò)程，其實(shí)非常簡(jiǎn)單，就是給app添加一個(gè)trigger方法，當(dāng)它被調(diào)用的時(shí)候，去查找當(dāng)前頁(yè)面是否在onXXX方法，有的話就調(diào)用。這個(gè)方法名，是通過(guò)eventType這個(gè)參數(shù)變形而成的，如app.trigger('textChange') ，則這里會(huì)去查找頁(yè)面中是否有onTextChange方法。所以其實(shí)這個(gè)解耦方法，本質(zhì)上，是定義了一種規(guī)范。
首頁(yè)在app.js里引入，并在onLaunch里調(diào)用：
var event = require('lib/event.js');
App({
onLaunch: function () {
event(this); // 在onLaunch里調(diào)用，傳入的this就是app本身
},
globalData:{
}
});
然后在共用的抽離出來(lái)的文件中，在需要用到setData的地方，寫成如下形式：
app.trigger('titleChanged', '請(qǐng)解鎖');
接著在頁(yè)面的js代碼里，添加對(duì)這個(gè)trigger的響應(yīng)：
Page({
…
onTitleChanged: function(newTitle) { // 文字變化的事件，自定義
this.setData({
title: newTitle
});
}
...
});
這三步做完就ok了
