คอมโพเนนต์ของเว็บ
คอมโพเนนต์ของเว็บเริ่มต้นจากสัญญาว่า ให้นักพัฒนาซอฟต์แวร์นำคอมโพเนนต์เหล่านั้นมารวมกันและสร้างแอปที่ยอดเยี่ยมไว้ที่ด้านบนได้ ตัวอย่างของคอมโพเนนต์อะตอม เช่น องค์ประกอบเวลาของ 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 ซึ่งมีการแสดงตัวอย่างคอมโพเนนต์แบบฝัง ซึ่งแสดงเครื่องมือแก้ไขโค้ดพร้อมเครื่องมือจำลองที่แสดงคอมโพเนนต์ที่แสดงผลใน iPhone 6 ที่จำลองขึ้นมา](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-document-6b7c4f21b0d0f.png?authuser=6&hl=th)
![การแสดงตัวอย่างคอมโพเนนต์ Alipay ทำงานในแท็บเบราว์เซอร์แยกต่างหากซึ่งแสดงเครื่องมือแก้ไขโค้ดพร้อมเครื่องมือจำลองที่แสดงคอมโพเนนต์ที่แสดงผลใน iPhone 6 ที่จำลองขึ้นมา](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-preview-1da9c839edf25.png?authuser=6&hl=th)
คอมโพเนนต์แต่ละรายการยังมีคิวอาร์โค้ดที่สแกนได้ด้วยแอป Alipay และเปิดตัวอย่างคอมโพเนนต์ในตัวอย่างเรียบง่ายที่มีในตัว
![มีการแสดงตัวอย่างคอมโพเนนต์ "รูปภาพ" ของ Alipay ในอุปกรณ์จริงหลังจากสแกนคิวอาร์โค้ดในเอกสาร](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipays-image-componen-696a04ff61022.png?authuser=6&hl=th)
<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
ได้ โดยคีย์ของการนำเข้าจะเป็นตัวกำหนดชื่อ
(ที่นี่: "custom"
) ที่จะนำคอมโพเนนต์ที่กำหนดเองไปใช้ใน index.swan
ได้
{
"usingComponents": {
"custom": "/components/custom/custom"
}
}
<view>
<custom name="swanapp"></custom>
</view>
กิตติกรรมประกาศ
บทความนี้ได้รับการตรวจสอบโดย Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent และ Keith Gu