微信电商小程序购买/加入购物车组件设计-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信电商小程序购买/加入购物车组件设计。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

作为一名常常摆烂，一蹶不振的大学生，最近接到了开发电商小程序的小任务，既然是电商，总得有购买加车功能吧？经过n个坤年的拜读微信小程序开发者文档还有别的大佬的指点，奉上我自己的理解，欢迎各位大佬指点改正，学习交流，共同进步。该文章适合微信小程序初学者小白参考使用:)

需求

电商类小程序/软件免不了在线下单，在线加入购物车功能，将它做成组件的形式显示在商品详情页中，效果如下，下面我们一步一步的实现

微信电商小程序购买/加入购物车组件设计

1.新建一个页面用来显示组件，再新建一个组件文件存放组件代码

app.json的"pages"[ ]中注册页面（json文件不可注释）

"index/index"

我新建了一个index页面，一个名字component-tag-name的组件放在component文件夹中

微信电商小程序购买/加入购物车组件设计

2.在页面中显示组件

index.js:

// 必须写Page({}),否则页面不会显示且不会报错
Page({
  data: {

  },
  onLoad: function () {
  },
})

index.json:引入我编写的组件，my-component为可以在wxml使用的标签名，后面的路径为相对路径

{
  "usingComponents": {
    "my-component": "/components/component-tag-name"
  }
}

在component-tag-name.wxml中任意编写内容

<view class="wrapper">
  <view>这里是组件内容</view>
</view>

在index.wxml中实现组件

<!-- 引用组件的页面模版 -->
<view>
<!-- 引用组件，my-component为json文件中定义的标签名，该标签
引用了component-tag-name组件-->
  <my-component>
  </my-component>
</view>

可以看到页面中显示了组件

微信电商小程序购买/加入购物车组件设计

3.编辑组件样式

话不多说，直接上代码

wxml：

<!-- 组件模板 -->
<view class="wrapper">
  <view class="twobottum">
  <view class="left">
  <image src="index.png" class="back">
  </image>
  <text class="">首页</text>
  </view>
  <view class="right">
  <image src="gouwu.png" class="cart"></image>
  <text>购物车</text>
  </view>
  </view>
  <view class="buybar">
  <button class="add">加入购物车</button>
  <button class="buy">立即购买</button>
  </view>
</view>

wxss：

/* components/component-tag-name.wxss */
/* 两个图标 */
.twobottum{
  width: 100px;
  display: inline-block
}
.buybar{
  padding-left: 25px;
  width: 280px;
  display: inline-block
}
.left{
  width: 40px;
  display: inline-block;
}
.right{
  width: 50px;
  display: inline-block;
  padding-left: 10px;
}
.back{
  width: 30px;
  height: 30px;
}
.cart{
  width: 30px;
  height: 30px;
  padding-left: 10px;
}
/* 右边buybar */
.add{
  width: 130px;
  display: inline-block;
  background-color: #fae1c0;
  /* 设置边角 */
  border-radius: 50px 0px 0px 50px;
  color: #f36730;
}
.buy{
  width: 130px;
  display: inline-block;
  background-color: #f36730;
  color: aliceblue;
  border-radius: 0px 50px 50px 0px;
}

4.然后就要根据自己的情况设计逻辑了，比如库存不足之后按钮变灰并且无法点击微信电商小程序购买/加入购物车组件设计