• 创建自定义组件
  • 使用自定义组件

创建自定义组件

开发者可以将页面内的功能模块抽象成自定义组件，在智能小程序的各个页面中进行使用，提升代码复用度，节省开发成本。

创新互联建站，为您提供重庆网站建设公司、成都网站制作、网站营销推广、网站开发设计，对服务成都效果图设计等多个行业拥有丰富的网站建设及推广经验。创新互联建站网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。 与客户共同发展进步，是我们永远的责任！

解释： 一个自定义组件由 4 个文件 (.swan .css .js .json) 组成，例如包含自定义组件 custom 的项目结构:

 
 
 

  
  
  
// 包含自定义组件custom的项目结构
  
  
  
├── app.js
  
  
  
├── app.json
  
  
  
├── project.swan.json
  
  
  
└── components
  
  
  
 └── custom
  
  
  
 ├── custom.swan
  
  
  
 ├── custom.css
  
  
  
 ├── custom.js
  
  
  
 └── custom.json
 
 
 

要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（在 json 文件中将 component 字段设为 true 可将这一组文件设为自定义组件）：

 
 
 

  
  
  
// 自定义组件配置 (custom.json)
  
  
  
{
  
  
  
 "component": true
  
  
  
}
 
 
 

同时，类似于页面开发。开发自定义组件，可以在 swan 文件中编写组件模板，在 css 文件中引入样式，它们的写法和页面的写法类似。

代码示例

 
 
 

  
  
  

  
  
  

  
  
  
 {{name}}
  
  
  

 
 
 

 
 
 

  
  
  
/* 自定义组件的css，在该自定义组件内部生效 (custom.css) */
  
  
  
.name {
  
  
  
 color: red;
  
  
  
}
 
 
 

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 swan 模板的渲染，其中，属性是可以由组件外部传入的。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 

  
  
  
// 自定义组件逻辑 (custom.js)
  
  
  
Component({
  
  
  
 properties: {
  
  
  
 // 定义了name属性，可以在使用组件时，由外部传入。此变量可以直接在组件模板中使用
  
  
  
 name: {
  
  
  
 type: String,
  
  
  
 value: 'swan',
  
  
  
 }
  
  
  
 },
  
  
  
 data: {
  
  
  
 // 这里是一些组件内部数据
  
  
  
 age: 1
  
  
  
 },
  
  
  
 methods: {
  
  
  
 // 这里是一个自定义方法
  
  
  
 tap: function(){}
  
  
  
 }
  
  
  
})
 
 
 

 
 
 

  
  
  

  
  
  

  
  
  
 {{name}}{{age}}
  
  
  

 
 
 

使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。除了在页面使用自定义组件，你还可以在自定义组件引用自定义组件，类似于页面引用自定义组件。
以下举例页面级（pages/home/home）的使用场景:

 
 
 

  
  
  
// 项目目录结构
  
  
  
├── app.js
  
  
  
├── app.json
  
  
  
├── project.swan.json
  
  
  
└── pages
  
  
  
 └── home
  
  
  
 ├── home.swan
  
  
  
 ├── home.css
  
  
  
 ├── home.js
  
  
  
 └── home.json
  
  
  
└── components
  
  
  
 └── custom
  
  
  
 ├── custom.swan
  
  
  
 ├── custom.css
  
  
  
 ├── custom.js
  
  
  
 └── custom.json
 
 
 

首先需要提供每个自定义组件的标签名与其对应的自定义组件文件路径。

提示:
1.自定义组件文件路径: 自定义组件 swan、css、js、json 文件所在路径 + 该类文件的 basename，例如以上项目目录结构，该路径即是/components/custom/custom；
2.创建自定义组件，推荐内层的文件(swan、css、js、json)与其自定义组件目录保持同名。

代码示例

 
 
 

  
  
  
// 页面json配置 home.json
  
  
  
{
  
  
  
 "usingComponents": {
  
  
  
 "custom": "/components/custom/custom"
  
  
  
 }
  
  
  
}
 
 
 

这样在页面的 swan 文件中，就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

代码示例

自定义组件的 swan 节点结构在与数据结合之后，将被插入到引用位置内。

说明:

• 自定义组件只能在1.10.13以上的 swan.js 中使用；
• 同一页面引用的自定义组件，不同路径的自定义组件暂时不能使用相同的自定义组件名字；
• 在页面级的配置（json 文件）中不能添加 "component": true，因为将 page 当做自定义组件使用是不允许的；
• 对于自定义组件中的资源引用路径，使用相对路径目前针对的是自定义组件 SWAN 文件所对应的目录层级，故暂时推荐使用绝对路径。

本文题目：创新互联百度小程序教程：创建自定义组件
当前链接：http://www.mswzjz.cn/qtweb/news0/270900.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能