网络组件
网络组件:以 我们一直致力于让开发者能够将它们整合在一起,并以此为基础构建出优秀的应用。示例 GitHub 的 time-elements、Stefan 犹太教圣地web-vitals-element,亦或可羞的插头 Google 的深色模式切换开关。对于 但我发现,人们更倾向于依赖一套连贯的 来自同一供应商的组件。完整的示例列表包括 SAP 的 UI5 Web 组件中, 聚合物元素 Vaadin 的元素、Microsoft 的 FAST, Material Web 组件 可以说是 AMP 组件等等。由于 尽管许多因素超出了本文讨论范围,但许多开发者也蜂拥而至, React、Vue.js、 Ember.js 等。 以上任意选项(或者,根据您的观点,强迫用户做出技术选择), 超级应用提供程序通常会提供开发者必须使用的一组组件。
迷你应用中的组件
您可以将这些组件视为上述任何组件库。要获得 可用组件的概览,您可以浏览 微信的组件库 ByteDance 的组件 Alipay 的组件、 百度和 快速应用组件。
例如,之前我曾介绍过,例如,微信的<image>
本质上是一个网络组件,但从技术上讲,并非所有这些组件都是网络组件。部分
组件(例如 <map>
和 <video>
)会渲染为
操作系统内置组件
叠加在 WebView 上的资源。对于开发者来说,系统不会透露此实现细节,
它们的编程方式与其他任何组件一样。
一如既往,细节各有不同,但所有超级应用的总体编程概念都是相同的 提供商。一个重要概念是数据绑定,如前文所述 标记语言。组件通常是按功能分组的,因此,请找到 更轻松地完成工作。以下是支付宝的分类示例, 其他供应商的组件分组
- 查看容器
<ph type="x-smartling-placeholder">
- </ph>
view
swiper
scroll-view
cover-view
cover-image
movable-view
movable-area
- 基本内容
<ph type="x-smartling-placeholder">
- </ph>
text
icon
progress
rich-text
- 表单组件
<ph type="x-smartling-placeholder">
- </ph>
button
form
label
input
textarea
radio
radio-group
checkbox
checkbox-group
switch
slider
picker-view
picker
- 导航
<ph type="x-smartling-placeholder">
- </ph>
navigator
- 媒体组件
<ph type="x-smartling-placeholder">
- </ph>
image
video
- 画布
<ph type="x-smartling-placeholder">
- </ph>
canvas
- 地图
<ph type="x-smartling-placeholder">
- </ph>
map
- 打开组件
<ph type="x-smartling-placeholder">
- </ph>
web-view
lifestyle
contact-button
- 无障碍
<ph type="x-smartling-placeholder">
- </ph>
aria-component
您可在下方看到支付宝的<image>
循环访问图片数据数组的 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
属性的数据绑定。
并将 onTap
、onError
和 onLoad
三个事件处理脚本关联到同名函数。如
之前所示,<image>
代码在内部会转换为
将 <div>
替换为图片最终尺寸的占位符、可选延迟加载、默认来源
等等
该组件的可用配置选项均列在 文档。文档内嵌 使用模拟器预览组件 让代码立即变得有形。
<ph type="x-smartling-placeholder">![包含嵌入式组件预览的支付宝组件文档,其中显示了一个带有模拟器的代码编辑器,其中显示了可在模拟 iPhone 6 上呈现的组件。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipay-component-document-6b7c4f21b0d0f.png?authuser=9&hl=ca)
![在单独的浏览器标签页中运行的支付宝组件预览,其中显示了一个带有模拟器的代码编辑器,其中显示了可在模拟 iPhone 6 上呈现的组件。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipay-component-preview-1da9c839edf25.png?authuser=9&hl=ca)
每个组件还带有一个二维码,可以使用打开该组件的支付宝应用扫描该二维码 自包含的最小样本中。
<ph type="x-smartling-placeholder">![扫描文档中的二维码后,在真实设备上预览支付宝的 `image` 组件。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipays-image-componen-696a04ff61022.png?authuser=9&hl=ca)
<image>
”组件。
开发者可以使用
专有 URI 架构 antdevtool-tiny://
。这样,文档就可以直接链接到
待导入的迷你应用项目,以便开发者能够立即开始使用该组件。
自定义组件
除了使用供应商提供的组件之外,开发者还可以创建自定义组件。通过
概念的存在,
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
中导入,导入操作的键将决定其名称
(此处:"custom"
),然后可以在 index.swan
中使用自定义组件。
{
"usingComponents": {
"custom": "/components/custom/custom"
}
}
<view>
<custom name="swanapp"></custom>
</view>
致谢
本文由以下人员审核: Joe Medley Kayce Basques、 Milica Mihajlija, Alan Kent, 和 Keith Gu。