Dianping WeChat Mini 프로그램 개발 경험 요약

Dianping+ 메인 페이지 목록

위의 미니 프로그램 특성상 사용자에게 핵심 서비스만 제공해야 하며 제품부터 기술까지 모든 것이 " 단순함." 말은 소란을 일으킨다. 따라서 Dianping의 비즈니스 시나리오와 결합하여 마침내 "Dianping+"에서는 다음과 같은 두 가지 기본 서비스를 제공합니다.

빠른 매장 찾기: 사용자가 검색, 카테고리 목록 및 추천을 통해 매장을 빠르게 찾을 수 있습니다. 위치, 전화번호, 리뷰, 요리, 기타 가맹점 정보 등을 제공하여 사용자의 의사결정에 도움

공동구매: 사용자에게 공동구매 상품을 추천하고 사용자가 혜택을 받을 수 있도록 순환형 거래를 구현합니다

제품 수준에서는 충분히 합리화되었는데, 어떻게 하면 기술 수준에서 단순성을 달성할 수 있는지 살펴보겠습니다.

먼저 프로젝트 초반 개발 학생들의 혼란을 살펴보겠습니다.

미니 프로그램은 새로운 것이며, 개발에 참여하는 동료들은 일반적으로 개발 과정과 운영에 대해 거의 알지 못합니다. 원칙

미니 프로그램에 얼마나 많은 함정이 있는지 알지 못하더라도 미니 프로그램을 열기 전에 모든 기본 기능의 개발이 완료되었는지 확인해야 합니다.

인터페이스. 미니 프로그램 성능, 연결 속도 등의 안정성, 풍부함, 보안

새로운 애플리케이션 시나리오의 경우 개발 환경, 도구 및 프레임워크가 충분히 완벽하지 않다는 것은 이해할 수 있지만 어떻게 보장할 수 있습니까? 특정 사양과 엔지니어링 기능을 제공하면서 개발 프로세스의 단순화? 이를 위해 미니 프로그램의 기본 프레임워크를 준수한다는 전제 하에 다음과 같은 기술 선택과 간단한 캡슐화를 수행했습니다.

프로젝트는 개발 디렉터리와 구성 디렉터리를 구분하고 개발 디렉터리에서 개발한 후 gulp를 사용하여 개발 디렉터리를 구성하는데 사용됩니다(주로 압축 등의 기본 기능을 처리함). 빌드 디렉터리는 미니 프로그램의 실제 실행 코드입니다.

개발 종속성 관리 및 요청 인터페이스 버전 관리를 해결하기 위해 npm의 package.json을 도입합니다. 단, npm 패키지를 사용하지 마세요(promise 구현만 복사)

ES6 구문과 eslint와 협력하여 기본적인 JS 오류를 빠르게 확인하세요. (이 단계에서는 미니 프로그램의 오류 프롬프트가 충분히 친숙하지 않으며 일부 오류는 JS 구문 오류로 인해 발생합니다.)

JS-API를 캡슐화할 것을 약속합니다. 미니 프로그램에서 제공하며, 다양한 런타임 오류를 잡기 위해 Promise 스타일로 코드를 작성했습니다

개발 과정에서 미니 프로그램 플랫폼의 차이점

애플릿은 개발자 도구인 iOS에서 실행됩니다. 기기와 안드로이드 기기마다 구현 차이가 있어 일부 디스플레이 불일치가 발생할 수 있지만, 전반적으로 이전 개발 방식에 비해 호환성 문제가 많이 줄어들었으니, 미니 프로그램팀에서 더욱 개선해 나가기를 바랍니다. 프론트엔드 프로그래머에게 도움이 되는 기본 호환성

개발적 사고와 기술적 한계

BOMDOM 작업이 없으며 뷰는 데이터를 통해서만 변경할 수 있습니다

다시 한번. , 미니 프로그램은 최대 5단계의 페이지를 지원한다는 점을 강조

개발 코드 + 미니 프로그램 컴파일 및 캡슐화된 코드 = 최종 컴파일 패키지

