<p style="text-align: center">
@H_502_4@代码：<a href="https://github.com/jsongo/wx-gesture-lock">https://github.com/jsongo/wx-gesture-lock
这个手势解锁的demo使用了这个项目的算法和主逻辑，整合到微信小程序来，修改了很多地方的语法来适配小程序，去掉了window、document等函数，同时也添加了新的机制来解耦界面的操作和第三方库，这个下面会介绍到。
@H_502_4@不过可惜的是，这个demo也只能在开发工具上玩玩，到真机上测试的时候，手指一滑动，页面会跟着滚动，手势没法使用。 @H_502_4@下面我们从这个例子中，来分析两个可以学习的点。
@H_502_4@1、引入第三方库
@H_502_4@我们上面提到的H5lock这个库，是个大神写的、专给H5用的一个功能。我们对它进行了一翻修改，把它引入到小程序上来了。 @H_502_4@这里讨论下如何把第三方js库引入到小程序来，分以下几个步骤： @H_502_4@（1）模块化 @H_502_4@小程序代码中，只能通过module.exports来导出的模块才能被引用，所以第一步，我们要对代码进行第一个改造，做exports导出：代码
…
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(); // 执行
@H_502_4@（2）对第三方库中的一些函数进行改造
@H_502_4@小程序不支持以下几个函数或api：
@H_502_4@window
document
frames
self
location
navigator
localStorage
history
caches
screen
alert
confirm
prompt
XMLHttpRequest
WebSocket
@H_502_4@跟以上相关的代码一个个搜索出来，并想办法替换掉。
@H_502_4@最常见的一般是document操作，第三方库主要是用它来引用dom，并对它进行设置或修改。这个可以通过下面第2点会讲的解耦技巧来巧妙地绕过。其它的就靠开发者自己去想了，这里没办法一一列出所有的情况。
@H_502_4@本文的demo用的是class的方式来改造了第三方库。
@H_502_4@2、一种解耦的方式
@H_502_4@在小程序开发的时候，如果一个页面的js写得太长，甚至超过了上千行，那你就要考虑把这个文件分拆成几个。或者你写的逻辑代码，可以几个页面共用，那么你也是要把代码从这个页面的js里拆出来的。 @H_502_4@这里就引出了一个比较显明的问题：在其它文件中，要修改页面上的数据，又不能耦合性太大，因为你的这段逻辑代码，在页面A中会引用到，在页面B中也会引用到，这样总不能把setData操作放到这个共用的文件里吧。 @H_502_4@那有什么办法可以解耦呢？ @H_502_4@这个时候，可能你会想到普通页面开发时，用到的trigger机制，可惜这个只能在dom上绑定。也或许你用过http://statejs.org/ 这个库，通过状态机的变化来触发某些特定的操作，这个方法非常巧妙，没接触过这个库的开发者，建议学习一下。 @H_502_4@不过我们还不需要再引入一个库，这里，我们来写个简单的。简单到只有几行代码。 @H_502_4@代码在这里：调用，传入的this就是app本身
},globalData:{
}
});
@H_502_4@然后在共用的抽离出来的文件中，在需要用到setData的地方，写成如下形式：
文字变化的事件，自定义
this.setData({
title: newTitle
});
}
...
});
@H_502_4@这三步做完就ok了。
@H_502_4@以上所述是小编给大家介绍的微信小程序开发实战教程之手势解锁。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/weapp/44393.html