WeChat 미니 프로그램에서 vue.js를 사용할 수 있나요?

coldplay.xixi
풀어 주다: 2020-11-17 18:20:03
원래의
8287명이 탐색했습니다.

WeChat 미니 프로그램은 vue.js를 사용할 수 있습니다. mpvue는 [Vue.js]를 사용하여 WeChat 미니 프로그램을 개발하는 프런트 엔드 프레임워크입니다. 이 프레임워크를 사용하면 개발자는 완전한 [Vue.js] 개발 경험을 얻을 수 있습니다. 동시에 H5이며 미니 프로그램은 코드를 재사용할 수 있는 기능을 제공합니다. ㅋㅋㅋ ue.js 프로그램 전면- 프레임워크 종료. 이 프레임워크를 사용하여 개발자는 완전한 Vue.js 개발 경험을 얻는 동시에 H5 및 미니 프로그램에 대한 코드 재사용 기능을 제공합니다. H5 프로젝트를 작은 프로그램으로 변환하고 싶거나, 작은 프로그램을 개발하여 H5로 변환하고 싶다면 mpvue가 매우 적합한 솔루션이 될 것입니다.

미니 프로그램 개발의 특징WeChat 미니 프로그램에서 vue.js를 사용할 수 있나요?

위챗 미니 프로그램은 간결한 개발 방식을 권장하며, 다중 페이지 집계를 통해 경량화된 제품 기능을 완성합니다. 미니 프로그램은 오프라인 패키지로 로컬에 다운로드되어 위챗 클라이언트를 통해 로딩 및 시작된다. 개발 사양이 간단하고 기술이 철저하게 캡슐화되어 있으며 자체 개발 시스템을 갖추고 있지만 네이티브와 H5의 그림자가 있다. 결코 동일하지 않습니다. 애플릿 자체는 단순한 논리적 뷰 레이어 프레임워크로 자리잡고 있습니다. 복잡한 애플리케이션을 개발하는 것은 공식적으로 권장되지 않지만 비즈니스 요구 사항을 단순화하기는 어렵습니다. 복잡한 애플리케이션은 구성 요소 및 모듈화, 자동 구성 및 통합, 코드 재사용 및 개발 효율성 등과 같은 개발 방법에 대한 요구 사항이 더 높습니다. 그러나 작은 프로그램 개발 사양으로 인해 이러한 기능이 크게 제한됩니다. 위의 문제를 해결하고 더 나은 개발 경험을 제공하기 위해 우리는 Vue.js를 사용하여 WeChat 미니 프로그램을 개발하기 위해 mpvue를 만들었습니다. mpvue란 무엇입니까mpvue는 소규모 프로그램 개발을 목표로 하는 프런트엔드 개발 프레임워크입니다. 핵심 목표는 개발 효율성을 향상하고 개발 경험을 향상시키는 것입니다. 이 프레임워크를 사용하여 개발자는 미니 프로그램 개발 사양에 대한 사전 이해와 Vue.js의 기본 구문에 익숙해지면 시작할 수 있습니다. 프레임워크는 완전한 Vue.js 개발 경험을 제공합니다. 개발자는 Vue.js 코드를 작성하고 mpvue는 이를 작은 프로그램으로 구문 분석하고 변환하여 올바르게 실행되는지 확인합니다. 또한 프레임워크는 vue-cli 도구를 통해 개발자에게 빠른 시작 샘플 코드를 제공합니다. 개발자는 실행 가능한 프로젝트를 얻으려면 간단한 명령만 실행하면 됩니다.

mpvue를 하는 이유

미니 프로그램의 내부 테스트 초기에 우리는 H5를 벤치마킹한 제품 구현을 빠르게 반복할 계획이었습니다. 핵심 요구 사항은 빠른 구현, 코드 재사용, 저비용 및 높은 수준입니다. 효율성... 후속 경험 비즈니스 시나리오, 기술 선택 및 미니 프로그램 개발 방법을 결합하여 여러 미니 프로그램을 구축한 후 개발 단계에서 직면한 주요 문제를 요약했습니다.

컴포넌트화 메커니즘이 충분히 완벽하지 않습니다

코드 멀티 엔드 재사용성 부족

애플릿 프레임워크와 팀 기술 스택은 유기적으로 결합될 수 없습니다

애플릿 학습 비용이 충분히 낮지 않습니다

구성 요소 메커니즘:

