Hema Fresh is Alibaba’s new retail format that has completely reconstructed offline supermarkets and is very popular.
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面
The applet is a framework based on MVVM. It is very important to make reasonable use of data binding to update the interface.
When developing, don’t write and write all at once. Read more documents, and you will find that you accidentally write natively. a component. .
"pages": [ "pages/index/index", //主界面 "pages/person/person", //个人界面 "pages/classify/classify", //分类商品界面 "pages/class/myFruits/myFruits", //水果商店 "pages/class/myMeat/myMeat", //肉类食品商店 "pages/myCart/myCart" //购物车 ],
siwper component very well realizes the horizontal poster image display, such as
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>First add scroll-x-="true" to the swiper component
Then set display: inline-block; white-space: nowrap;
## to the parent container of the carousel's child elements #The headline information box conversion adopts up and down rotation, and is completed using scroll-view nested swiper
<scroll-view scroll-y-="true" >
<swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
<block wx:for="{{something}}" wx:key="index">
//内容
</block>
</swiper>
</scroll-view>2. Classified product management
wx.request({
url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
complete: res => {
this.globalData.classifyList = res.data;
},
})
. And some personal information, such as date of birth and account information, can be saved through wx. setStorage and wx.getStorage are put into local storage
3. Shopping cart operation
For example, reduce the number of items in the shopping cart.
reduceItems: function (e) {
let carts = app.globalData.carts; //获取购物车的信息
let classifyList = app.globalData.classifyList; //获取商品的信息
for (let key of carts) { //遍历购物车数组
if (key.id === e.target.dataset.id) { //通过WXML中 view里面的bind-id传过来的参数进行查找
key.cartSelected = true;
if (key.num === 1) { //如果数量为1还要减
key.num--;
key.cartSelected = false; //购物车不选中
key.selected = false; //商品中不选中
app.globalData.carts = carts.filter((item) => { //进行购物车中商品剔除
return item.id != e.target.dataset.id;
})
} else {
key.num--;
}
}
}
let num = 0; //实时更新购物车小计界面显示
let totalPrice = 0;
for (let key of carts) {
if (key.cartSelected) {
num += key.num;
totalPrice += key.num * key.price;
}
}
this.setData({ //通过setData进行当前页面Data数据管理
cart: app.globalData.carts,
cartTotal: num,
cartTotalPrice: totalPrice,
})
},4 .weui framework introduces
@import './styles/weui.wxss';
Summary
Personal profile
Finally, if you like this project, please give it a star. Thank you!
Preliminary view of the project
Hema Fresh is a new retail format that Alibaba has completely reconstructed for offline supermarkets. It is very popular
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面
The applet is a framework based on MVVM. It is very important to make reasonable use of data binding to update the interface.
When developing, don’t write and write all at once. Read more documents, and you will find that you accidentally write natively. a component. .
"pages": [ "pages/index/index", //主界面 "pages/person/person", //个人界面 "pages/classify/classify", //分类商品界面 "pages/class/myFruits/myFruits", //水果商店 "pages/class/myMeat/myMeat", //肉类食品商店 "pages/myCart/myCart" //购物车 ],
siwper component very well realizes the horizontal poster image display, such as
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>First add scroll-x-="true" to the swiper component
Then set display: inline-block; white-space: nowrap;
## to the parent container of the carousel's child elements #The headline information box conversion adopts up and down rotation, and is completed using scroll-view nested swiper
<scroll-view scroll-y-="true" >
<swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
<block wx:for="{{something}}" wx:key="index">
//内容
</block>
</swiper>
</scroll-view>2. Classified product management
wx.request({
url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
complete: res => {
this.globalData.classifyList = res.data;
},
})
. And some personal information, such as date of birth and account information, can be saved through wx. setStorage and wx.getStorage are put into local storage
3. Shopping cart operation
For example, reduce the number of items in the shopping cart.
reduceItems: function (e) {
let carts = app.globalData.carts; //获取购物车的信息
let classifyList = app.globalData.classifyList; //获取商品的信息
for (let key of carts) { //遍历购物车数组
if (key.id === e.target.dataset.id) { //通过WXML中 view里面的bind-id传过来的参数进行查找
key.cartSelected = true;
if (key.num === 1) { //如果数量为1还要减
key.num--;
key.cartSelected = false; //购物车不选中
key.selected = false; //商品中不选中
app.globalData.carts = carts.filter((item) => { //进行购物车中商品剔除
return item.id != e.target.dataset.id;
})
} else {
key.num--;
}
}
}
let num = 0; //实时更新购物车小计界面显示
let totalPrice = 0;
for (let key of carts) {
if (key.cartSelected) {
num += key.num;
totalPrice += key.num * key.price;
}
}
this.setData({ //通过setData进行当前页面Data数据管理
cart: app.globalData.carts,
cartTotal: num,
cartTotalPrice: totalPrice,
})
},4 .weui framework introduces
@import './styles/weui.wxss';
Summary
Related recommendations:
Introduction examples of WeChat mini program developmentDetailed explanation of WeChat mini program video, music, and picture componentsA case study on how WeChat applet can obtain WeChat exercise steps (picture)The above is the detailed content of WeChat Mini Program-Imitated Hema Fresh Food. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
