WeChat 미니 프로그램 지식 포인트 요약

subPackages 서브패키지 로딩

미니 프로그램의 메인 패키지 크기는 2M 제한을 초과하지 않으므로 전체 서브패키지 크기는 8M를 초과하지 않는 것이 좋으며, 여러 개의 서브패키지를 추가할 수 있습니다. 로딩은 프로그램이 처음 시작될 때 다운로드 시간을 최적화할 수 있습니다. 차트)

rpx 단위,

in 모바일 적응에 가장 일반적으로 사용되는 방법은 적응 단위로 rem 또는 vw를 사용하는 것이므로 WeChat 애플릿은 적응을 위한 rpx 단위를 제공합니다

인증 팝업 창

wx.getUserInfo 인터페이스 조정, 표시 인증 팝업 창을 직접적이고 적극적으로 호출하려면 사용자에게 승인을 안내합니다. 미니 프로그램의 wx.getUserInfo 인터페이스 공식 버전이 조정되었으며, 평가판 및 개발 원본 버전을 사용할 수도 있습니다.

네이티브 컴포넌트 z-index

네이티브 컴포넌트의 레벨이 가장 높기 때문에 z-index를 어떻게 설정하더라도 페이지의 다른 컴포넌트가 네이티브 컴포넌트를 덮을 수 없는 문제가 해결될 수 있습니다. 그러나 스와이프나 팝업 창과 같은 일부 특정 환경에서는 기본 구성 요소를 표시하고 숨겨야 하며 숨김은

pseudo-elements

Pseudo-element 속성을 사용해야 합니다. 미니 프로그램의 일부는 WeChat 개발자 도구 CSS 속성에서 볼 수 없습니다. 따라서 일부 구성 요소 스타일(예: 버튼 테두리 또는 특정 줄 설정)을 재정의할 수 없는 경우 이는 해당 스타일이 의사 요소::after를 통해 설정되기 때문입니다.

페이지 스택

을 재정의하려면 요소를 사용해야 합니다. 하나의 애플리케이션은 5개의 페이지 스택만 열 수 있습니다. 5페이지를 연 후에는(현재 한도는 10레벨) 새 페이지를 정상적으로 열지 못할 수도 있습니다. wx.navigateTo 점프는 현재 페이지를 유지하지만 wx.redirectTo는 그렇지 않으므로 다단계 상호 작용을 피하고 점프 방법을 적절하게 사용하십시오

Componentization

emplate 모듈과 구성 요소 구성 요소는 작은 프로그램입니다. 두 구성 요소의 차이점은 템플릿 모듈이 주로 표시용이고 메서드는 템플릿을 사용하여 페이지에서 정의되어야 한다는 것입니다. 구성 요소 구성 요소에는 자체 js 파일이 있으며 전체 구성 요소 구성 요소는 페이지와 유사합니다. 쉽게 말하면 템플릿을 사용하는 것이 좋습니다. 컴포넌트에 많은 로직이 포함되어 있습니다. 컴포넌트

디버깅

을 사용하는 것이 좋습니다. console.log는 데이터를 인쇄하고 AppData는 데이터를 봅니다.

2. 미니 프로그램은 현재 기본 라이브러리 버전에 주의하여 일부 호환성 및 버그 문제를 조정합니다.

3 미니 프로그램은 먼저 오른쪽 상단에 디버깅 디스플레이 vConsole을 엽니다. 개발 버전 또는 평가판 코너에서 공식 버전으로 전환하여 vConsole 모드를 확인하세요

Data transfer

1. 데이터 캐시, wx.setStorage 및 wx.getStorage를 사용하세요. 문자열 형식이므로 일반적으로 설정 중에 객체를 문자열로 변환하려면 JSON.stringfy를 사용해야 합니다. JSON.parse를 사용하여 객체를 객체로 복원하세요.

