> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 미니 프로그램의 개발 단계를 요약하고 공유합니다.

WeChat 미니 프로그램의 개발 단계를 요약하고 공유합니다.

WBOY
풀어 주다: 2022-02-24 17:44:33
앞으로
8966명이 탐색했습니다.

이 글은 WeChat 미니 프로그램 개발에 대한 관련 지식을 제공합니다. 준비 작업, 프레임워크 소개, 프로그램 개발 및 디자인 사양을 포함한 WeChat 미니 프로그램 개발 단계를 주로 소개합니다. 도움이 되는.

WeChat 미니 프로그램의 개발 단계를 요약하고 공유합니다.

【관련 학습 권장 사항: 미니 프로그램 개발 튜토리얼

이 문서에서는 WeChat 미니 프로그램 개발 단계를 간략하게 설명합니다. 자세한 내용은 WeChat 개발 설명서

1를 참조하세요. : 등록 https:// mp.weixin.qq.com/wxopen/waregister?action=step1

위챗 공개 플랫폼에 등록되지 않은 이메일 주소로 위챗 공개 계정을 등록하고, 계정을 신청하고, 지침에 따라 정보를 제출하고 해당 정보를 제출하면 자신만의 소규모 프로그램 계정을 가질 수 있습니다. 등록이 완료되면 로그인하세요.


2: https://mp.weixin.qq.com

에 로그인하면 "설정" - "개발 설정" 메뉴에서 미니 프로그램의 AppID를 확인할 수 있습니다. 미니 프로그램의 AppID는 미니 프로그램 플랫폼의 ID 카드와 동일합니다. AppID는 나중에 여러 곳에서 사용하게 됩니다. (서비스 계정이나 구독 계정의 AppID와는 달라야 합니다.) 미니 프로그램 계정을 만든 후에는 미니 프로그램을 개발할 수 있는 도구가 필요합니다.

공식 튜토리얼에 따라 개발 https://developers.weixin.qq.com/miniprogram/dev/framework/


3: 개발 도구 설치

개발자 도구 다운로드 페이지로 이동하여 귀하의 요구에 따라 해당 설치 패키지를 다운로드하십시오. 운영체제 설치 개발자 도구에 대한 자세한 소개는 "개발자 도구 소개"를 참조하세요. 미니 프로그램 개발자 도구를 열고 WeChat을 사용하여 QR 코드를 스캔하여 개발자 도구에 로그인한 후 첫 번째 미니 프로그램을 개발할 준비를 하세요!

개발 도구 관련 정보는 [WeChat 개발자 도구]를 통해 자세히 알아볼 수 있습니다.


4: 첫 번째 미니 프로그램 열기

새 프로젝트 생성, 미니 프로그램 프로젝트 선택, 코드가 저장된 하드 디스크 경로 선택 , 새로 적용된 미니 프로그램의 AppID를 입력하고 프로젝트에 좋은 이름을 지정한 다음 마지막으로 "Create QuickStart Project"를 선택하고(참고: 이 옵션을 사용하려면 빈 디렉터리를 선택해야 함) 확인을 클릭한 다음 이것은 첫 번째 애플릿입니다. IDE에서 첫 번째 애플릿을 미리 보려면 상단 메뉴에서 컴파일을 클릭하세요.

5: 컴파일 미리보기

도구에서 컴파일 버튼을 클릭하면 도구 왼쪽의 시뮬레이터 인터페이스에서 이 작은 프로그램의 성능을 볼 수 있습니다. 또는 미리보기 버튼을 클릭하여 컴퓨터에서 경험해 볼 수도 있습니다. WeChat에서 스캔하여 전화 최초의 작은 프로그램입니다.

위 섹션의 내용은 WeChat Open Documents의 [시작]-[시작]에서 볼 수 있습니다.

2. 프레임워크 소개

미니 프로그램 개발 프레임워크의 목표는 개발자가 가능한 가장 간단하고 효율적인 방법으로 WeChat의 기본 APP 경험을 바탕으로 서비스를 개발할 수 있도록 하는 것입니다.

전체 미니 프로그램 프레임워크 시스템은

Logic 레이어

(App Service)와 View 레이어(View)의 두 부분으로 나뉩니다. 애플릿은 자체 뷰 레이어 설명 언어인 WXML 및 WXSS와 JavaScript 기반 로직 레이어 프레임워크를 제공하고, 뷰 레이어와 로직 레이어 사이에 데이터 전송 및 이벤트 시스템을 제공하므로 개발자는 데이터와 로직에 집중할 수 있습니다.

반응형 데이터 바인딩

프레임워크의 핵심은 매우 간단하게 데이터를 뷰와 동기화할 수 있는 반응형 데이터 바인딩 시스템입니다. 데이터를 수정할 때 논리 계층의 데이터만 수정하면 되며 그에 따라 뷰 계층도 업데이트됩니다.

페이지 관리

프레임워크는 전체 미니 프로그램의 페이지 라우팅을 관리하여 페이지 간 원활한 전환을 가능하게 하고 페이지에 완전한 수명 주기를 제공합니다. 개발자가 해야 할 일은 페이지의 데이터, 메소드 및 라이프사이클 기능을 프레임워크에 등록하는 것 뿐이며, 기타 모든 복잡한 작업은 프레임워크에 의해 처리됩니다.

기본 구성요소

프레임워크는 WeChat 스타일 스타일과 특수 로직이 포함된 기본 구성요소 세트를 제공합니다. 개발자는 기본 구성요소를 결합하여 강력한 WeChat 미니 프로그램을 만들 수 있습니다.

Rich API

프레임워크는 사용자 정보 획득, 로컬 저장, 결제 기능 등과 같이 WeChat에서 제공하는 기능을 쉽게 활성화할 수 있는 풍부한 WeChat 기본 API를 제공합니다.
3. 프로그램 개발

HTML+CSS+js를 배우고 위챗 개발 문서를 읽으면 위챗 미니 프로그램 개발을 쉽게 시작할 수 있어요~~

    Entrance
  • 각 미니 프로그램을 호출해야 합니다. 애플릿 인스턴스 등록, 라이프사이클 콜백 함수 바인딩, 오류 모니터링 및 페이지 존재 여부 모니터링 기능 등을 위한 app.js의 앱 메서드
    // app.jsApp({
      onLaunch (options) {
        // Do something initial when launch.
      },
      onShow (options) {
        // Do something when show.
      },
      onHide () {
        // Do something when hide.
      },
      onError (msg) {
        console.log(msg)
      },
      globalData: 'I am global data'})
    로그인 후 복사
  • 전체 미니 프로그램에는 모든 페이지에서 공유되는 앱 인스턴스가 하나만 있습니다. 개발자는 getApp 메소드를 통해 전역적으로 고유한 App 인스턴스를 얻거나, App에서 데이터를 얻거나, 개발자가 App에 등록한 기능을 호출할 수 있습니다.
// xxx.jsconst appInstance = getApp()console.log(appInstance.globalData) // I am global data
로그인 후 복사
  • 全局配置
    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
    详见【全局配置】

  • 页面配置
    每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
    详见【页面配置】

  • 小程序生命周期
    注册小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。
    详细api详见https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

  • 页面生命周期
    注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。
    生命周期对象详见https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

  • 组件
    自带组件库weUI

  • API
    丰富的api
    https://developers.weixin.qq.com/miniprogram/dev/api/

详细信息可具体参考《小程序开发指南

【相关学习推荐:小程序开发教程

위 내용은 WeChat 미니 프로그램의 개발 단계를 요약하고 공유합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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