WeChat Mini 프로그램 개발 실용 튜토리얼: 제스처 잠금 해제

이 글은 WeChat 애플릿 개발의 실제 튜토리얼에서 제스처 잠금 해제 관련 정보를 주로 소개하며, 도움이 필요한 친구들이 참고할 수 있습니다.

코드: https://github.com/jsongo/wx-gesture-lock

이 제스처 잠금 해제 데모는 https://github.com/lvming6816077/H5lock을 사용합니다. 프로젝트의 알고리즘과 주요 로직이 위챗 애플릿에 통합되었습니다. 애플릿에 맞게 여러 곳의 구문이 수정되었습니다. 동시에, 작업을 분리하기 위한 새로운 메커니즘이 추가되었습니다. 아래에 소개될 인터페이스 및 타사 라이브러리.

하지만 안타깝게도 이 데모는 개발 도구에서만 재생할 수 있습니다. 실제 시스템에서 테스트할 때 손가락을 슬라이드하자마자 페이지가 스크롤되고 제스처를 사용할 수 없습니다.

이 예에서 알 수 있는 두 가지 사항을 분석해 보겠습니다.

1. 타사 라이브러리 소개

위에서 언급한 H5lock 라이브러리는 마스터가 작성한 라이브러리로 특별히 사용되는 라이브러리입니다. H5.기능. 이를 수정하여 미니프로그램에 도입하였습니다.

여기에서는 타사 js 라이브러리를 미니 프로그램에 도입하는 방법을 논의합니다. 미니 프로그램은 다음 단계로 나뉩니다.

(1) 모듈화

미니 프로그램 코드에서 , module.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
자체
위치
네비게이터
localStorage
기록
캐시
화면
경고
확인
프롬프트
XMLHttpRequest
WebSocket

위의 코드와 관련된 코드를 하나씩 검색하여 대체할 수 있는 방법을 찾아보세요.

가장 일반적인 것은 일반적으로 문서 작업입니다. 타사 라이브러리에서는 주로 DOM을 참조하고 설정하거나 수정하는 데 사용합니다. 이는 아래 2번 항목에서 설명하는 디커플링 기술을 통해 교묘하게 우회할 수 있습니다. 나머지는 개발자 자신의 몫이며 여기에 모든 상황을 나열할 방법은 없습니다.

이 기사의 데모에서는 클래스 메서드를 사용하여 타사 라이브러리를 변환합니다.

2. 디커플링 방법

작은 프로그램을 개발할 때 한 페이지의 js가 너무 길면, 심지어 천 줄 이상이면, 이 파일을 여러 개로 분할하는 것을 고려해보세요. 또는 작성한 논리 코드를 여러 페이지에서 공유할 수 있는 경우 이 페이지의 js에서 코드를 분리해야 합니다.

이것은 명백한 문제로 이어집니다. 다른 파일에서 페이지의 데이터를 수정하려는 경우 논리 코드가 페이지 A에서 참조되기 때문에 너무 결합될 수 없습니다. , 또한 참조됩니다. 페이지 B에 있으므로 setData 작업을 이 공유 파일에 배치할 수 없습니다.

그럼 분리할 수 있는 방법은 없을까요?

이때 일반적인 페이지 개발에서 사용되는 트리거 메커니즘을 생각할 수 있지만 안타깝게도 이는 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);
});
};

이 라이브러리를 어떻게 사용하나요? 일반적인 프로세스를 분석해 보면 앱에 트리거 메소드를 추가하는 것인데, onXXX 메소드가 있는지 확인하면 됩니다. 이 메소드 이름은 app.trigger('textChange')와 같은 eventType 매개변수에서 변환되며 여기서는 페이지에 onTextChange 메소드가 있는지 여부를 확인할 수 있습니다. 따라서 실제로 이 디커플링 방법은 본질적으로 사양을 정의합니다.

홈페이지는 app.js에 도입되고 onLaunch에서 호출됩니다.

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

그런 다음 공유 추출 파일에서 setData가 있어야 하는 위치 사용된 경우 다음 형식으로 작성합니다.

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

그런 다음 페이지의 js 코드에서 이 트리거에 대한 응답을 추가합니다.

아아아아

이 세 단계를 완료하면 괜찮습니다.

위 내용은 편집자가 소개한 제스처 잠금 해제 기반 WeChat 애플릿 개발에 대한 실용적인 튜토리얼입니다. 궁금한 사항이 있으면 메시지를 남겨주시면 편집자가 답변해 드리겠습니다. 시간에 당신에게. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

WeChat Mini 프로그램 개발 제스처 잠금 해제 실용 튜토리얼과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!