此页面由 Cloud Translation API 翻译。

迷你应用组件

Thomas Steiner

网络组件

网络组件：以我们一直致力于让开发者能够将它们整合在一起，并以此为基础构建出优秀的应用。示例 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">
- view
- swiper
- scroll-view
- cover-view
- cover-image
- movable-view
- movable-area
基本内容 <ph type="x-smartling-placeholder">
- text
- icon
- progress
- rich-text
表单组件 <ph type="x-smartling-placeholder">
- button
- form
- label
- input
- textarea
- radio
- radio-group
- checkbox
- checkbox-group
- switch
- slider
- picker-view
- picker
导航 <ph type="x-smartling-placeholder">
- navigator
媒体组件 <ph type="x-smartling-placeholder">
- image
- video
画布 <ph type="x-smartling-placeholder">
- canvas
地图 <ph type="x-smartling-placeholder">
- map
打开组件 <ph type="x-smartling-placeholder">
- web-view
- lifestyle
- contact-button
无障碍 <ph type="x-smartling-placeholder">
- 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> 替换为图片最终尺寸的占位符、可选延迟加载、默认来源等等

该组件的可用配置选项均列在文档。文档内嵌使用模拟器预览组件让代码立即变得有形。

包含嵌入式组件预览的支付宝组件文档，其中显示了一个带有模拟器的代码编辑器，其中显示了可在模拟 iPhone 6 上呈现的组件。 — </ph> 包含嵌入式组件预览的支付宝组件文档。

在单独的浏览器标签页中运行的支付宝组件预览，其中显示了一个带有模拟器的代码编辑器，其中显示了可在模拟 iPhone 6 上呈现的组件。 — 支付宝组件预览弹出到自己的标签页中。

每个组件还带有一个二维码，可以使用打开该组件的支付宝应用扫描该二维码自包含的最小样本中。

扫描文档中的二维码后，在真实设备上预览支付宝的 `image` 组件。 — </ph> 点击文档中的二维码链接后，在真实设备上预览支付宝“`<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。