미니 앱 구성요소

웹 구성요소는 개발자가 이들을 조합하여 멋진 앱을 빌드할 수 있게 해준다는 약속에서 시작되었습니다. 이러한 원자적 구성요소의 예로는 GitHub의 time-elements, Stefan Judits의 web-vitals-element, Google의 어두운 모드 전환을 들 수 있습니다. 하지만 전체 디자인 시스템의 경우 동일한 공급업체의 일관된 구성요소 집합을 사용하는 것이 좋다는 의견이 많았습니다. 일부 예로는 SAP의 UI5 웹 구성요소, Polymer 요소, Vaadin 요소, Microsoft의 FAST, Material 웹 구성요소, AMP 구성요소 등이 있습니다. 그러나 이 도움말의 범위를 벗어나는 여러 요인으로 인해 많은 개발자가 React, Vue.js, Ember.js와 같은 프레임워크를 사용하고 있습니다. 슈퍼 앱 제공업체는 개발자가 이러한 옵션 중에서 자유롭게 선택할 수 있도록 하거나(또는 관점에 따라 기술 선택을 강요함) 개발자가 반드시 사용해야 하는 구성요소 집합을 보편적으로 제공합니다.

미니 앱의 구성요소

이러한 구성요소는 위에 언급된 구성요소 라이브러리와 마찬가지로 생각할 수 있습니다. 사용 가능한 구성요소를 간략히 살펴보려면 WeChat의 구성요소 라이브러리, ByteDance의 구성요소, Alipay의 구성요소, Baidu의 구성요소, 빠른 앱 구성요소를 둘러보세요.

앞서 예를 들어 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.modemode 속성, srcsrc 속성, 세 개의 이벤트 핸들러 onTap, onError, onLoad와 동일한 이름의 함수 간의 데이터 바인딩에 주의하세요. 앞서 설명한 대로 <image> 태그는 내부적으로 이미지의 최종 크기 자리표시자, 선택적 지연 로드, 기본 소스 등으로 <div>로 변환됩니다.

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

구성요소 미리보기가 삽입된 Alipay 구성요소 문서. 시뮬레이터가 포함된 코드 편집기와 시뮬레이션된 iPhone 6에서 렌더링된 구성요소를 보여줍니다.
구성요소 미리보기가 삽입된 Alipay 구성요소 문서입니다.
시뮬레이터가 포함된 코드 편집기와 시뮬레이션된 iPhone 6에서 렌더링된 구성요소를 보여주는 Alipay 구성요소 미리보기가 별도의 브라우저 탭에서 실행되고 있습니다.
Alipay 구성요소 미리보기가 자체 탭으로 튀어나왔습니다.

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

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

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

커스텀 구성요소

개발자는 공급업체에서 제공하는 구성요소를 사용하는 것 외에도 맞춤 구성요소를 만들 수 있습니다. 이 개념은 WeChat, ByteDance, Alipay, 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>

감사의 말씀

이 도움말은 조 미들리, 케이스 바스케스, 밀리차 미하일리아, 앨런 켄트, 케이스 구님이 검토했습니다.