Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

คอมโพเนนต์ของแอปขนาดเล็ก

Thomas Steiner

คอมโพเนนต์เว็บ

คอมโพเนนต์เว็บเริ่มต้นด้วยสัญญาว่าจะช่วยให้นักพัฒนาซอฟต์แวร์สามารถนำคอมโพเนนต์ต่างๆ มาประกอบเข้าด้วยกันและสร้างแอปที่ยอดเยี่ยมได้ ตัวอย่างคอมโพเนนต์ย่อยๆ ดังกล่าว ได้แก่ time-elements ของ GitHub, web-vitals-element ของ Stefan Judis หรือฟีเจอร์สลับโหมดมืดของ Google อย่างไรก็ตาม เมื่อพูดถึงระบบการออกแบบที่สมบูรณ์ ผมสังเกตว่าผู้คนมักจะชอบใช้คอมโพเนนต์ที่สอดคล้องกันจากผู้ให้บริการรายเดียวกัน ตัวอย่างรายการที่ไม่สมบูรณ์ ได้แก่ UI5 Web Components ของ SAP, Polymer Elements, Elements ของ Vaadin, FAST ของ Microsoft, Material Web Components, คอมโพเนนต์ AMP และอื่นๆ อีกมากมาย อย่างไรก็ตาม นักพัฒนาซอฟต์แวร์จำนวนมากก็หันไปใช้เฟรมเวิร์กอย่าง React, Vue.js, Ember.js และอื่นๆ ด้วยเช่นกัน เนื่องจากปัจจัยหลายอย่างที่ไม่อยู่ในขอบเขตของบทความนี้ แทนที่จะให้อิสระแก่นักพัฒนาซอฟต์แวร์ในการเลือกจากตัวเลือกเหล่านี้ (หรือ บังคับให้เลือกเทคโนโลยี) ผู้ให้บริการซูเปอร์แอปจะจัดหาชุดคอมโพเนนต์ที่นักพัฒนาซอฟต์แวร์ต้องใช้

คอมโพเนนต์ในมินิแอป

คุณสามารถคิดว่าคอมโพเนนต์เหล่านี้เป็นเหมือนไลบรารีคอมโพเนนต์ใดๆ ที่กล่าวถึงข้างต้น หากต้องการดูภาพรวมของคอมโพเนนต์ที่มี ให้เรียกดู ไลบรารีคอมโพเนนต์ของ WeChat, คอมโพเนนต์ของ ByteDance, คอมโพเนนต์ของ Alipay, คอมโพเนนต์ของ Baidu และ คอมโพเนนต์ของ Quick App

ก่อนหน้านี้ ผมได้แสดงให้เห็นว่าแม้ว่า <image> จะเป็นคอมโพเนนต์เว็บเบื้องหลัง แต่คอมโพเนนต์เหล่านี้บางรายการก็ไม่ใช่คอมโพเนนต์เว็บในทางเทคนิค คอมโพเนนต์บางอย่าง เช่น <map> และ <video> จะแสดงเป็น คอมโพเนนต์ในตัวของระบบปฏิบัติการ ที่ซ้อนทับ WebView นักพัฒนาซอฟต์แวร์จะไม่เห็นรายละเอียดการใช้งานนี้ และจะเขียนโปรแกรมคอมโพเนนต์เหล่านี้เหมือนกับคอมโพเนนต์อื่นๆ

รายละเอียดจะแตกต่างกันไป แต่แนวคิดการเขียนโปรแกรมโดยรวมจะเหมือนกันในผู้ให้บริการซูเปอร์แอปทุกราย แนวคิดที่สำคัญอย่างหนึ่งคือการเชื่อมโยงข้อมูล ดังที่แสดงไว้ก่อนหน้านี้ใน ภาษา Markup โดยทั่วไป คอมโพเนนต์จะจัดกลุ่มตามฟังก์ชัน ดังนั้นการค้นหาคอมโพเนนต์ที่เหมาะสมกับงานจึงง่ายขึ้น ด้านล่างนี้เป็นตัวอย่างการจัดหมวดหมู่ของ 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
- canvas
แผนที่
- map
คอมโพเนนต์แบบเปิด
- web-view
- lifestyle
- contact-button
การช่วยเหลือพิเศษ
- aria-component

