소규모 프로그램 개발 경험 요약-미니 프로그램 개발-php.cn

1. WXML

1.1: wx:if 및 wx:else

프런트엔드는 백엔드 인터페이스를 통해 정보 목록을 가져오고, 그렇지 않으면 데이터 내용이 표시됩니다. 정보를 찾을 수 없습니다. if-else가 부울 값을 사용하여 이 전환을 수행하는 경우 페이지는 먼저 false 상태로 표시된 다음 true로 업데이트됩니다. 즉, 정보를 찾을 수 없다는 내용이 깜박입니다. 이런 종류의 상호 작용은 없습니다. 매우 이상적입니다.

 这是信息列表   找不到信息

로그인 후 복사

가장 좋은 방법은 다음을 사용하는 것입니다.

data:{ info:null }

로그인 후 복사

 这是信息列表   找不到信息

로그인 후 복사

1.2: wx:for

For 루프에 wx:for-item="item" wx:key="를 추가하세요. item"

1.3: 블록 태그

wx:if, wx:for, wx:else, 스타일 의미가 없는 이러한 구문은 블록을 사용해 보세요

1.4: 템플릿 구성 요소 template

공개 페이지 모듈/ 구성 요소는 wxml에서 직접 사용할 수도 있고 import 방법을 사용할 수도 있습니다. CSS가 포함된 경우 wxss의 @import를 통해 도입해야 합니다.

/** * 方式一：直接使用 * 1. 给template 设置name属性 * 2. 组件传过来的值可以直接使用 hidden="{{!isloading}}" */  /** * 方式二：按路役引入 * 1. is 等同方式一的name * 2. data="{{isloading}}" 给template的数据 */

로그인 후 복사

1.5: 스크립팅 언어 wxs

는 wxml 페이지에서 특별히 실행되는 스크립팅 언어입니다. javascript와 달리 ES6 구문 사용을 지원하지 않으며 js를 참조할 수 없습니다.

로그인 후 복사

module.exports = { //输出百分比 formatProgress: function (c,m) { return c/m*100 } }

로그인 후 복사

2. WXSS

2.1: 배경 아이콘

애플릿의 배경에서는 전체 https 이미지 경로만 사용할 수 있습니다. 프로젝트에서 아이콘을 사용하는 방법:

Vector svg. : 완벽한 확장성, 쉬운 조정(색상, 크기 등)
data-uri: 이미지 크기는 base64를 사용하여 20Kb 미만입니다. [프론트엔드 이미지 도입 최적의 방법 분석][segmentfault.com/a/119000001…]
대용량 파일: wxml에서 직접 이미지 태그 사용
외부 아이콘 도입: 알리바바 벡터 라이브러리 등 , 네트워크 경로를 사용하고 로컬 방법으로 다운로드하여 사용할 수 있습니다.

2.2: 스타일 재설정

2.3: 글꼴 계열 표준 사양

font-family: /*西文：*/ -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial, /*中文：*/ PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;

로그인 후 복사

2.4: rpx 단위의 합리적인 사용

rpx는 화면 너비의 백분율에 해당하는 상대 단위입니다. , 다음과 같이 사용하지 않는 것이 좋습니다:
font-size 및 border-width; 애니메이션 애니메이션에는 변위 변환이 포함됩니다. 일부 기계에서 rpx를 px로 변환할 때 262.89px와 같이 소수점이 있는 경우 WeChat은 값을 하향 조정합니다. 262px로 변경하면 1px 간격이 발생합니다.
QR 코드, 사진 공유 등 캔버스 그리기

3. JavaScript

3.1: wx.request 메소드의 보조 캡슐화

3.2: 페이지 수명 주기

onLoad: 페이지는 한 번만 호출됩니다. 페이지 매개변수 옵션을 얻을 수 있습니다.
onShow: 페이지 표시, 페이지가 열릴 때마다 호출되고 배경에서 전경으로 전환할 때 한 번 호출됩니다. 전화기는 꺼진 화면에서 디스플레이 화면으로, 최소화에서 최대화로 전환됩니다.
onReady: 페이지의 초기 렌더링이 완료되었습니다. 이는 페이지가 준비되었으며 뷰 레이어와 상호 작용할 수 있음을 의미합니다.
onHide: 페이지가 배경, NavigateTo 또는 탭 전환으로 전환될 때 호출됩니다.
onUnload: 페이지를 언로드하는 중입니다. 페이지가 닫혀 있거나 메모리가 부족하면 페이지를 적극적으로 삭제합니다.

3.3: 새로운 날짜 호환성

Android에서 인식 가능new Date("2018-05-30 00:00:00")格式，但在IOS只能识别2018/05/30 00:00:00格式。需要将短横替换为斜杠。var iosDate= date.replace(/-/g, '/')。

3.4: 버블링 이벤트