유니앱의 실용적인 커뮤니티 데이트를 소개합니다: 프로젝트 및 환경 구축

추천(무료): uni-app development tutorial

글 디렉토리

• 프로젝트 소개
• 1. 환경 설정 및 프로젝트 생성
• 1 .개발 환경 구축
  • 2. 유니앱 프로젝트 생성
  3. 멀티 터미널 디버깅 환경 구축
• 1. iOS 실제 머신 디버깅 구성
  • 3. 디버깅 구성
  • 4. 알리페이 애플릿 디버깅 구성
  • 요약
• 머리말

이 글은 주로 프로젝트 개요와 환경 구성을 소개합니다. 이 프로젝트는 유니앱을 기반으로 개발된 커뮤니티 데이팅 APP입니다. ; 환경 구축은 주로 HbuilderX를 기반으로 하며 동시에 프로젝트를 생성하여 테스트하고 실행할 수 있으므로 여러 플랫폼과 호환되기 위해서는 다중 터미널 디버깅 환경을 구축해야 합니다. Android, iOS, WeChat 애플릿, Alipay 애플릿 등을 포함합니다.

1. 프로젝트 소개

이 프로젝트는 uni-app을 기반으로 한 실용적인 커뮤니티 데이트 앱 개발로,

일회성 개발과 다중 단말기 출시

를 동시에 달성하고, 안드로이드 앱에도 동시에 퍼블리싱합니다. , iOS 앱, WeChat 미니 프로그램, Alipay 애플릿 및 기타 플랫폼에서 백엔드 인터페이스는 Python Django를 사용하여 구현됩니다. 이 프로젝트에는 게시물 모듈, 주제 모듈, 검색 모듈, 멤버십 모듈, 채팅 모듈, 광고 모듈 및 기타 모듈 등이 포함되어 있으며 최종적으로 풍부한 기능과 아름다운 인터페이스를 구현합니다.


동적 시연 효과는 다음과 같습니다.

uni-app 커뮤니티 커뮤니티 데이트 APP 개발 시연

2. 환경 구축 및 생성 프로젝트

1. 개발 환경 구축

핵심 이 프로젝트의 편집자 도구는 공식 웹사이트 https://www.dcloud.io/hbuilderx.html에서 다운로드할 수 있는 HBuilderX입니다. 다운로드할 필수 시스템과 버전을 선택하기만 하면 됩니다. 다운로드 후 설치 디렉터리에 압축을 풀고, 압축이 풀린 디렉터리에서 HBuilderX.exe를 클릭하여 사용하시면 됩니다.

열고 나면 인터페이스는 다음과 같습니다.

개발 속도를 높이기 위해 일부 플러그인을 설치할 수 있습니다.
를 클릭하여 필요한 플러그인 설치를 선택하세요. 실제 시스템에서 실행되는 앱, uni-App 앱 디버깅 등 기본적으로 이러한 플러그인은 플러그인 마켓에서의 설치를 지원하지 않습니다.

scss/sass 컴파일 등을 설치하도록 선택할 수도 있습니다. DCloud 플러그인 마켓 https://ext.dcloud.net.cn/?cat1=1&cat2=11&orderBy=TotalDownload에서 선택하고 다음을 사용하여 설치할 수 있습니다. HBuilderX를 사용하여 플러그인을 가져옵니다.

导航栏 → 工具插件 → 安装2. uni-app 프로젝트 생성

HBuilderX를 사용하여 초기 프로젝트를 생성하고 다음과 같이 Community_Dating이라는 uni-app을 선택합니다.

생성 후 디버그하고 실행할 수 있습니다. 앱, 작은 프로그램 등에 실행합니다. 다각적입니다.

Android 앱 디버깅을 예로 들면
실제 장치 테스트를 선택한 경우 사전에 휴대폰을 연결하고 USB 디버깅을 켜야 합니다.

분명히 앱이 성공적으로 실행되었습니다. 안드로이드 측에서.
3. 멀티 터미널 디버깅 환경 구축