위에서 언급한 문제에 대해 우리는 통과했습니다. 우리 자신의 실제 솔루션 세트를 요약했으며 여기에서 개발자와 공유하고 논의할 것입니다.

개발 과정에서 우리는 개발 및 디버깅을 완료하기 위해 반드시 개발자 도구를 사용할 것이지만 이는 그렇지 않습니다. 이는 실제 머신에서 동일한 결과를 얻을 수 있다는 것을 의미합니다. 성능이 완전히 일관될 것으로 예상됩니다. 과거 하이브리드 프레임워크를 개발하면서 우리는 항상 iOS, Android 및 H5 간에 성능이 일관되지 않는 문제에 직면했습니다. 서로 다른 개발 팀 간의 기본 구현 및 커뮤니케이션 문제가 모두 다르기 때문에 이 문제를 완벽하게 해결하기는 어렵습니다.

웹 서비스 지원

웹 인터페이스 버전 관리

변경 개발 사고에서

다음 작업을 포함하되 이에 국한되지 않는 몇 가지 일반적인 솔루션이 변경됩니다.

WeChat 주소록의 앵커 전환과 유사합니다(다음을 사용하여 구현할 수 있음). WeChat의 스크롤 보기)

콘텐츠 계산 결정 잘림 + "확장/접기" 스위치 표시

이 문제를 해결하려면 대략 세 가지 아이디어가 있습니다.

최적화 제품 상호 작용 프로세스를 단순화하고 5레벨 미만이 될 때까지 제품 프로세스를 단순화하려고 합니다

redirectTo 아이디어, 페이지가 5번째 레벨에 도달하면 이후의 모든 페이지가 리디렉션 메서드를 통해 열립니다. 사용자가 N번째 페이지로 돌아가려고 클릭하면 네 번째 페이지만 표시되고 중간에 있는 N-5페이지가 누락되는 경우도 있습니다

. goBack 기술적 수단을 사용하여 메인 프로세스가 레벨 5만 되도록 보장하는 것입니다(우리 구현에서는 검색 기능을 페이지 대신 페이지의 상태로 사용하는 방법이 있고 현재 이후에는 페이지 라우팅을 균일하게 캡슐화하여 getCurrentPages 인터페이스를 사용하여 현재 페이지가 기록 스택에 있는지 여부를 확인합니다. , goBack을 통해 반환됩니다. 페이지 측 onShow 이벤트에서 최신 매개변수 정보를 읽습니다. 페이지 업데이트 작업을 완료합니다

마지막으로 코드 크기 최적화에 대해 이야기하겠습니다.

Dianping+는 현 단계에서 매장 검색과 공동 구매라는 두 가지 주요 기능만 제공하지만 결국 1M 크기로 사용자에게 더 많은 기능과 더 나은 경험을 제공하기에는 코드 크기가 너무 작습니다. 공간은 향후 확장을 위해 예약되어 있으므로 코드 크기에 대해 "주의"해야 합니다.

에서는 우리 프로젝트의 모든 json, wxml, wxss, js를 js로 변환하고 이를 하나의 파일로 병합한 후 WeChat 클라우드 서버에 업로드합니다. 사용자가 미니 프로그램을 처음 열면 서비스에서 다운로드되어 구문 분석됩니다. 프로젝트를 예로 들면, 도구 압축 및 통계를 통해 프로젝트 볼륨이 ~370K에 도달한 것으로 계산되었습니다. WeChat에서 컴파일 및 업로드하고 휴대폰에서 미리보기 및 다운로드한 후 다운로드된 파일은 ~540K에 도달했습니다. 개발자 도구 표시는 컴파일된 패키지의 크기를 알려줍니다.

개발 수준:

wxml을 단순화하면 wxml을 js로 컴파일할 때 매우 큰 볼륨을 차지한다는 사실을 발견했습니다(압축된 4K wxml을 줄임). , 컴파일 패키지를 9K로 줄일 수 있습니다)

위 내용은 Dianping WeChat Mini 프로그램 개발 경험 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!