미니 앱 구성요소

Thomas Steiner

참고: 이 게시물은 각 문서가 이전 기사를 기반으로 하는 기사 컬렉션의 일부입니다. 이 페이지에 방금 방문하셨다면 처음부터 읽어 보시기 바랍니다.

웹 구성요소

웹 구성요소는 개발자가 이들을 조합하여 멋진 앱을 만들 수 있게 해준다는 약속을 하고 있습니다. 예시 이러한 원자적 구성요소는 GitHub의 time-elements, Stefan 주디스 web-vitals-element, 즉 뻔뻔한 플러그 Google의 어두운 모드 전환 버튼입니다. 예를 들어 그러나 저는 사람들이 일관성 있는 일련의 지시사항에 의존하는 것을 선호한다는 것을 발견했습니다. 같은 공급업체의 구성요소로 이루어져 있습니다 일부 예시에는 SAP의 UI5 웹 구성요소로, 폴리머 원소, 바딘의 요소, 마이크로소프트의 FAST, Material 웹 구성요소, AMP 구성요소 등 여러 가지가 있습니다. 이로 인해 이 글에서 다룰 범위를 벗어난 여러 가지 요인이 있지만, React, Vue.js, Ember.js 등입니다. 개발자에게 선택의 자유를 제공하기보다는 (또는 사용자의 의견에 따라 기술 선택을 강요함) 슈퍼 앱 제공자는 개발자가 사용해야 하는 구성 요소 집합을 보편적으로 제공합니다.

미니 앱의 구성요소

이러한 구성요소는 위에 언급된 구성요소 라이브러리라고 생각하면 됩니다. 크레딧을 받으려면 구성요소 개요에서 WeChat 구성요소 라이브러리 ByteDance의 구성요소, Alipay 구성요소 Baidu's 빠른 앱 구성요소.

앞서 보았지만 WeChat의 <image>는 는 내부적으로 웹 구성 요소이지만 이러한 구성 요소 모두가 엄밀히 말해 웹 구성 요소는 아닙니다. 다소 유용함 <map>, <video>와 같은 구성요소는 다음과 같이 렌더링됩니다. OS 기본 제공 구성요소 WebView를 통해 계층화되는 것을 볼 수 있습니다. 개발자의 경우 이 구현 세부정보는 공개되지 않습니다. 다른 구성 요소처럼 프로그래밍됩니다.

언제나 그렇듯이 세부정보는 다르지만 전반적인 프로그래밍 개념은 모든 슈퍼 앱에서 동일합니다. 제공업체 중요한 개념은 앞서 설명한 바와 같이 마크업 언어. 일반적으로 구성요소는 함수별로 그룹화되므로 작업에 적합한 방법이 더 쉽습니다. 아래는 Alipay의 카테고리인 Alipay 분류의 한 예입니다. 다른 공급업체의 구성요소 그룹에 적용됩니다.

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

아래에서 결제 수단에 사용된 Alipay <image>를 이미지 데이터 배열을 반복하는 a:for 지시어 (목록 렌더링 참고) (index.js에 제공)

/* 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>

mode 속성에 대한 item.mode의 데이터 결합, src 속성에 대한 src의 데이터 결합에 유의하세요. 및 3개의 이벤트 핸들러 onTap, onError, onLoad를 동일한 이름의 함수에 추가합니다. 따라서 앞에 표시된 경우 <image> 태그는 내부적으로 이미지의 최종 크기 자리표시자가 있는 <div>, 선택적 지연 로드, 기본 소스 기타

구성요소의 사용 가능한 구성 옵션은 모두 문서를 참조하세요. 문서에 포함된 시뮬레이터로 구성요소 미리보기 코드를 즉시 실질적으로 만들 수 있습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 구성요소 미리보기가 삽입된 Alipay 구성요소 문서

를 통해 개인정보처리방침을 정의할 수 있습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Alipay 구성요소 미리보기가 자체 탭에 크게 표시되어 있습니다.

각 구성품에는 구성품을 여는 Alipay 앱으로 스캔할 수 있는 QR 코드도 있습니다. 사소한 독립 예제로 되어 있습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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

개발자는 문서를 통해 바로 Alipay DevTools IDE로 이동할 수 있으며, 독점 URI 스킴 antdevtool-tiny://을 사용합니다. 이렇게 하면 문서를 미니 앱 프로젝트를 가져와서 개발자가 구성 요소를 즉시 시작할 수 있습니다.

커스텀 구성요소

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

드림

성공: 계속해서 읽으면서 미니 앱의 프로젝트 구조, 수명 주기 및 번들에 관해 알아보세요.

감사의 말씀

이 기사에 대해 리뷰한 사용자 조 메들리, 케이스 바스크, 밀리카 미하즐리야, 앨런 켄트, 그리고 키스 구입니다.