ด้านล่างนี้ คุณจะเห็น <image> ของ Alipay ที่ใช้ในคำสั่ง 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>

โปรดสังเกตการเชื่อมโยงข้อมูลของ item.mode กับแอตทริบิวต์ mode, src กับแอตทริบิวต์ src, และตัวแฮนเดิลเหตุการณ์ 3 รายการ onTap, onError และ onLoad กับฟังก์ชันที่มีชื่อเดียวกัน ดังที่ แสดง ไว้ก่อนหน้านี้ แท็ก <image> จะได้รับการแปลงเป็น <div> ภายในโดยมีตัวยึดตำแหน่งสำหรับขนาดสุดท้ายของรูปภาพ การโหลดแบบ Lazy Loading ที่ไม่บังคับ แหล่งที่มาเริ่มต้น ฯลฯ

ตัวเลือกการกำหนดค่าที่มีของคอมโพเนนต์ทั้งหมดจะแสดงอยู่ใน เอกสารประกอบ การแสดงตัวอย่างคอมโพเนนต์ที่ฝังไว้ในเอกสารประกอบ พร้อมเครื่องจำลอง จะทำให้โค้ดจับต้องได้ทันที

เอกสารประกอบของคอมโพเนนต์ Alipay พร้อมตัวอย่างคอมโพเนนต์แบบฝัง ซึ่งแสดงตัวแก้ไขโค้ดที่มีโปรแกรมจำลองที่แสดงคอมโพเนนต์ที่แสดงผลใน iPhone 6 ที่จำลอง — เอกสารประกอบคอมโพเนนต์ของ Alipay พร้อมการแสดงตัวอย่างคอมโพเนนต์ที่ฝังไว้

ตัวอย่างคอมโพเนนต์ Alipay ที่ทํางานในแท็บเบราว์เซอร์แยกต่างหากซึ่งแสดงตัวแก้ไขโค้ดพร้อมโปรแกรมจำลองที่แสดงคอมโพเนนต์ที่แสดงผลใน iPhone 6 ที่จำลอง — การแสดงตัวอย่างคอมโพเนนต์ของ Alipay ที่แสดงในแท็บของตัวเอง

คอมโพเนนต์แต่ละรายการยังมีคิวอาร์โค้ดที่สแกนได้ด้วยแอป Alipay ซึ่งจะเปิดตัวอย่างคอมโพเนนต์ในตัวอย่างขนาดเล็กแบบสแตนด์อโลน

ตัวอย่างคอมโพเนนต์ `image` ของ Alipay ที่แสดงบนอุปกรณ์จริงหลังจากสแกนคิวอาร์โค้ดในเอกสารประกอบ — การแสดงตัวอย่างคอมโพเนนต์ `<image>` ของ Alipay ในอุปกรณ์จริงหลังจากทำตามลิงก์คิวอาร์โค้ดจากเอกสารประกอบ

นักพัฒนาซอฟต์แวร์สามารถข้ามจากเอกสารประกอบไปยัง IDE ของ Alipay DevTools ได้โดยตรงโดยใช้ประโยชน์จากสคีม URI ที่เป็นกรรมสิทธิ์ antdevtool-tiny:// ซึ่งช่วยให้เอกสารประกอบลิงก์ไปยังโปรเจ็กต์มินิแอปที่จะนำเข้าได้โดยตรง เพื่อให้นักพัฒนาซอฟต์แวร์เริ่มใช้คอมโพเนนต์ได้ทันที

คอมโพเนนต์ที่กำหนดเอง

นอกจากการใช้คอมโพเนนต์ที่ผู้ให้บริการจัดหาให้แล้ว นักพัฒนาซอฟต์แวร์ยังสร้างคอมโพเนนต์ที่กำหนดเองได้ด้วย แนวคิดนี้มีไว้สำหรับ 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 ได้ โดยคีย์ของการนำเข้าจะกำหนดชื่อ (ในที่นี้คือ "custom") ที่คอมโพเนนต์ที่กำหนดเองจะใช้ได้ใน index.swan

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

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

คำขอบคุณ

บทความนี้ได้รับการตรวจสอบโดย Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, และ Keith Gu.