微信小程序實戰•手勢解鎖

代碼：https://github.com/jsongo/wx-gesture-lock

這個手勢解鎖的demo使用了https://github.com/lvming6816077/H5lock 這個項目的算法和主邏輯，整合到微信小程序來，修改了不少地方的語法來適配小程序，去掉了window、document等函數，同時也添加了新的機制來解耦界面的操做和第三方庫，這個下面會介紹到。

不過惋惜的是，這個demo也只能在開發工具上玩玩，到真機上測試的時候，手指一滑動，頁面會跟着滾動，手勢無法使用。

 

下面咱們從這個例子中，來分析兩個能夠學習的點。

一、引入第三方庫

咱們上面提到的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的方式來改造了第三方庫。

 

二、一種解耦的方式

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

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

那有什麼辦法能夠解耦呢？

這個時候，可能你會想到普通頁面開發時，用到的trigger機制，惋惜這個只能在dom上綁定。也或許你用過http://statejs.org/ 這個庫，經過狀態機的變化來觸發某些特定的操做，這個方法很是巧妙，沒接觸過這個庫的開發者，建議學習一下。

不過咱們還不須要再引入一個庫，這裏，咱們來寫個簡單的。簡單到只有幾行代碼。

代碼在這裏：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);

    });

};

如何使用這個庫？分析一下大概的過程，其實很是簡單，就是給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了。

拉了個小程序的微信羣，對這方面有興趣的朋友能夠加進來交流技術問題。