Web 组件
Web 组件的初衷是让开发者将这些组件组合在一起,以其为基础构建出色的应用。此类原子组件的示例包括 GitHub 的 time-elements、Stefan Judis 的 web-vitals-element 或 Google 的深色模式切换开关。但是,我发现,对于完整的设计系统,人们更喜欢依赖于同一供应商提供的一组一致的组件。完整的示例列表包括 SAP 的 UI5 Web 组件、Polymer 元素、Vaadin 的元素、Microsoft 的 FAST、Material Web 组件,可以说是 AMP 组件,等等。但是,由于一些因素超出了本文讨论范围,许多开发者也纷纷选择使用 React、Vue.js、Ember.js 等框架。开发者不必自由选择上述任何方案(或者根据您的观点,forcing开发者做出一种技术组件),开发者必须自行提供一种技术组件。
迷你应用中的组件
您可以将这些组件视为与上述任何组件库类似。如需大致了解可用组件,您可以浏览微信的组件库、字节跳动的组件、支付宝的组件、百度的组件和快捷应用组件。
比方说,在前面我介绍过,虽然微信的 <image>
本质上是一个网络组件,但从技术上来讲,并不是所有这些组件都是网络组件。某些组件(例如 <map>
和 <video>
)会渲染为操作系统内置组件,叠加在 WebView 之上。对于开发者来说,这类实现细节不会透露,它们的编程方式与任何其他组件一样。
与往常一样,细节有所不同,但所有超级应用提供程序的总体编程概念都是相同的。一个重要的概念就是数据绑定,如上文的标记语言部分所示。通常,组件是按功能分组的,因此更容易找到所需的组件。下面是支付宝的分类的一个示例,它与其他供应商的组件分组类似。
- 查看容器
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
下图所示的 a:for
指令(请参阅列表呈现)中使用了支付宝的 <image>
,该指令会遍历 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
属性的数据绑定,以及三个事件处理脚本 onTap
、onError
和 onLoad
与同名函数。如之前所示,<image>
标记在内部会转换为 <div>
,其中包含图片最终尺寸的占位符、可选的延迟加载、默认来源等。
该文档中列出了该组件的可用配置选项。借助文档中嵌入的模拟器组件预览,代码可立即变得具体化。
![包含嵌入式组件的 Alipay 组件文档预览,其中显示了一个代码编辑器以及模拟器,其中显示了模拟 iPhone 6 上呈现的组件。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipay-component-document-6b7c4f21b0d0f.png?authuser=6&hl=hu)
![在单独的浏览器标签页中运行的支付宝组件预览,其中显示了一个代码编辑器以及模拟器,该组件显示在模拟的 iPhone 6 上渲染的组件。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipay-component-preview-1da9c839edf25.png?authuser=6&hl=hu)
每个组件还都有一个可通过支付宝应用进行扫描的二维码,该应用会在一个独立的最简示例中打开组件示例。
![扫描文档中的二维码后,支付宝的“image”组件在实体设备上进行了预览。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipays-image-componen-696a04ff61022.png?authuser=6&hl=hu)
<image>
组件的预览。
利用专有的 URI 架构 antdevtool-tiny://
,开发者可以直接从文档跳转到 Alipay 开发者工具 IDE。这样一来,文档就可以直接链接到要导入的迷你应用项目,以便开发者立即开始使用该组件。
自定义组件
除了使用供应商提供的组件之外,开发者还可以创建自定义组件。该概念适用于 WeChat、ByteDance、Alipay 和 Baidu 以及快捷应用。例如,百度自定义组件由四个文件组成,这些文件必须位于同一文件夹中: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>
致谢
本文由 Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 和 Keith Gu 审核。