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

Thomas Steiner

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

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

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

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

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

ถึงแม้ว่ารายละเอียดจะแตกต่างออกไป แต่แนวคิดการเขียนโปรแกรมโดยรวมจะเหมือนกันในทุก Super App ผู้ให้บริการเครือข่าย แนวคิดที่สำคัญคือการเชื่อมโยงข้อมูล ดังที่แสดงก่อนหน้านี้ใน ภาษามาร์กอัป โดยทั่วไปแล้ว คอมโพเนนต์จะจัดกลุ่มตามฟังก์ชัน ดังนั้นการค้นหา ที่เหมาะสมกับงานจะง่ายขึ้น ด้านล่างนี้เป็นตัวอย่างจากการจัดหมวดหมู่ของ 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

ด้านล่างนี้ คุณจะเห็น <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 ในฟังก์ชันที่มีชื่อเดียวกัน อาส แสดง before แท็ก <image> ภายในจะถูกแปลงเป็น <div> ที่มีตัวยึดตำแหน่งสำหรับขนาดสุดท้ายของรูปภาพ การโหลดแบบ Lazy Loading ที่ไม่บังคับ แหล่งที่มาเริ่มต้น อื่นๆ

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

วันที่

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

วันที่

นักพัฒนาแอปสามารถข้ามจากเอกสารประกอบไปยัง Alipay DevTools IDE ได้โดยตรงด้วยการใช้ประโยชน์จาก ชุดรูปแบบ 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