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

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

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

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

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

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

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

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

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

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

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

กิตติกรรมประกาศ

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