微信小程式開發實戰教程之手勢解鎖

這篇文章主要介紹了微信小程式開發實戰教程之手勢解鎖的相關資料,本文分步驟給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下

代碼：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(); // 执行

# #（2）將第三方函式庫中的一些函數進行改造

小程式不支援以下幾個函數或api：

window

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

#跟以上相關的程式碼一個個搜尋出來，想辦法替換掉。

最常見的一般是document操作，第三方函式庫主要是用它來引用dom，並對它進行設定或修改。這個可以透過下面第2點會講的解耦技巧來巧妙地繞過。其它的就靠開發者自己去想了，這裡沒辦法一一列出所有的狀況。

本文的demo用的是class的方式來改造了第三方函式庫。

2、一種解耦的方式

在小程式開發的時候，如果一個頁面的js寫得太長，甚至超過了上千行，那你就要考慮把這個文件分拆成幾個。或者你寫的邏輯程式碼，可以幾個頁面共用，那你也是要把程式碼從這個頁面的js拆出來的。

這裡就引出了一個比較顯明的問題：在其它文件中，要修改頁面上的數據，又不能耦合性太大，因為你的這段邏輯代碼，在頁面A中會引用到，在頁面B中也會引用到，這樣總不能把setData操作放到這個共用的檔案裡吧。

那有什麼辦法可以解耦呢？

這個時候，可能你會想到一般頁面開發時，用到的trigger機制，可惜這個只能在dom上綁定。也或許你用過http://www.php.cn/ 這個函式庫，透過狀態機的變化來觸發某些特定的操作，這個方法非常巧妙，沒接觸過這個函式庫的開發者，建議學習一下。

不過我們還不需要再引入一個函式庫，這裡，我們來寫個簡單的。簡單到只有幾行程式碼。

程式碼在這裡：http://www.php.cn/

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

如何使用這個函式庫？分析一下大概的過程，其實非常簡單，就是為app添加一個trigger方法，當它被呼叫的時候，去查找當前頁面是否在onXXX方法，有的話就調用。這個方法名，是透過eventType這個參數變形而成的，如app.trigger('textChange') ，則這裡會去查找頁面中是否有onTextChange方法。所以其實這個解耦方法，本質上，是定義了一種規範。

首頁在app.js裡引入，並在onLaunch裡呼叫：

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

然後在共用的抽離出來的檔案中，在需要用到setData的地方，寫成如下形式：

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

#接著在頁面的js程式碼裡，加入對這個trigger的回應：

#

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

這三步做完就ok了。

以上所述是小編給大家介紹的微信小程式開發實戰教程之手勢解鎖，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持！

更多微信小程式開發實戰教學手勢解鎖相關文章請關注PHP中文網！