미니 앱 구성요소

Thomas Steiner

참고: 이 게시물은 각 게시물이 이전 게시물을 기반으로 하는 게시물 모음의 일부입니다. 여기에 바로 도착한 경우 처음부터 읽어보는 것이 좋습니다.

웹 구성요소

웹 구성요소는 개발자가 웹 구성요소를 함께 연결하고 웹 구성요소를 기반으로 훌륭한 앱을 빌드할 수 있도록 지원한다는 약속으로 시작되었습니다. 이러한 원자 구성요소의 예로는 GitHub의 time-elements, Stefan Judis의 web-vitals-element 또는 Google의 어두운 모드 전환(홍보)이 있습니다. 하지만 완전한 디자인 시스템의 경우 사용자는 동일한 공급업체의 일관된 구성요소 집합을 사용하는 것을 선호하는 것으로 관찰되었습니다. 예로는 SAP's UI5 웹 구성요소, the Polymer 요소, Vaadin's 요소, Microsoft's FAST, the Material 웹 구성요소, AMP 구성요소(논란의 여지가 있음) 등이 있습니다. 하지만 이 도움말의 범위를 벗어나는 여러 요인으로 인해 많은 개발자가 React, Vue.js, Ember.js 등의 프레임워크로 몰려들었습니다. 슈퍼 앱 제공업체는 개발자에게 이러한 옵션 중에서 선택할 수 있는 자유를 제공하는 대신 (또는 관점에 따라 기술을 선택하도록 강요 하는 대신) 개발자가 사용해야 하는 구성요소 집합을 보편적으로 제공합니다.

미니 앱의 구성요소

이러한 구성요소는 위에 언급된 구성요소 라이브러리와 비슷하다고 생각하면 됩니다. 사용 가능한 구성요소의 개요를 보려면 WeChat의 구성요소 라이브러리, ByteDance의 구성요소, Alipay의 구성요소, Baidu의 구성요소, Quick App 구성요소를 찾아보면 됩니다.

앞서 WeChat의 <image> 는 내부적으로 웹 구성요소이지만 이러한 구성요소가 모두 기술적으로 웹 구성요소는 아니라고 설명했습니다. 일부 구성요소(예: <map> 및 <video>)는 WebView 위에 레이어링되는 OS 내장 구성요소 로 렌더링됩니다. 개발자에게 이 구현 세부정보는 표시되지 않으며 다른 구성요소와 마찬가지로 프로그래밍됩니다.

세부정보는 항상 다르지만 전반적인 프로그래밍 개념은 모든 슈퍼 앱 제공업체에서 동일합니다. 중요한 개념은 마크업 언어에서 이전에 설명한 데이터 결합입니다. 일반적으로 구성요소는 기능별로 그룹화되므로 작업에 적합한 구성요소를 더 쉽게 찾을 수 있습니다. 아래는 다른 공급업체의 구성요소 그룹화와 비슷한 Alipay의 분류 예입니다.

• 컨테이너 보기
  • view
  • swiper
  • scroll-view
  • cover-view
  • cover-image
  • movable-view
  • movable-area
• 기본 콘텐츠
  • text
  • icon
  • progress
  • rich-text
• 양식 구성요소
  • button
  • form
  • label
  • input
  • textarea
  • radio
  • radio-group
  • checkbox
  • checkbox-group
  • switch
  • slider
  • picker-view
  • picker
• 탐색
  • navigator
• 미디어 구성요소
  • image
  • video
• 캔버스
  • canvas
• 지도
  • map
• 열린 구성요소
  • web-view
  • lifestyle
  • contact-button
• 접근성
  • aria-component

아래에서 index.js에 제공된 이미지 데이터 배열을 반복하는 a:for 명령어 (목록 렌더링 참고)에 사용된 Alipay의 <image>를 확인할 수 있습니다.

/* index.js */
Page({
  data: {
    array: [
      {
        mode: "scaleToFill",
        text: "scaleToFill",
      },
      {
        mode: "aspectFit",
        text: "aspectFit",
      },
    ],
    src: "https://images.example.com/sample.png",
  },
  imageError(e) {
    console.log("image", e.detail.errMsg);
  },
  onTap(e) {
    console.log("image tap", e);
  },
  imageLoad(e) {
    console.log("image", e);
  },
});

