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

作为一名常常摆烂，一蹶不振的大学生，最近接到了开发电商小程序的小任务，既然是电商，总得有购买加车功能吧？经过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.然后就要根据自己的情况设计逻辑了，比如库存不足之后按钮变灰并且无法点击

可以在bottom的type中设置disabled，再比如点击之后传值进入订单页面，传值加入用户的收藏列表中。

第一篇博客，有做得不好的地方的话非常欢迎大家的意见，一定改改改！祝大家共同进步:)

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

微信电商小程序开发有什么好处呢
微信早已成为每个人都必须使用的即时通讯工具,而2017年推出的微信小程序,是一款按照手机微信内部结构运行的手机应用. 在过去每年的时间里,微信小程序上线数以百万计,日人气超过2亿元. 主要包括很多电商 ...
微信电商小程序流量入口介绍
1 分享卡片微信小程序团队曾透露,小程序最主要的来源是社群,分享卡片的重要性毋庸置疑.去年,双十一中,小程序单件商品经过微信分享后快速裂变,最高有近11万人打开分享链接,小程序内44%的成交用户,是 ...
电商小程序实战教程-店铺数据源设计
上一节我们介绍了小程序的总体功能,要想开发一个小程序,首先是做数据源的设计.微搭给我们提供了一套线上的数据库,它的特点是按照对象的格式进行存储和读取.好处是我们在开发应用的时候返回的数据格式就是Jso ...
微信电商小程序多商户入驻拼团秒杀源码
首页: 分类: 拼团:
电商小程序的发展以及优势、劣势分析
电商已经成为我们日常生活的一部分,它在小程序上的发展令人瞩目.本文为你解析电商小程序的发展现状,近三年来电商小程序发展出的细分类别以及探究电商小程序发展过程中的优势与劣势. 一.电商小程序的发展现状 ...
微信小程序电商源码：外卖小程序，电商小程序，门店类小程序，展示类小程序，批发商城小程序、分销小程序。
介绍: 1.naicha 2.xianhua 3.xingbake 4.zhubaoxiao 5.zhubaoxiao 6.majiangshangcheng 7.jiafang 8.huazhuan ...
Axure电商服务小程序交互原型模板、电商小程序、拼团特惠、积分兑换、LBS电商小程序、活动、订单、会员、购物车、签到、钱包充值、拼团拼单、优惠券、电商原型、rp源文件、Axure原型、移动端电商系统
Axure电商服务小程序交互原型模板.电商小程序.拼团特惠.积分兑换.LBS电商小程序.活动.订单.会员.购物车.签到.钱包充值.拼团拼单.优惠券.电商原型.rp源文件.Axure原型.移动端电商系统 ...
网易严选php版本小程序,Thinkphp5.0内核开发仿网易严选微信小程序商城源码电商小程序源码...
仿网易严选微信小程序商城源码电商小程序源码安装环境:php5.3及以上+mysql,开启https Thinkphp5.0内核开发的电商类小程序源码整站后端+前台仿网易严选商城化妆品电商小程序,完 ...
微信汽配电商小程序开发功能设计方案
随着互联网的不断发展,在汽车服务市场中的发展也紧跟着市场发展的脚步.汽车配件行业中,通过微信汽配电商小程序就可以实时查看具体的销售情况,以及收入的具体情况. 微信汽配电商小程序功能: 1.商城商城中 ...

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

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

最新文章

热门文章