uni-app개발 및 학습 경험 을 저와 공유 할 모든 사람을 환영합니다 !
최근 많은 친구들이 저와 개인적으로 대화를 나눴는데 직장에서 해결할 수없는 문제가 있었는데, 그 아이디어와 방법을 말씀 드릴 수 있기를 바랍니다. 상황은 다음과 같습니다.
앱 原生导航栏的返回按钮상단, WeChat 애플릿 상단의 기본 탐색 표시 줄에 표시不显示返回按钮
▼ 기술 소개
Uni-app은 일반적으로 사용되는 구성 요소와 JS API를 프레임 워크에 캡슐화했습니다 .uni-app 사양에 따라 개발하는 개발자는 다중 플랫폼 호환성을 보장 할 수 있으며 대부분의 비즈니스는 직접 만족할 수 있습니다.
그러나 각 플랫폼에는 고유 한 특성이 있으므로 크로스 플랫폼이 될 수없는 상황이있을 수 있습니다.
大量写 if else, 코드 실행 성능 저하 및 관리 혼란을 유발합니다.
다른 프로젝트로 컴파일 한 후 두 번째 수정은 후속 업그레이드를 매우 어렵게 만듭니다.
C 언어에 의해 #ifdef、#ifndef방법, 그 것이다 windows、mac코드를 컴파일 다른 운영 체제처럼. uni-app은이 아이디어를 참조하고, uni-app에 대한 조건부 컴파일 수단을 제공하고, 프로젝트에서 플랫폼 개인화 실현을 우아하게 완성합니다.
▼ 조건부 컴파일
공식 문서 : https://uniapp.dcloud.io/platform
조건부 컴파일에는 특수 주석이 표시되어 있습니다. 이러한 특수 주석에 따르면 주석의 코드는 컴파일 중에 다른 플랫폼으로 컴파일됩니다.
일반적인 쓰기 :
에 #ifdef또는 #ifndef추가 %PLATFORM%로 시작 #endif끝.
CSS 스타일
/* #ifdef APP-PLUS */
width: 60upx;
height: 60upx;
/* #endif */
html 태그
/* #ifdef APP-PLUS */
<button type="default"></button>
/* #endif */
js 함수
change() {
// #ifdef APP-PLUS
statusbarHeight = plus.navigator.getStatusbarHeight()
// #endif
}
▼ 펼치기
#ifdef: 정의 된 경우 특정 플랫폼에만 존재 함
#ifndef; : 정의되지 않은 경우 특정 플랫폼에서만 존재 함 ; :
%PLATFORM%플랫폼 이름은 다음과 같이 작성됩니다.
대기 :
- .전망
- .js
- .css
- pages.json
- .scss, .less, .stylus, .ts, .pug와 같은 사전 컴파일 된 언어 파일
注意:: 조건부 컴파일은 주석을 사용하여 실현되며 주석 작성은 문법에 따라 다르며 js는 // 주석을 사용하고 css는 / * 주석 * / 및 vue / nvue 템플릿을 사용합니다.