<!-- index.axml -->
<view class="page">
  <view class="page-section" a:for="{{array}}" a:for-item="item">
    <view class="page-section-demo" onTap="onTap">
      <image
        class="image"
        mode="{{item.mode}}"
        onTap="onTap"
        onError="imageError"
        onLoad="imageLoad"
        src="{{src}}"
        lazy-load="true"
        default-source="https://images.example.com/loading.png"
      />
    </view>
  </view>
</view>

item.mode의 mode 속성에 대한 데이터 결합, src의 src 속성에 대한 데이터 결합, 세 개의 이벤트 핸들러 onTap, onError, onLoad를 동일한 이름의 함수에 대한 데이터 결합에 유의하세요. 앞서 설명한 것처럼 <image> 태그는 내부적으로 이미지의 최종 크기 자리표시자, 선택적 지연 로드, 기본 소스 등이 포함된 <div>로 변환됩니다.

구성요소의 사용 가능한 구성 옵션은 모두 문서에 나열되어 있습니다. 시뮬레이터가 포함된 문서 내장 구성요소 미리보기 를 사용하면 코드를 즉시 실질적으로 사용할 수 있습니다.

구성요소 미리보기가 포함된 Alipay 구성요소 문서

자체 탭으로 팝업된 Alipay 구성요소 미리보기

각 구성요소에는 자체 포함된 최소 예에서 구성요소 예제를 여는 Alipay 앱으로 스캔할 수 있는 QR 코드도 있습니다.

문서의 QR 코드 링크를 따라간 후 실제 기기에서 Alipay <image> 구성요소 미리보기

개발자는 독점 URI 스킴 antdevtool-tiny://를 활용하여 문서에서 Alipay DevTools IDE로 바로 이동할 수 있습니다. 이를 통해 문서를 가져올 미니 앱 프로젝트에 직접 연결할 수 있으므로 개발자가 구성요소를 즉시 시작할 수 있습니다.

커스텀 구성요소

개발자는 공급업체에서 제공하는 구성요소를 사용하는 것 외에도 커스텀 구성요소를 만들 수 있습니다. 이 개념은 WeChat, ByteDance, Alipay, Baidu Baidu 및 Quick App에 존재합니다. 예를 들어 Baidu 커스텀 구성요소는 동일한 폴더에 있어야 하는 4개의 파일( custom.swan, custom.css, custom.js, custom.json)로 구성됩니다.

custom.json 파일은 폴더 콘텐츠를 커스텀 구성요소로 나타냅니다.

{
  "component": true
}

custom.swan 파일에는 마크업이 포함되어 있고 custom.css에는 CSS가 포함되어 있습니다.

<view class="name" bindtap="tap">{{name}} {{age}}</view>

.name {
  color: red;
}

custom.js 파일에는 로직이 포함되어 있습니다. 구성요소 수명 주기 함수는 attached(), detached(), created(), ready()입니다. 구성요소는 페이지 수명 주기 이벤트 , 즉 show() 및 hide()에도 반응할 수 있습니다.

Component({
  properties: {
    name: {
      type: String,
      value: "swan",
    },
  },
  data: {
    age: 1,
  },
  methods: {
    tap: function () {},
  },
  lifetimes: {
    attached: function () {},
    detached: function () {},
    created: function () {},
    ready: function () {},
  },
  pageLifetimes: {
    show: function () {},
    hide: function () {},
  },
});

그러면 커스텀 구성요소를 index.json으로 가져올 수 있습니다. 가져오기의 키는 커스텀 구성요소를 index.swan에서 사용할 수 있는 이름 (여기서는 "custom")을 결정합니다.

{
  "usingComponents": {
    "custom": "/components/custom/custom"
  }
}

<view>
  <custom name="swanapp"></custom>
</view>

성공: 계속 읽고 미니 앱의 프로젝트 구조, 수명 주기, 번들링에 대해 알아보세요.

감사의 말씀

이 도움말은 Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, Keith Gu가 검토했습니다.