微信小程序开发实战教程之手势解锁


Posted in Javascript onNovember 18, 2016

微信小程序开发实战教程之手势解锁

代码: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://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了。

以上所述是小编给大家介绍的微信小程序开发实战教程之手势解锁,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
根据地区不同显示时间的javascript代码
Aug 13 Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
Exjs 入门篇
Apr 07 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
JavaScript实现世界各地时间显示
Sep 07 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
JavaScript之WebSocket技术详解
Nov 18 #Javascript
仿iframe效果Aajx文件上传实例
Nov 18 #Javascript
JavaScript之cookie技术详解
Nov 18 #Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 #Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 #Javascript
js实时获取窗口大小变化的实例代码
Nov 18 #Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 #Javascript
You might like
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
提高PHP编程效率的方法
2013/11/07 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
Yii全局函数用法示例
2017/01/22 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
PyQt5每天必学之进度条效果
2018/04/19 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
设备收款委托书范本
2014/10/02 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
2016国庆促销广告语
2016/01/28 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
python中的sys模块和os模块
2022/03/20 Python
Echarts如何重新渲染实例详解
2022/05/30 Javascript