미니 앱 구성요소

웹 구성요소

웹 구성요소는 개발자가 이를 결합하여 훌륭한 앱을 빌드할 수 있다는 약속에서 시작되었습니다. 이러한 원자적 구성요소의 예로는 GitHub의 time-elements, Stefan Judis의 web-vitals-element 또는 쉐임리스 플러그, Google의 어두운 모드 전환 등이 있습니다. 하지만 저는 사람들이 완전한 디자인 시스템을 위해 동일한 공급업체의 일관된 구성요소 집합을 사용하는 것을 선호한다는 것을 확인했습니다. 불완전한 예시 목록에는 SAP의 UI5 웹 구성요소, Polymer Elements, Vaadin의 요소, Microsoft의 FAST, Material Web Components, AMP 구성요소 등이 포함되어 있습니다. 그러나 이 문서의 범위를 벗어나는 많은 요인으로 인해 많은 개발자가 React, Vue.js, Ember.js와 같은 프레임워크에 몰려 들었습니다. 개발자에게 이러한 옵션 중 하나(또는 개발자의 관점에 따라 개발자의 관점에 따라)를 자유롭게 선택할 수 있는 자유를 주는 대신(또는 개발자의 관점에 따라 개발자가 기술 선택권을 보편적으로 선택하도록 forcing하도록) 하는 대신, 개발자가 슈퍼 앱 제공업체 세트를 보편적으로 선택하도록 할 수 있습니다.

미니 앱의 구성요소

이러한 구성요소는 위에서 언급한 구성요소 라이브러리라고 생각하면 됩니다. 사용 가능한 구성요소의 개요를 보려면 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.mode와 mode 속성의 데이터 결합, src 속성에 대한 src, 동일한 이름의 함수에 관한 세 개의 이벤트 핸들러 onTap, onError, onLoad의 데이터 결합에 유의하세요. 이전에 표시된 대로 <image> 태그는 이미지의 최종 크기의 자리표시자, 선택적 지연 로드, 기본 소스 등을 사용하여 내부적으로 <div>로 변환됩니다.

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

각 구성요소에는 Alipay 앱으로 스캔할 수 있는 QR 코드도 있습니다. 이 코드는 독립 실행형 최소 예시에서 구성요소 예시를 엽니다.

개발자는 독점 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 파일에는 마크업이 포함되어 있고 CSS는 custom.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가 검토했습니다.