애플릿 로직 및 뷰 레이어 코드는 서로 분리되어 있으며 추출 후 공개 구성 요소를 집계할 수 없습니다. 단일 파일 항목이고 구성 요소는 각각 뷰 레이어와 논리 레이어에 도입되어야 하므로 구성 요소에는 네임스페이스 메커니즘, 이벤트가 없습니다. 콜백은 전역 함수로 설정되어야 하고, 구성 요소 디자인은 이름 충돌의 위험이 있으며, 데이터 캡슐화는 강력하지 않습니다. 개발자에게는
  • ES 모듈을 통해 한 번에 가져올 수 있는 친숙한 코드 구성 방법이 필요합니다. 구성 요소 데이터는 잘 캡슐화되어야 합니다. 성숙한 구성 요소 메커니즘은 엔지니어링 개발에 매우 ​​중요합니다.

  • 다중 터미널 재사용:
  • 기존 H5

    제품을 미니 프로그램 애플리케이션으로 변환하거나 그 반대로 변환하는 두 가지 일반적인 비즈니스 시나리오가 있습니다. 효율성 측면에서 개발자는 코드를 재사용하여 개발을 완료하기를 원하지만 미니 프로그램 개발 프레임워크에서는 이를 수행할 수 없습니다. 정적 코드 분석을 통해 H5
  • 코드를 작은 프로그램으로 변환하려고 했으나, 뷰 레이어 변환만 했을 뿐 더 이상의 이점을 가져오지는 못했습니다. 멀티 엔드 코드 재사용에는 보다 성숙한 솔루션이 필요합니다.

  • Vue.js 소개:
  • 작은 프로그램의 개발 방법은 H5와 유사하므로 H5에서는 코드 재사용을 고려합니다. 팀의 기술 스택 선택에 따라 Vue.js를 미니 프로그램 개발 사양으로 결정했습니다. Vue.js를 사용하여 작은 프로그램을 개발하면 다음과 같은 개발 효율성 향상을 직접적으로 가져올 수 있습니다.

H5 코드는 최소한의 수정으로 작은 프로그램에 재사용할 수 있습니다.

Vue.js 구성 요소 메커니즘을 사용하여 작은 프로그램을 개발하면 작은 프로그램을 구현할 수 있습니다. 프로그램 H5 구성요소로 재사용

기술 스택이 통합되면 미니 프로그램 학습 비용이 절감됩니다. 개발자는 H5에서 미니 프로그램으로 전환할 때 더 이상 배울 필요가 없습니다.

Vue.js 코드는 모든 전면을 허용합니다. -개발 및 유지보수에 직접 참여하게 됩니다

왜 Vue.js인가요? 이는 팀의 기술 스택 선택에 달려 있습니다. 새로운 선택의 도입은 기술 스택 통합 및 개발 효율성 향상에 어긋나며 개발 도구 서비스 사업의 원래 의도에 어긋납니다.

    mpvue의 진화
  • mpvue는 비즈니스 시나리오와 요구 사항을 기반으로 구성되었으며 최종 솔루션은 세 단계를 거쳤습니다.
  • 1단계: 최초 코드 개발의 효율성을 향상시키기 위해 설계된 뷰 레이어 코드 변환 도구를 구현했습니다. HTML 태그 매핑, Vue.js 템플릿 및 스타일 변환을 포함하여 H5 뷰 레이어 코드를 애플릿 코드로 변환하여 이 대상 코드에 대한 2차 개발을 수행합니다. 제한된 코드 재사용을 달성했지만 구성 요소 개발 및 소규모 프로그램 학습 비용은 효과적으로 개선되지 않았습니다.

    두 번째 단계: 우리는 코드 구성 요소화 메커니즘을 개선하는 데 중점을 둡니다. 코드 구성 형태는 Vue.js

    컴포넌트 사양을 참조하여 설계되었으며, 코드 변환 도구를 통해 코드를 작은 프로그램으로 파싱했습니다. 변환 도구는 주로 구성 요소 간의 데이터 동기화, 수명 주기 연결 및 네임스페이스 문제를 해결합니다. 결국 우리는

    Vue.js 구문 하위 집합을 구현했지만 더 많은 기능을 구현하거나 Vue.js 버전 반복을 따르고 싶다면 작업 부하를 예측하기 어려워지고 끝없는 느낌을 받게 됩니다.

    세 번째 단계: 우리의 목표는 Vue.js 구문 전체를 지원하고 Vue.js

    를 사용하여 작은 프로그램을 개발하려는 목적을 달성하는 것입니다. 또한 Vue.js 런타임을 도입하여 Vue.js 구문에 대한 지원을 구현하므로 인간이 구문을 적용하는 것을 방지합니다. 이 시점에서

    Vue.js를 사용하여 작은 프로그램을 개발한다는 목적을 완료했습니다. 기술 스택 통합, 구성 요소 기반 개발, 멀티 엔드 코드 재사용, 학습 비용 절감 및 개발 효율성 향상이라는 목표가 더 잘 달성되었습니다.

    관련 무료 학습 권장사항: javascript(동영상), WeChat 애플릿 개발 튜토리얼

위 내용은 WeChat 미니 프로그램에서 vue.js를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!