首页 > 下载 > 下载详文：微信小程序自定义组件绑定数据交互

微信小程序自定义组件绑定数据交互

源文件下载
4969KB

发布时间：2025年06月19日 10时56分54秒属性：程序Web开发 > Web综合访问次数：13498

字体：大初始小简繁添加收藏

微信小程序自定义组件绑定数据交互

微信小程序目前没有明确开发分类,今天通过示例定位,将微信小程序开发分类到“程序web开发”当中的“Web综合”开发，尽管偏向于前端开发，但涉及js脚本与后端数据交互，所以微信小程序开发并非简单的前端开发。今天的示例通过自定义组件，展示产品列表数据，以及传参所点中的单个产品参数。本文不会对接微信小程序基础部分展开介绍，读者需要预先熟悉“微信小程序开发工具”，对微信小程序工程项目文件有基本的掌握，并且已经对微信小程序的“自定义组件”概念有所有了解，才能快速上手本文的示例。

微信小程序自定义组件，在工程项目目录中建立一个文件夹“components”用以存放所有的自定义文件目录，然后在目中右键“新建文件夹”命名“products”(可以根据项目情况自己任意命名)，然后在“ products”文件目录“新建Component”同样命名为“products”，回车确定后会自动生成四个文件：products.js、products.json、products.wxml、products.wxss，这和微信小程序页面的结构相似，不同的是在js文件有关联Component属性设置，在json文件中有"component": true 配置。如下图：

在“products.js”文件中有三个代码块：①组件的属性列表 properties: { }, ②组件的初始数据 data: {},③组件的方法列表 methods: {}。在“属性列表中”加入“ productsList: ”type类型: Array，value(默认值): []此处为空数组，productsList用来在页面中绑定产品列表数据。在“组件的方法列表”加入按钮触发时间，用来点击产品列表中的单个产品时显示所点中的产品参数，或者带参数跳转到产品详细页。如下代码：

JavaScript 代码复制

Component({

    /*微信小程序自定义组件绑定数据交互(06.19.2025)*/
    /*Copyright (C) 遗昕传媒 | weisim3.com  */

   /*组件的属性列表*/
  properties: {
    productsList: {
      type: Array,
      value: [],
    },
  },

    /* 组件的初始数据 */
  data: {
  
  },

    /*组件的方法列表*/
  methods: {
    onClickGoods(e) {
      console.log(e.target.dataset.productid+"---"+e.target.dataset.name);
    }
  }
})

在“products.wxml”文件中写入三层< view>标签，用来绑定遍历“productsList”，在第三层“<view>”中指定按钮触发bind:tap="onClickGoods"，指定产品id和产品名参数： data-productid="{{item.ProductId}}" data-name="{{item.ProductName}}"，详细代码如下：

products.wxml 代码复制

<!-- 微信小程序自定义组件绑定数据交互(06.19.2025) -->
<!-- Copyright (C) 遗昕传媒 | weisim3.com -->
<view class="container">
  <view class="item" wx:for="{{productsList}}" wx:key="index">
    <view class="bl" bind:tap="onClickGoods" data-productid="{{item.ProductId}}" data-name="{{item.ProductName}}">
      商品{{item.ProductId}}
    </view>
  </view>
</view>

在products.wxss中定义.container 、.item、.bl的css样式，如下代码：

CSS 代码复制

/* components/products/products.wxss */
/*微信小程序自定义组件绑定数据交互(06.19.2025)*/
/*Copyright (C) 遗昕传媒 | weisim3.com  */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5px;
}

.item {
  width: 50%; /* 每个商品占一半 */
  height: auto; /* 商品高度 */
  /*background-color: #d8ee10;  背景色 */
  box-sizing: border-box; /* 边框和内边距包含在宽度内 */
  text-align: center;
  padding: 3px;
  padding-top: 0px;
  margin-bottom: 5rpx;
  border: 0rpx red solid;

}
.bl{
   border: 1px rgb(24, 2, 2) solid;
   background-color: #f0f0f0;
   height: 200rpx;
}

新建一个微信页面命名为“Tester”，在Tester.json中引入组件，在 "usingComponents"属性加入组件路径："usingComponents": {"products": "/components/products/products" }，在Tester.wxml中写如products标签,如下代码：

Tester.wxml 代码复制

<products productsList="{{productsList}}" ></products>

在Tester.js的data中加入productsList数据“ProductId”和“ProductName”加入8组数据，如下代码：

Tester.js 代码复制

  data: {
    productsList:[ 
      { ProductId: 1, ProductName: '产品1' },
      { ProductId: 2, ProductName: '产品2' },
      { ProductId: 3, ProductName: '产品3' },
      { ProductId: 4, ProductName: '产品4' },
      { ProductId: 5, ProductName: '产品5' },
      { ProductId: 6, ProductName: '产品6' },
      { ProductId: 7, ProductName: '产品7' },
      { ProductId: 8, ProductName: '产品8' }
     ]
  },

编译执行效果如下：

微信小程序自定义组件绑定数据交互（0）

本下载连接不支持第三下载工具打开，请直接点击下载即可

文章版权归属weisim3.com所有,未经书面版权许可同意，不得私自转载(或做修改转载)，源文件示例仅供学习使用，更不要出于商业用途或印刷出版发行！否则将追究其相关法律责任，版权联系：729260499。

您可能感兴趣的软件资讯