13518219792
根据您的个性需求进行定制 先人一步 抢占小程序红利时代
开发者可以将页面内的功能模块抽象成自定义组件，在智能小程序的各个页面中进行使用，提升代码复用度，节省开发成本。
创新互联建站，为您提供重庆网站建设公司、成都网站制作、网站营销推广、网站开发设计，对服务成都效果图设计等多个行业拥有丰富的网站建设及推广经验。创新互联建站网站建设公司成立于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 中使用；"component": true，因为将 page 当做自定义组件使用是不允许的；
