미니 프로그램 실습: 간단한 미니 프로그램 모니터링 기능 구현하기

이 글은 실제로 작은 프로그램을 소개하고 간단한 작은 프로그램 모니터링 기능을 구현하는 방법을 단계별로 가르쳐드립니다. 모든 분들께 도움이 되길 바랍니다!

이전에 우리 미니 프로그램에서 오류가 보고되면 모두 사용자 스크린샷 피드백에 의존했고 개발자들은 이를 조금씩 재현했습니다

나중에 생각해 보겠습니다. 사용자의 스크린샷을 기록할 수 있는 것이 있습니까? 프로그램이 오류를 보고하면 자동으로 사용자의 작업 기록을 서버에 업로드하고 개발자에게 이를 처리하도록 알리나요?

나중에 이게 프론트엔드 모니터링이라는 걸 알게 됐어요.

물론, 이 기사에서는 비교적 간단한 것에 대해 이야기합니다. 왜냐하면 저는 어떻게 해야 할지 모르고 아직 실제 프로젝트 개발에 참여하지 않았기 때문입니다. .

이 작은 프로그램 모니터링의 기능은 무엇인가요?

1) 사용자가 페이지에 들어오고 나가는 시간을 기록합니다.
2) 모든 클릭 이벤트를 모니터링합니다.
3) 사용자의 대략적인 작업 궤적을 기록합니다.
4) 클라우드 함수 호출이 실패하면 개발자에게 이를 처리하도록 상기시키기 위해 자동으로 데이터베이스에 보고됩니다.

페이지에 들어오고 나가는 사용자의 기록을 실현하세요

우리 모두는 미니 프로그램에 여러 수명주기 기능이 있다는 것을 알고 있습니다. 그 중에서 저는 onShow, onHide 및 unload의 세 가지 수명주기에 기록하기로 했습니다.

더 어리석은 방법은 각 페이지의 라이프 사이클 기능에 페이지 표시 및 숨기기/언로드 시간을 직접 기록하는 것이지만 이는 너무 반복적이므로

그래서 이러한 라이프 사이클 기능에 다른 레이어를 추가할 수 있습니다(이를 Javascript 디자인 패턴의 데코레이터 패턴)

모든 이벤트에 다른 레이어를 추가하는 방법에 대한 새로운 질문이 다시 나옵니다.

먼저 페이지의 index.js 파일을 살펴보겠습니다

Page 메소드에 객체를 전달하면, 이 개체에는 모든 이벤트(클릭, 슬라이드, CSS3 애니메이션 등)와 수명 주기가 포함되어 있습니다.

페이지 메서드를 대체하는 메서드를 사용자 정의할 수 있습니다. 이 메서드에서는 전달된 개체를 가져와 수정합니다. 마지막으로 원본 Page(Obj)를 다시 실행하는 것을 잊지 마세요. 코드 구조를 보세요

코드는 실제로 매우 간단합니다. 함수가 호출되면 캐시를 읽습니다. 데이터가 있으면 현재 페이지의 정보가 배열 요소에 추가됩니다. 배열 길이가 10보다 큰 경우 첫 번째 요소를 제거하고 배열 길이를 11로 유지합니다.

타이머를 사용하는 이유는 테스트 중에 타이머를 추가하지 않으면 최신 데이터를 읽을 수 없는 경우가 있기 때문입니다. 이전 데이터를 가져와서 수정하고 할당한 후 마지막으로 캐시를 재설정합니다(onshow 기능이 실행될 때 이전 페이지의 onhide 기능이 완료되지 않을 수 있으며 이 기능이 캐시를 수정하므로 onshow 기능은 get은 최신 캐시가 아니므로 정보 손실이 발생함)

캐시 결과 확인:

모든 클릭 이벤트 모니터링을 구현하려면

1) 가장 간단한 방법은 다음을 사용하는 것입니다. 게시-구독 모델을 시도해 보세요. 하지만 너무 번거롭습니다.

2) 페이지의 모든 이벤트에 다른 레이어를 추가합니다. 이벤트가 실행되면 매개변수 e가 있으므로 e.type을 판단하세요.

코드를 보세요

마지막으로 호출을 원래 함수로 되돌리고, 다음으로, 그것이 구현하는 것은 원래 이벤트(데코레이터 모드)를 래핑하는 것입니다.

페이지의 각 함수 쌍에 대해 바꾸기 메서드를 실행합니다.

무슨 용도인가요?

이 함수는 원래 메서드를 래핑하는 것을 알 수 있습니다. 구체적인 패키징 방법은 전달된 대체 함수에 따라 다릅니다.

이 함수는 최종적으로 원래 함수의 실행을 반환하므로 패키지의 내용은 다음과 같습니다. 클릭 이벤트인지 여부를 함수 본문 내에서 판단합니다. 그렇다면 데이터를 저장하면 됩니다.

캐시된 결과 보기:

클라우드 함수 호출이 실패하면 개발자에게 이를 처리하도록 상기시키기 위해 자동으로 데이터베이스에 보고됩니다.

Object.defineProperty()를 사용하여 클라우드 함수 호출을 하이재킹하고, 레이어를 하나 더 래핑한 다음 호출을 클라우드 함수로 반환합니다.

하지만 여기서 주목해야 할 점이 있습니다.

1 ) 전달된 콜백 함수가 있고 그 결과는 콜백 함수에서 얻어집니다.

2) 전달된 콜백 함수가 없는 경우 Wait를 사용하여 호출 결과를 기다리며, 클라우드 함수 호출의 오류를 캡처해야 하므로

그래서 하이재킹 중에 직접 결과를 얻은 후 반환합니다. 약속.

클라우드 기능에서 WeChat에서 제공하는 템플릿 메시지를 호출하여 개발자에게 자동으로 알리고 처리하는 것은 실제로 매우 간단합니다.

캐시된 결과를 보세요

구조가 좀 지저분할 수도 있는데 결국 처음 쓰는거라 아직 적용은 안됐네요.

【관련 학습 추천: 미니 프로그램 개발 튜토리얼】

위 내용은 미니 프로그램 실습: 간단한 미니 프로그램 모니터링 기능 구현하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!