当您需要构建可跨所有框架（Angular、React、Vue vanilla JS等）的小型自定义web组件时，Stencil是一个理想的工具。模具使您能够创建独立于平台的组件，这些组件可以作为真正的web组件导出并在任何地方使用。查看我们的StencilJS帖子：StencilJS入门制作一个视频网络组件，模版方式本文展示了如何使用模版构建一个包含云存储图像的图像库。Cloudinary是一个端到端的图像和视频管理解决方案。Cloudinary图像API非常容易使用，并且通过httpurl公开了图像操作技术。如果您从未使用过模具，可以从本文开始。网络研讨会设置媒体库和模具项目让我们从将一些图像上载到Cloudinary服务器并设置模具开始项目。创建我们将使用Cloudinary仪表板上载图像。然而，在实际项目中，您应该有一个使用Cloudinary SDK来上载这些图像的服务器。通过注册免费计划创建一个云数据库帐户，提供300000张图片。在服务器仪表板/控制台上，单击导航栏中的媒体库。使用媒体库页面上的图像上载小部件将图像添加到服务器。创建一个模具项目我们需要做的第一件事就是为模具项目建立一个样板。幸运的是，爱奥尼亚团队提供了一个启动模板来简化这个安装过程。您需要做的就是克隆这个初学者模板，安装该模板并启动新的项目：复制到剪贴板#克隆git克隆https://github.com/ionic-team/stencil-starter.gitcl廊道#输入项目cd cl画廊#删除原始Github历史记录git远程rm源#安装依赖项npm安装创建图库数据源典型的图库应用程序或小部件需要数据源。大多数实际情况可能需要从服务器或API端点获取这些数据。在这个应用中没有这个必要。我们将创建一个模拟数据，它看起来像服务器将发送给我们的数据。创建分贝在src目录中内容：完整代码这里提供的只是一系列画廊图片的导出。每个库项都表示为一个对象，其中包含图像ID、收集器/作者和关于图像的描述。图像ID（imageId）与将图像上载到Cloudinary服务器时获得的ID相同。我们可以使用这些ID从云端。传送使用Cloudinary SDK转换图像浏览器无法理解图像ID。我们需要使用Cloudinary SDK将图像ID转换为url。这个过程被称为"传送"。我们还需要为图像定义一个宽度和质量属性。这个过程是用SDK完成的，被称为"转换"。在深入研究之前，让我们先创建一个容器组件，作为我们的AppShell并与Cloudinary交互。在组件目录中创建包含以下内容的文件夹站点：应用程序-站点.scss应用程序-站点.tsx然后更新app-站点.tsx用以下文件归档内容：复制到剪贴板从'@stencil/core'导入{Component}；从'cloudinary core'导入cloudinary；从'../../db'导入数据；@组件({tag:'应用站点'，styleUrl:'应用程序-站点.scss'})导出类站点{cloudinary=null；厨房图像=[]；组件将加载（）{这是云端= cloudinary.cloudinary.new({云名称：""})这是厨房图像= 数据.map(this.transform.bind（本））；}变换（图像）{常量图像URL=this.cloudinary.url(图像.imageId，{width:300，裁剪："fit"，质量："auto"，secure:true}）；返回对象.分配（图像，{imageUrl}）；}渲染（）{返回(

CL画廊

{这个.gallerymages.map（图像=>)}

);}}Stencil看起来很像React，因为它使用JSX，并且在语法上很相似。组件被定义为一个类，但是它是用我们从上面的模具核心导入的组件装饰器来装饰的。styless定义了styless组件的url，而styless在这个组件中使用的是什么。这个类有两个属性，cloudinary和gallerymages。cloudinary将保留对配置的cloudinary实例的引用。此配置发生在组件即将安装到componentWillLoad中时。galleryImages保留对数据源中图像数组的引用。componentWillLoad是在加载组件之前执行的，因此我们在组件呈现之前设置Cloudinary和数据存储。要配置Cloudinary，请从Cloudinary服务器传入云名称。数据存储在传递给galleryImages之前被转换。它使用transform方法进行转换，该方法生成一个URL并使用作为第二个参数传递的对象来转换图像。最后，我们使用JSX来呈现一个子组件cl gallery item，它通过props从gallerymages接收每个项目。使用子组件渲染图像使用以下文件创建另一个组件文件夹cl gallery item：cl廊道-项目.scsscl廊道-项目.tsx下面的逻辑应该在你的TSX中文件：复制到剪贴板从'@stencil/core'导入{Component，Prop}；@组件({tag:'cl库项目'，styleUrl:'cl库-项目.scss'})导出类ClGalleryItem{@Prop（）图像：任意；渲染（）{返回(

在{this.image.collector}在