迷你应用组件

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 等框架。超级应用提供商不会让开发者自由选择这些选项中的任何一个（或者，从您的角度来看，是强制他们做出技术选择），而是普遍提供一组开发者必须使用的组件。

迷你应用中的组件

您可以将这些组件视为上述任何组件库。如需大致了解可用的组件，您可以浏览 WeChat 的组件库、ByteDance 的组件、Alipay 的组件、Baidu 的组件和快应用组件。

之前我提到过，虽然微信的 <image> 在底层是一个 Web 组件，但并非所有这些组件在技术上都是 Web 组件。某些组件（例如 <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
  • 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>，其中包含图片最终尺寸的占位符、可选的延迟加载、默认来源等。

该组件的所有可用配置选项均列在文档中。带有模拟器的嵌入式文档组件预览可让代码立即变得直观易懂。

包含嵌入式组件预览的支付宝组件文档。

支付宝组件预览已弹出到自己的标签页中。

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

按照文档中的 QR 码链接在真实设备上预览 Alipay <image> 组件。

开发者可以利用专有 URI scheme antdevtool-tiny:// 从文档直接跳转到 Alipay DevTools 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。