2. wx.navigateTo는 매개변수 전달로 점프하고 이후 문자열을 연결합니다. onLoad() 함수에서 options.parameter 이름을 통해 전달된 매개변수를 얻습니다. 참고 특수 문자(예: ?# 등)가 있는 경우 encodeURIComponent 및 decodeURIComponent를 사용하여 인코딩 및 디코딩할 수 있습니다. 잘려서 특수 문자 뒤의 데이터를 전송할 수 없게 됩니다

3. getCurrentPages() 함수는 현재 페이지 스택의 인스턴스를 가져오는 데 사용됩니다. 페이지 스택을 가져오거나 페이지를 수정할 수 있습니다. 스택 데이터

4. getApp()은 전역 개체 및 메서드를 가져올 수 있습니다.

탐색 모음 캡슐 정렬 적응

탐색 모음은 일반적으로 사용자 정의되어 있어 더 유연하고 제어 가능합니다. 먼저 NavigationStyle을 설정해야 합니다. : app.json에서 사용자 정의한 다음 wx.getMenuButtonBoundingClientRect() 애플릿을 사용하여 오른쪽 상단에 있는 캡슐 메뉴의 위치 정보를 가져옵니다. 그러나 이 인터페이스는 불안정하며 일부 모델에서는 가져오지 못하는 버그가 있습니다. 따라서 wx .getSystemInfo를 사용하여 장치의 상태 표시줄 높이(예: 전화 시간 및 배터리 열의 높이)와 제목 표시줄 높이(예: 탐색 반환 키, 제목, 및 capsule) 기본 설정은 Android의 경우 48, ios의 경우 44입니다(미니 프로그램 기본 캡슐은 Android의 제목 표시줄 중앙에 48px입니다. Android의 경우 카테고리가 더 많기 때문에 약간의 차이가 있습니다. ios는 44px입니다. 제목 표시줄의 중앙) 탐색 표시줄의 전체 높이는 상태 표시줄 높이 + 제목 표시줄 높이입니다. 패딩 상단 높이는 상태 표시줄 높이이며, 제목 표시줄의 요소는 제목 표시줄에 맞게 수직으로 정렬됩니다. 캡슐 콘텐츠 높이를 설정할 때 calc(100vh - 탐색 모음의 전체 높이)를 사용하고 전역 app.wxss

unionid 식별

에 스타일을 넣을 수 있습니다.

Unionid는 미니 프로그램 사용자의 프로그램 간 식별입니다. Unionid를 가지려면 먼저 WeChat 오픈 플랫폼(WeChat 오픈 플랫폼 - 관리 플랫폼 - 미니 프로그램 - 미니 프로그램 바인딩)을 바인딩해야 합니다. WeChat 오픈 플랫폼. 미니 프로그램을 미니 프로그램에 바인딩하지 마세요. 프로그램이 WeChat 오픈 플랫폼에 바인딩되어 있으면 Unionid가 없습니다. 서로 다른 미니 프로그램의 유니온 ID가 다르면 미니 프로그램을 마운트해야 합니다. 동일한 사용자에 대해 Unionid는 동일한 WeChat 개방형 플랫폼의 다른 애플리케이션에서도 동일합니다.

백엔드는 Unionid를 프런트엔드에 반환합니다. 먼저 wx.login이 사용자 로그인 자격 증명 코드를 가져온 다음 wx를 가져옵니다. getSetting은 권한이 있는지 확인하고, wx.getUserInfo는 사용자 정보를 가져오고, 사용자 정보의 암호화된 필드를 통해 WeChat 서버에 Unionid를 백엔드에 반환합니다. 요청에 의해 반환된 데이터는 Page.onLoad 이후에 반환될 수 있으므로, 일반적으로 콜백이 추가됩니다(Unionid 가져오기는 일반적으로 app.js의 onLaunch에 배치되므로 이를 처리하고 onLoad 페이지의 데이터 획득을 처리하려면 콜백이 필요합니다)

인터페이스 요청

모두 추출하는 것이 좋습니다. 미니 프로그램 요청은 백엔드 매핑을 위해 WeChat 백엔드와 귀하가 요청한 인터페이스를 통해 백엔드 주소를 요청하는 것입니다. 실제로 우리는 WeChat의 백엔드에 매핑했습니다. WeChat 백엔드는 wx.request에서 호출한 URL을 가져오고 백엔드를 사용하여 백엔드를 요청하므로 도메인 간 문제가 없습니다

입력 키보드

다양한 시나리오 고려 텍스트 키보드와 같은 다양한 유형을 사용하세요. 사용자 경험을 향상시키기 위한 숫자 키보드

wux-weapp

작은 프로그램 구성 요소가 더 권장됩니다. 풍부한 구성 요소와 유연한 확장이 가능한 wux-weapp입니다

추천 튜토리얼: "WeChat Mini Program"

위 내용은 WeChat 미니 프로그램 지식 포인트 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!