계산기 애플릿을 개발하는 방법

이 글에서는 WeChat 애플릿을 사용하여 계산기 애플릿을 개발하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있을 만큼 위챗 애플릿 개발을 배우고 있는 친구들에게 도움이 되길 바랍니다!

요약: WeChat 애플릿 개발은 실제로 마스터하기 전에는 그것이 얼마나 강력한지 몰랐습니다. 더 뛰어난 것 같았어요. 실제로, 이는 우리의 전통적인 글쓰기 방법보다 간단하고 고도로 캡슐화되어 있으며, 그들의 규칙과 사양에 따르면 글쓰기 경험은 여전히 ​​매우 좋습니다.

이 간단한 계산기와 개발 과정에서 겪게 되는 몇 가지 함정을 소개하겠습니다. 우선, 인터넷에는 웹 개발자 도구, 문서 등이 많이 있으므로 반복하지 않겠습니다. WeChat은 공식적으로 검증 메커니즘을 수정했으며, 플레이할 필요가 없습니다. APPID.그러나 일부 기능이 제한됩니다. 위챗 미니 프로그램을 개발하는 것은 복잡해 보일 수도 있지만 사실 어렵지 않습니다. 실제로, 이는 우리의 전통적인 글쓰기 방법보다 간단하고 고도로 캡슐화되어 있으며, 그들의 규칙과 사양에 따르면 글쓰기 경험은 여전히 ​​매우 좋습니다.

근데 권한이 없어서 현재 위챗 애플릿이 개발자 도구의 에뮬레이터에서 실행되고 있는데 실제 위챗 상황은 어떤지 모르겠습니다.

xxx.wxml 파일과 xxx.wxss 파일

wxml은 위챗 자체 개발한 마크업 언어 집합이 아닌 HTML 파일로 바로 보실 수 있습니다. 문제는 인터페이스 구성이 모두 이 파일에 작성되어 있지만 HTML 태그는 없고 wxml 태그만 있고 wxml 태그의 수도 매우 적기 때문입니다.

wxss는 WeChat 자체 개발한 스타일 파일 형식입니다. 작성 방법은 동일하지만 파일 접미사가 있습니다. 변경되었습니다. 과거에 CSS를 작성했던 방식은 여전히 ​​WeChat 애플릿에서 작성하는 방식입니다.

wxml + wxss를 사용하면 원하는 인터페이스 UI를 만들 수 있습니다.

xxx.js 및 xxx.json 파일

xxx.js 파일은 JS가 작성된 파일입니다. 각 xxx.js는 동일한 이름을 가진 xxx.wxml 파일에 해당합니다. xxx. 페이지에 비즈니스 로직이 없더라도 js 파일에는 Page 개체가 있어야 합니다. Enter Page WeChat 웹 개발자 도구는 사용자가 구현할 일련의 빈 메소드를 자동으로 생성합니다. 물론 이를 구현할 필요는 없습니다.

xxx.josn 파일은 일반적으로 전역 구성에 사용되는 구성 파일입니다. 예를 들어 루트 디렉터리의 app.josn은 어떤 페이지를 정의합니다. 미니 프로그램은 구성, 미니 프로그램 탐색 바 스타일 등으로 구성됩니다. 이름을 보면 속성의 의미를 알 수 있습니다.

페이지 속성은 페이지를 구성하고, 페이지를 생성하는 것을 잊어버린 경우 모든 페이지를 여기에서 구성해야 합니다. 여기에 추가하면 페이지 점프시 onLoad 메소드가 실행되지 않아서 머리를 긁적이며 궁금해서 많이 허탈해집니다.

전체 구조

아래 프로젝트 구조도를 보세요. 페이지는 폴더이며, 페이지에는 일반적으로 js, wxml, wxss 및 js 파일이 필요합니다. , 스타일이 없을 수 있습니다.

calc(계산기 페이지), 기록(기록 기록), 인덱스(미니 프로그램 홈 페이지, 시작 페이지), 로그(로그 정보), 유틸리티 (js 도구 클래스), 로그 및 유틸리티가 내장되어 있으며 사용 여부를 결정할 수 있습니다.

소스 코드 분석

이 간단한 계산기 인터페이스 레이아웃은 WeChat 관계자가 권장하는 것으로 보이는 CSS Flexbox 레이아웃을 사용하여 원래 레이아웃을 계속 이어갑니다(Flexbox는 공식 선적 서류 비치).

계산기의 버튼은 모두 라벨로 만들어져 있습니다. 물론 wxss 스타일만 추가해도 됩니다. 물론 버튼 구성요소를 직접 사용할 수도 있습니다.

여기서는 이름에서 알 수 있듯이 HTML에서 onclick을 사용하는 것처럼 이벤트를 바인딩하는 데 bintap이 사용됩니다. id={{id9}} 이중 중괄호 안의 값은 js 파일

의 data 속성으로 정의된 동일한 이름의 속성에서 옵니다. css 말할 것도 없고, 유일하게 주목할 점은 WeChat이 화면 너비에 따라 조정될 수 있는 크기 단위 rpx, 반응형 픽셀을 제공한다는 것입니다. 계산기의 기록 페이지에서도 사용됩니다.

주로 구성 요소와 관련됩니다.

view, text, 대부분의 페이지는 그들 두 형제.

버튼, 인덱스페이지 "간단계산기"에 있는 버튼

아이콘(icon), 컴퓨터 기록 기록은 아이콘과 함께 제공되는 아이콘 중 하나를 조용히 사용합니다.

마킹 방법 조정 페이지(네비게이터)

주로 API가 포함됩니다.

wx.navigateTo, 탐색, 점프, 현재 페이지에서 새 페이지 열기

스토리지, 로컬 스토리지, 저장 계산 내역 기록은 setStorage, getStorage 및 동기화 종료와 함께 비동기 메서드를 사용합니다. 🎜#

Notes

새 페이지를 만들 때마다 app.josn의 페이지 속성에 추가해야 한다는 점을 기억해야 합니다. 그렇지 않으면 NavigationTo 이후를 사용하세요. 새 페이지로 이동하면 새 페이지의 onLoad 메서드가 실행되지 않습니다.

위챗 애플릿에는 윈도우와 같은 자바스크립트 객체가 없으므로 JS를 작성하기 전에 대안을 생각해 보세요. 예를 들어 이 계산기는 원래 eval 함수를 사용하면 편리하게 계산할 수 있습니다. 결과는 작동하지 않습니다. 큰 우회입니다.

WeChat 애플릿의 JS는 실제 JS가 아니고 wxss도 실제 CSS가 아니므로 작성 시 주의가 필요합니다.

일반적으로 WeChat 미니 프로그램은 어렵지 않으며 공식 문서도 잘 작성되어 있습니다.

이 기사는 http://zixun.jisuapp.cn/xcxkfjc/4488.html

권장: "

작은프로그램 개발 튜토리얼#🎜 🎜# 》

위 내용은 계산기 애플릿을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!