小程序自定义组件

最新推荐文章于 2023-05-11 18:47:31 发布

原创

最新推荐文章于 2023-05-11 18:47:31 发布

· 405 阅读

0 ·

版权

文章标签：

#小程序 #javascript

本文介绍了小程序自定义组件的优势，如代码复用和易于维护。讨论了小程序复用代码的两种方式：自定义模板复用，适用于仅需渲染模板的场景；以及自定义组件复用，包括HTML、CSS和JS，适用于带有业务逻辑的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义组件的优势：复用，好维护

小程序复用代码方式：

1.自定义模板复用

第一步：定义模板

 格式：
<template name="模板名称">
    ....  //定义模板结构
</template>

例如：

<template name="list_tpl">
  <view>
    <text>list模板页11111</text>
  </view>
</template>


第二步：使用模板

<import src="引入定义好的模板路径" />

<template is="调用定义好的模板名称" data="传递给模板的数据" />

例如：

<import src="/public/template/list/list" />

  <template is="list_tpl" data="{
  { ...listData,...testData }}" />

  其中：listData和testData都是对象

注意：模板样式必须要使用的页面样式文件单独引入！！！！

例如：@import “…/…/public/template/list/list.wxss”

适用场景：需要最终渲染模板，不需要带业务逻辑的场景

2.自定义组件复用