小程序无人点单效果实现
废话不多说，直接上源码: https://github.com/Unscientific-net-a-porter/-
以下皆为参考博客，可以了解一下。
微信小程序Tab切换,滑动切换： https://blog.csdn.net/fatong3/article/details/89950933
微信小程序实现商品数量加减案例： https://blog.csdn.net/zhenghhgz/article/details/89432330
小程序毫秒级倒计时（适用于拼团秒杀功能）：https://blog.csdn.net/qq_41473887/article/details/81287786
小程序锚点跳转：https://www.diybloghome.com/othercode/1673.html
有基础的基本上看了代码就能做了。
简单讲解一下
打开菜单页面，滑动菜单分为三个：热门菜单，限时秒杀和我要优惠。
参考一个链接。
代码如下。
wxml
<view class='body'>
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active-tab':''}}" data-current="0" bindtap="clickTab">全部</view>
<view class="swiper-tab-item {{currentTab==1?'active-tab':''}}" data-current="1" bindtap="clickTab">找人</view>
<view class="swiper-tab-item {{currentTab==2?'active-tab':''}}" data-current="2" bindtap="clickTab">找车</view>
</view>
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTabView">
<swiper-item>
<view>全部</view>
</swiper-item>
<swiper-item>
<view>找人</view>
</swiper-item>
<swiper-item>
<view>找车</view>
</swiper-item>
</swiper>
</view>
wxss：
.swiper-tab {
width: 100%;
display: flex;
flex-flow: row;
justify-content: space-between;
border-bottom: 2rpx solid #AFEEEE;
text-align: center;
height: 88rpx;
line-height: 88rpx;
}
.swiper-tab-item {
width: 30%;
color: #434343;
font-size: 30rpx;
}
.active-tab {
color: #00FF7F;
border-bottom: 3rpx solid #00FF7F;
}
swiper {
background-color: #F5F5F5
}
js：
Page({
/**
* 页面的初始数据
*/
data: {
currentTab: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
//滑动切换
swiperTabView: function (e) {
this.setData({
currentTab: e.detail.current
});
},
//点击切换
clickTab: function (e) {
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
this.setData({
currentTab: e.target.dataset.current
})
}
}
})
这个是别人博主的码，直接可以套用。
简单分析一下，那我自己写的为例，用的是swiper这个组件。
{{currentTab==0?‘active-tab’:’’}}这个是判断是否被选中时，给view也就是顶部标签添加一个class ( on )，而 data-current=“0” 则是自定义的一个数据，根据this.data.currentTab === e.target.dataset.current 来判定是否已经显示了该 swiper-item 页面，以及给 currentTab 赋值 达到要显示哪个 swiper-item 页面。
看不懂自己直接上代码，玩玩就懂了。
好了，主要页面的大体框架好了，下面先来做 热门菜单这个页面
这是我的部分代码
wxml
<swiper-item>
<!-- 热门菜单 -->
<!-- <view class="label_title">———热门菜单———</view> -->
<view class='content'>
<view class='left_list'>
<scroll-view scroll-y="true">
<view class="leftList {{classifySeleted=='to'+item._id?'active':''}}" wx:for="{{list}}" wx:for-item="item" wx:key="id" data-id="to{{item._id}}" bindtap="tapClassify">
<view class="name">{{item.title}}</view>
</view>
</scroll-view>
</view>
<view class='right_content'>
<scroll-view class='main_scroll' scroll-y scroll-with-animation="true" scroll-into-view="{{classifyViewed}}" bindscroll="onGoodsScroll">
<view class='scroll_bg' wx:for="{{list}}" wx:for-item="item" wx:key="id" id="to{{item._id}}">
<view class="title">{{item.title}}</view>
<view class="rightList" wx:for="{{item.list}}" wx:for-item="items" wx:key="*this" bindtap='goDishCentent' data-id="{{items._id}}">
<!-- 正确获取图片是src="{{items.url_img}}",因为没后台获取域名 -->
<image class="pic" src='{{localhost}}{{items.img_url}}'></image>
<view class="cateName">{{items.title}}</view>
<view class="sold">月售{{}}</view>
<view class="price">￥{{items.price}}</view>
<view class="addCart" bindtap="tapAddCart" data-id="{{id}}">
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</swiper-item>
js
data: {
list:[],
localhost: "http://a.itying.com/",
classifySeleted:"",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.requestData();
this.countTime();
},
/*请求数据*/
requestData(){
var that=this;
wx.request({
url: 'http://a.itying.com/api/productlist', //仅为示例，并非真实的接口地址
data: {
},
header: {
'content-type': 'application/json' // 默认值
},
success:function(res) {
console.log(res.data);
//替换反斜杠
var arr = res.data.result;
for(var i=0; i<arr.length; i++){
for(var j=0;j<arr[i].list.length;j++){
arr[i].list[j].img_url=arr[i].list[j].img_url.replace(/\\/g,'/');
}
}
//注意this指向
that.setData({
list: arr
})
//设置classifySeleted的初始值
that.setData({
classifySeleted: 'to'+res.data.result[0]._id
})
}
})
},
/* 滚动 */
onGoodsScroll: function (e) {
//console.log(e)
if (e.detail.scrollTop > 10 && !this.data.scrollDown) {
this.setData({
scrollDown: true
});
} else if (e.detail.scrollTop < 10 && this.data.scrollDown) {
this.setData({
scrollDown: false
});
}
var scale = e.detail.scrollWidth / 570,
scrollTop = e.detail.scrollTop / scale,
h = 0,
classifySeleted,
len = this.data.list.length;
//console.log(this.data);
//console.log(scale)
//console.log(scrollTop)
this.data.list.forEach(function (list, i) {
/* 这里的接口是list下面还有个list */
var _h = 70 + list.list.length * (46 * 3 + 20 * 2);
// console.log("h"+h)
if (scrollTop >= h - 100 / scale) {
classifySeleted = 'to'+list._id;
}
h += _h;
});
this.setData({
classifySeleted: classifySeleted
});
},
// 点击按钮，传递data-id数据
tapClassify: function (e) {
var classifyViewed
var classifySeleted
console.log(e)
var id = e.currentTarget.dataset.id;
console.log(id);
this.setData({
classifyViewed: id
});
console.log(this.data.classifyViewed);
var that = this;
setTimeout(function () {
that.setData({
classifySeleted: id
});
}, 500);
console.log(this.data.classifySeleted);
},
//自定义点击，跳转至菜单详情页
goDishCentent:function(event){
console.log(event)
var c_id = event.currentTarget.dataset.id;
console.log(c_id)
wx.navigateTo({
url: '../dishcentent/dishcentent?c_id='+c_id,
})
},
wxss
page {
width: 100%;
position: relative;
float: left;
height: 100%;
}
.swiper-tab {
width: 100%;
box-shadow: 0 2px 3px 2px #d3d3d3;
text-align: center;
line-height: 80rpx;
position: fixed;
z-index: 777;
background: #fff;
height: 90rpx;
}
.swiper-tab-list {
font-size: 30rpx;
display: inline-block;
width: 25%;
color: #777;
}
.on {
color: #000;
font-weight: bold;
border-bottom: 5rpx solid #fed529;
}
.swiper-box {
display: block;
/* height: 100%; */
width: 100%;
overflow: hidden;
position: relative;
padding-top: 90rpx;
z-index: 7;
height: 1020rpx;
}
.swiper-box view {
text-align: center;
}
/*标题*/
.label_title {
font-size: 30rpx;
color: rgb(146, 146, 146);
}
.content {
width: 100%;
position: relative;
float: left;
background: #fff;
}
.left_list {
width: 24.5%;
position: absolute;
left: 0;
padding-top: 40rpx;
padding-bottom: 40rpx;
background: #f1f1f1;
/* min-height: 100%; */
box-sizing: border-box;
height: 1020rpx;
}
.leftList {
padding: 30rpx 10rpx;
float: left;
position: relative;
width: 100%;
box-sizing: border-box;
}
.leftList .name {
font-size: 24rpx;
line-height: 30rpx;
}
.leftList.active {
background: #fff;
}
/* 定义一个伪类元素，添加下划线效果 */
.leftList.leftList.active:after {
content: "";
width: 10rpx;
height: 100%;
background: #feb70f;
position: absolute;
top: 0;
left: 0;
}
.right_content {
width: 74.5%;
float: right;
position: relative;
height: 1020rpx;
}
.scroll_bg {
position: relative;
width: 100%;
float: left;
white-space: nowrap;
}
.main_scroll {
height: 1096rpx;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.right_content .title {
padding: 20rpx 20rpx 50rpx 20rpx;
position: relative;
float: left;
width: 100%;
box-sizing: border-box;
}
.rightList {
padding: 20rpx 10rpx;
float: left;
position: relative;
width: 90%;
box-sizing: border-box;
margin-left: 5%;
margin-right: 5%;
border-bottom: 1px #eee solid;
}
.rightList .pic {
width: 40%;
height: 198rpx;
float: left;
position: relative;
border-radius: 5px;
}
.rightList view {
width: 60%;
float: left;
position: relative;
padding: 10rpx 10rpx 0 30rpx;
box-sizing: border-box;
text-align: left;
}
.rightList .addCart {
font-size: 50rpx;
background: #feb70f;
width: 50rpx;
height: 50rpx;
text-align: center;
border-radius: 50%;
padding: 0 !important;
float: right;
}
代码很长，别全复制，尤其是wxss的。
简单分析一下：
content 下面分为了，left_list 和 right_content 左右两部分。
请认真看看代码，没错这个原理和上面的一样，也是通过 swiper 来实现的。
不同的是，这里是调用了接口，
列表：http://a.itying.com/api/productlist
详情：http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955
调用的方法嘛，就是小程序的网络请求 ： requestData()
是小程序的一个apihttps://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
url 是 接口地址。
data是用来给后端传值的，其规则：
data 参数说明
最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：
对于 GET 方法的数据，会将数据转换成
query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化
对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
因为我们的请求是默认的post请求，拿的数据是json，所以header 这里用的是默认值。
success ，并不是已经获取成功了，他只是说明代码跑到接口那了，能否拿到数据得看 res.data.msg（有些接口不一定是msg）返回的状态。因为我们这里不用给后端传值，而且接口能用，所以跑到接口反馈数据了，也就基本拿到数据了。
利用 setData({})
将数据赋给 list:[],
在wxml 页面里一个个循环打印出来
提一下值得注意的地方。
由于接口是别人的，可能没有安全证书，
请在右上角详情那里勾选上。
接口文件调用的图片是 xxxxxxx\\ xxxxxxxxx\\xxxxxx.jpg格式的。
所以要 把 \\ 改成/。
而且，图片没有端口号。
所以
wxml
<image class="pic" src='{{localhost}}{{items.img_url}}'></image>
没有后台获取端口号，只能先写死了。
js
localhost: "http://a.itying.com/
限时秒杀页面
原理同上，不过我没有写完整。说说思路。
1.获取时间，当时间的值等于某值时，调用x方法，x方法就是调用某个接口，setData 最后显示菜单。并开始调用计时器方法。
2.可以查看已过时的和即将开始的。也就是 点击 左边的三个view，分别调用 自己的 x 方法，显示菜单。
3.菜单里 添加{{ time某值？‘方法1’:‘方法2’}}的判定形式。方法1无疑是可以点击里面的数据，方法2则调用wx.showToast 弹出消息框“时间已过” 。同时class里也添加方法，{{ time某值？‘类名1’:‘类名2’}}，类名2无疑是让菜单变灰色提示用户不能点击。
4.当然，完善逻辑来说，当库存没了也就是抢完了，也要执行方法2和类名2。这时候你要这样字=子写:
{{ num<0?‘方法3’:time某值？ ‘方法1’ :'方法2’ }}，那么方法3就是 弹出消息框“已抢完”，同理class也应如此:
{{ num<0?‘类名2’: time某值？ ‘类名1’:‘类名2’}}，因为这里只需把菜单的颜色变成灰色和彩色所以只需两个方法。
详情页没写。见谅。
估计也只用 加个计时器和上面的一些判断方法。
我是不是太懒了23333。
优惠券页面
我写了，偷了点懒。
代码不多，反正就是点击领取，执行方法，给zige赋值0表示你已经把资格用了，然后在页面上加判断，当zige不大于0时，执行方法弹出提示消息，改变class，从而改变按钮颜色。至于券我是做了两张图片，原理一样。
js
//优惠卷
quan:'../images/quan1.png',
// 资格 仅供测试
zige:1,
//优惠页面
getQuan:function(){
this.setData({
quan:'../images/quan0.png',
zige:0
})
},
tishi:function(){
wx.showToast({
title: "你已经领取过了!",
icon: 'loading'
})
},
wxml
<!-- 我要优惠 -->
<swiper-item>
<view class='content'>
<view class='quan_content'>
<view class='quan_list'>
<image src="{{quan}}"></image>
<text class='quan_text1'>满30减10</text>
<!-- 附加条件 -->
<text class='quan_text2'>仅适用于非促销类商品</text>
</view>
<!-- 领取按钮 -->
<view class='quan_button'>
<text class="{{zige>0?'get_button':'get_no'}}" bindtap='{{zige>0? "getQuan":"tishi"}}'>{{zige>0?'领取':'已领取'}}</text>
</view>
</view>
</view>
</swiper-item>
wxss
/* 优惠券 */
.quan_content {
margin-left: 45rpx;
width: 660rpx;
position: relative;
margin-top: 30rpx;
box-sizing: border-box;
height: 210rpx;
border-bottom: #eee 1px solid;
}
.quan_list {
position: relative;
float: left;
width: 450rpx;
height: 180rpx;
}
.quan_list image {
position: absolute;
z-index: 7;
width: 450rpx;
height: 180rpx;
left: 0;
top: 0;
}
.quan_list .quan_text1{
position: absolute;
font-size: 40rpx;
font-weight: bold;
z-index: 777;
color: #fff;
top: 80rpx;
left: 120rpx;
}
.quan_list .quan_text2{
position: absolute;
font-size: 24rpx;
font-weight: bold;
z-index: 777;
top: 135rpx;
left: 120rpx;
}
.quan_button {
position: relative;
float: left;
width: 160rpx;
height: 180rpx;
margin-left: 45rpx;
}
.quan_button text {
position: relative;
float: left;
width: 100%;
height: 90rpx;
line-height: 90rpx;
margin-top: 45rpx;
text-align: center;
border-radius: 10px;
color: #fff;
}
.get_button{
background: #fed529;
}
.get_no{
background: #c1c1c1;
}
再说说 详情页面
首先通过菜单列表页面的button 获取到 该产品的id
我们通过 在点击控件view里面 利用 data-id 进行赋值，
data-id="{{id}}" 里面的id就是 接口里该产品的id
然后在js文件里面 通过 跳转页面传值的方式将id传给详情页。
然后 详情页js里获取 并赋值到获取数据的方法里
这样我们就拿到了数据
由于接口的问题我们拿到的数据是html 格式的
我们可以 用 WxParse.wxParse(‘article’, ‘html’, article, that, 5); 来转换。
然后同上面一样 赋值 并在wxml页面打印出来。
至此 前端页面基本完成。 支付留到下一篇再讲。
由于分开了两次编写这个文章，所以嘛。。。。。
下一篇详讲开发，从零开始。
2404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
