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

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

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

(0)

相关推荐

  • 微信小程序开发探究

    前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来学习,首先分析一下微信小程序是什么,听起来比较高大上,说实话原来我确实挺疑惑,到底这一套是什么开发机制,native?hybrid?纯h5?看网上各种教程上来就说api说语法,感觉不先理清楚是什么的问题就去搬api过来纯粹是耍流氓. 一.微信小程序是什么:     言归正传,微信小程序的本质是什么?

  • 微信小程序 欢迎界面开发的实例详解

    微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 整个布局使用swiper滑动视图实现,滑动视图的每一个item通过一个block块包裹,块中包裹的是滑动视图的每一个item, item中包含image图片和button按钮 <swiper indicator-dots="true"> <block wx:for="{

  • 微信小程序 开发指南详解

    编写代码 创建小程序实例 点击开发者工具左侧导航的"编辑",我们可以看到这个项目,已经初始化并包含了一些简单的代码文件.最关键也是必不可少的,是 app.js.app.json.app.wxss 这三个.其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件.微信小程序会读取这些文件,并生成小程序实例. 下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序. ​ app.js是小程序的脚本代码.我们可以在这个文件中监听并处理小程序的

  • 微信小程序(应用号)开发新闻客户端实例

    下载最新版的微信小程序开发工具,目前是v0.9.092300 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html git下载地址:http://git.oschina.net/dotton/news 先看下效果图: Paste_Image.png 一.新建应用 1.内测阶段对于无内测号的开发者,

  • 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

    微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • 微信小程序开发实例详解

    "小程序"破解IDE + Demo:https://github.com/gavinkwoe/weapp-ide-crack.git 资源汇总:https://github.com/Aufree/awesome-wechat-weapp 官方简易教程·MINA:http://wxopen.notedown.cn/ Hello小程序 - 非官方:http://www.helloxcx.com 微信应用号开发教程:https://my.oschina.net/wwnick/blog/750

  • 微信小程序应用号开发体验

    昨天微信小程序(应用号)内测的消息把整个技术社区炸开了锅,我也忍不住跟了几波,可惜没有内测资格,听闻破解版出来了,今天早上就着原来的项目资源试开发了一下,总结一下体验. 总体体验 开发效率高,6:40左右破解完IDE,7:20左右点做完了首页和导航栏的布局,微信把觉见的布局都做了封装,比传统的前端开发效率高. 前端可以快速上手:熟练的前端可以很快上手,可能只要一小时读文档的时间加一个官方的例子. 开发工具难用,很多目录的操作和IDE常见的格式化代码,html配对等功能暂不支持. 开发限制了很多前

  • 微信小程序版的知乎日报开发实例

    先看看效果图 开发环境准备 小程序 出来第二天就被破解,第三天微信就把开发工具开发下载了, 现在只需要下载 微信开发者工具 就可以使用了, 创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了. 目录结构 1.app.js 注册app逻辑, app.wxss 全局样式文件 app.json 配置信息 2.pages 存放页面文件 3.utils 工具类代码 4.images 图片资源文件 小程序中每一个页面都会有三个文件 .wxml .wxss .js ,对应着结构.样式.

  • 微信小程序 开发工具快捷键整理

    微信小程序 微信开发者工具 快捷键,最近学习研究微信小程序,用了不少快捷键,索性记录下来,后续如果有其它的快捷键继续增加, 微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. 我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化. 现在貌似不能修改.如果有同学找到修改的方法,麻烦告诉我.谢谢. 微信小程序代码编辑快捷键 常用快捷键 格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, C

  • 微信小程序应用号开发教程详解

    微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧 微信公众平台小程序目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧.(公司的项目保密还不能分享代码和截图.博卡君是边加班边偷偷给大家写教程.感谢「名片盒」团队提供他们的服务号来动这个手术,所以博卡君的教

随机推荐