微信小程序-自定义组件

最新推荐文章于 2024-03-20 17:26:55 发布

原创

最新推荐文章于 2024-03-20 17:26:55 发布 · 428 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中创建和使用自定义组件，通过将功能模块抽象为组件以提高代码复用性和维护性。步骤包括创建组件、定义组件属性与方法、引入组件到页面及传递数据。详细讲解了组件的properties、data、methods的使用，并提供了引用组件的配置示例。

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

描述：将页面内的功能模块抽象成自定义组件，以便在不同页面中重复使用；或者是复杂的页面拆分成多个低耦合的模块，有利于代码维护。

功能实现：下面就以列表展示为例，在项目中，多个地方使用到列表展示，整体样式就是左边图片，右边标题和内容列表。

第一步：创建组件

在pages同级目录下新建component目录，在当前目录下新建list文件夹，里面包含.js,,wxml,,json,,wxml四个文件。

第二步：在list.wxml中写入

 <view class="xiangqing-border">
        <view class="xiangqing" wx:for="{
  
  {listArray}}" wx:key='' data-id="{
  
  {item.id}}" catchtap="showDetail">
          <!--头像-->
          <view class='xiangqing_img'>
            <image src='{
  
  {item.img}}'></image>
          </view>
          <!--名称-->
          <view