迷你应用组件

Thomas Steiner

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 上呈现的组件。
包含嵌入式组件的支付宝组件文档预览。
在单独的浏览器标签页中运行的支付宝组件预览，其中显示了一个代码编辑器以及模拟器，该组件显示在模拟的 iPhone 6 上渲染的组件。
支付宝组件预览弹出到自己的标签页中。

每个组件还都有一个可通过支付宝应用进行扫描的二维码，该应用会在一个独立的最简示例中打开组件示例。

扫描文档中的二维码后，支付宝的“image”组件在实体设备上进行了预览。
点击文档中的二维码链接后，在实体设备上呈现支付宝 <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 审核。