用微信小程序做一个小电商 sku
效果展示图
功能点概述
- 图一功能点有
- 搜索
- 轮播图
- 商品展示
- 图二功能点
- 导航栏
- 加入购物车
- 图四功能点
- 评论点
- 图五购物车
- 复选框 ( 全选全不选 )
- 即点即改
- 总计结算
功能详解
1.A(搜索)
使用微信小程序自带函数bindinput实现
在每次输入一个字符的时候就会触发这个函数也就是,每次input框中的值发送改变都会触发bindinput绑定的事件
图示:
Wxml端
Js端
获取到值之后就可以放到接口中进行查询然后查询结果直接循环到页面中使用
1.B(轮播图)
网址 : https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
轮播图主要使用的是swiper标签进行循环
如图示设置属性进行轮播
代码如下:
Wxml端
Js端
1.C(商品展示)
写一个width为49%的盒子用一个循环包裹 将数据的位置排版好 然后用
<block wx:for=”{{GoodsArr}}”>
你写的盒子
</block>
循环出来大概就是这个样子的
2.A(导航栏)
思路:
首先在js端设置一个数组 然后直接将数组放到四个并排的div上并设置点击事件并绑定参数nav.id
点击之后根据它的id 用this.setData 直接修改对应id的样式名这样样式就做好了
然后我们在样式切换后要跳转到对应的页面
就使用scroll-view 下的scroll-into-view={{某个盒子的id}}属性就会跳转对应id的盒子的开头处
- b(添加购物车)
这个也没什么难度
主要是联查获取用户的唯一标识和商品的唯一标识和购买的数量我写死了设置为1然后调取接口入库就ok
3.A(评论)
这个没什么难度。。。。。。。。
主要就是在页面中获取到用户的唯一标识和商品的唯一标识和你的评论内容(上面1.A中有获取input框中value的办法)
4.A(复选框)
使用
<checkbox-group bindchange="checkboxChange">
<checkbox value="{{item.carid}}" checked="{{item.check}}"/>
<checkbox value="{{item.carid}}" checked="{{item.check}}"/>
<checkbox value="{{item.carid}}" checked="{{item.check}}"/>
</checkbox-group>
这样写之后
每次点击其中一个盒子他就会获取你checkbox中的value值 你可以设置为你需要的值进行获取并且存放
checkboxChange:function(e){
e.detail.value->为一个数组 [1,5,9]
}
之后获取到你要的值之后就可以自由发挥了
4.B即点即改
思路:
点击之后在把数组中对应的值setData就ok
意味点击之后 触发事件 调取接口 成功后 在前台 修改值
上代码
4.c(总计结算)
使用4.A获取到购物车的id之后立即调取接口进行计算并返回前台(直接setData)对应的值
用微信小程序做一个小电商 sku的更多相关文章
- 微信小程序——初始化一个小程序项目
最近准备学习一下微信小程序,因为之前有react native项目经验,学习起来应该困难不大 微信小程序官网地址:https://mp.weixin.qq.com/debug/wxadoc/dev/i ...
- 小程序做一个能够左右滑动切换的多tab页面
主要原理:使用 <swiper> 和 <scroll-view> 组件 代码片段: https://developers.weixin.qq.com/s/mLx4FWmF757 ...
- 用小程序做一个类似于苹果AssistiveTouch功能
一.首先我先介绍一下,我们要做一个什么样的项目功能 项目功能就是一个音频点击播放,当点击为播放的状态时,一个音频的动图出现,而且是可以跟随着手指的滑动而滑动,而且,在滑动动图的时候,当前下的页面是不可 ...
- 小程序-生成一个小程序码画在canvas画布上生成一张图片分享出去
这个需求我遇到过2次.一次是在识别二维码后跳转到其它页面,另一次是识别二维码后进入到生成小程序码的当前页面. 我有一个梦想,就是成为一名黑客!!!!!! 小程序中js wx.request({ ...
- 微信小程序发布一个月,世界并没有什么不同
从某种意义上说,在张小龙身上,最可怕的事情莫过于微信小程序发布一个月,一开始的大红大紫居然渐归沉寂,曾经的风光无限已无人谈起,世界并没有什么不同. 这真像一场噩梦,一切都可怕地颠倒了.一款微信的战略级 ...
- 【小程序】微信小程序打开其他小程序(打开同一主体公众号下关联的另一个小程序)
微信小程序打开其他小程序(打开同一公众号下关联的另一个小程序) 注:只有同一(主体)公众号下的关联的小程序之间才可相互跳转 wx.navigateToMiniProgram(OBJECT) wx.n ...
- 小程序开发过程中常见问题[微信小程序、支付宝小程序]
目录 一.样式中如何使用background-image呢? 二.使用自适应单位rpx类似于rem,布局尽量使用flex布局 三.万能的{{双大括号,用于在模版中输出变量 四.你想要的基础组件和API ...
- 详解封装微信小程序组件及小程序坑(附带解决方案)
一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...
- 微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的
微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的 最近公司在开发一个小程序红包系统,客户抢到红包需要提现.也就是通过小程序来给用户发红包. 小程序如何来发红包呢?于是我想 ...
随机推荐
- Matlab绘制子图subplot使用攻略
参考:https://jingyan.baidu.com/article/915fc414ad794b51394b20e1.html Matlab绘制子图subplot使用攻略 听语音 原创 | 浏览 ...
- 伺服电机的Arduino库函数
servo.attach(pin) //连接伺服电机的信号线于控制板的引脚,9或10号引脚servo.attach(pin, min, max) servo: a variable of type ...
- 【题解】CF1375D Replace by MEX
\(\color{purple}{Link}\) \(\text{Solution:}\) 观察到题目要求操作次数不超过\(2n,\)且不必最小化操作次数,所以一定是构造题. 考虑将序列转化为\([0 ...
- 主厨(第4部分)- ASP. netNET Core和Angular 2 CRUD SPA
下载source - 79.7 KB 介绍 在Master Chef(第1部分)和Master Chef(第2部分)中,我介绍了如何使用ASP.Net Core和Angular JS.在Master ...
- MySQL基础 :基本知识点大纲
- 【Xshell】xshell6强制升级修改!
使用sublime text打开nslicense.dll文件,把0f86 8100 0000 33c0 68fe 0100 0050 6689中的0f86 8100修改为0f83 8100然后保存即 ...
- linux(centos8):配置docker的cgroup driver为systemd
一,为什么要修改docker的cgroup driver? 1,什么是cgroups? cgroups(Control Groups) 是 linux 内核提供的一种机制 它可以限制.记录任务组所使用 ...
- gin框架使用orm操作数据库(转)
简介:orm俗称关系对象模型,用来映射数据库SQL和对象的工具 ,相当于mongodb里面的mongoose库,Java里面的mybatis ibatis Golang GORM使用 https: ...
- C#文件序列化
前言 最近,为了实现Unity游戏数据的加密,我都把注意力放到了C#的加密方式身上,最简单的莫过于C#的序列化了,废话不多说,直接开始 准备工作 在使用文件序列化前我们得先引用命名空间 using S ...
- Docker学习笔记之-部署.Net Core 3.1项目到Docker容器,并使用Nginx反向代理(CentOS7)(一)
上一节演示如何安装Docker,链接:Docker学习笔记之-在CentOS中安装Docker 本节演示 将.net core 3.1 部署到docker容器当中,并使用 Nginx反向代理,部署平台 ...