1. 안드로이드 폰 디버깅 구성

실제 머신 디버깅은 앱의 실제 실행 상태를 최대한 보여줍니다.

Huawei Nova2를 예로 들어 보겠습니다. USB 데이터 케이블을 휴대폰에 연결한 후 다음과 같이 연결 방법을 변경하여 파일을 전송해야 합니다.

그런 다음 처음인 경우 개발자 모드를 엽니다. 버전 번호를 여러 번 클릭한 다음 USB 디버깅을 열어야 합니다. 프로세스는 다음과 같습니다.

이 때 방금 추가한 실제 장치는 다음과 같이 실행 옵션에 추가됩니다.

이 시점에서 디버깅을 할 수 있습니다. 프로세스는 "2. 환경 설정 및 프로젝트 생성"의 APP 실행과 동일합니다.
동시에 다음과 같이 프로젝트 코드 변경 시 APP에 대한 실시간 업데이트와 동적 디버깅을 지원합니다.

보시다시피 동적 컴파일과 업데이트가 구현됩니다.

2. iOS 실제 장치 디버깅 구성

데이터 케이블을 사용하여 iPhone을 연결하고 화면 표시용 iTunes을 설치합니다.
디버깅할 때 다음 프롬프트가 나타날 수 있습니다:

즉, 未受信任的企业级开发者，需要进行设置，进入设置 → 通用 → 设备管理 → Digital Heaven (Beijing) lnternet... → 信任“Digital Heaven(Beijing) Internet & Te... 이때 디버깅을 위한 애플리케이션을 입력하면 앱이 성공적으로 실행될 수 있습니다.

3. WeChat 애플릿 디버깅 구성

WeChat 애플릿을 사용하여 디버깅하는 경우 먼저 WeChat 개발자 도구를 설치해야 합니다. https://mp.weixin.qq.com/debug/wxadoc/dev / devtools/download.html설치할 적절한 시스템과 버전을 선택하세요.
디버깅하기 전에 다음과 같은 두 가지 구성 단계가 필요합니다.
(1) WeChat 개발자 도구의 설치 경로를 구성합니다.
(2) WeChat 개발자 도구의 서비스 포트를 엽니다.

자세한 사항은 https://blog.csdn.net/CUFEECR/article/details/111088889 2부를 참고해주세요.

실행 과정은 다음과 같습니다.

실제 머신에서 미리보기 및 디버그도 가능합니다.

4. Alipay 애플릿 디버깅 구성

Alipay 애플릿 디버깅을 사용하기 전에 https://opendocs.alipay.com/mini/ide/download를 클릭하여 적절한 버전을 선택해야 합니다. 시스템 및 설치.
설치 후 다음과 같이 Alipay 애플릿 개발자 도구 경로를 설정해야 합니다.

이 때 Alipay 애플릿 개발자 도구를 다음과 같이 실행합니다.

Alipay 애플릿이 실행되고 있는 것을 볼 수 있습니다. 동시에 동적 컴파일.

개발자 도구에서 미리 보는 것 외에도 다음과 같이 실제 장치에서 미리 볼 수도 있습니다.

는 동일한 미리 보기 효과를 얻습니다.

요약

Vue.js를 사용하여 크로스 플랫폼 애플리케이션을 개발하기 위한 프런트 엔드 프레임워크인 uni-app은 Vue.js 코드 세트를 작성하고 이를 iOS, Android, WeChat 애플릿과 같은 여러 플랫폼으로 컴파일할 수 있습니다. 등 다중 단말기 공유가 가능해 개발 및 학습 비용을 대폭 절감하고 개발 속도를 높인다. uni-app을 사용하여 커뮤니티 데이트 앱을 개발하면 일련의 코드를 여러 플랫폼에 게시하는 효과를 빠르게 얻을 수도 있습니다.

위 내용은 유니앱의 실용적인 커뮤니티 데이트를 소개합니다: 프로젝트 및 환경 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!