A case study on the Development of Mini Program Mall
This article mainly introduces the relevant knowledge of Mini Program Mall development case analysis, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe everyone will gain something after reading this Mini Program Mall development case analysis article. Let's take a look.
Development environment: WXML (HTML), WXSS (CSS), Javascript
Development tools: vscode, Wechat developer tools
Development process: after downloading Wechat developer tools, you will have your own AppID after registration. WeChat Mini Programs has the official WeChat Mini Programs development documentation.
Code implementation, the home page is not much, mainly layout problems. Wxss Code:
. img-box image {
Width: 100%
Height: 100%
}
. img-box image:after {
Content:
Position: absolute
Bottom: 0
Width: 100%
Color: # fff
Padding: 50px 20px
}
Realization of rotation effect of Furniture
The implementation of Mini Program carousel uses the swiper component, and the slider view container has properties such as indicator-dots,autoplay,setinterval, which can be set for automatic playback and time interval. The inserted picture can be looped with wx:for.
The jump problem of navigate
After clicking to join the shopping cart, the binding event was supposed to jump to another page, but there was no effect or error. I thought there was something wrong with my spelling or path, but there was no problem after I checked it. Finally found a hole. Here to jump to the tabBar page, according to the default jump is not allowed, look at the development documentation to find the problem.
Solution: navigateTo can be replaced with switchTab there are many ways to jump, you can see the development documentation.
How to add goods to the shopping cart how to control the quantity of goods purchased and calculate the price
What I wanted to do was to click on the picture to enter the details, and then click to add the shopping cart to save it in the background, but due to the limited knowledge of self-study, the back end has not learned yet, so we can only add a binding event to jump to the shopping cart.
Next, let's get to the main question: how to control the number of shopping carts purchased and calculate the total price? First define a cart empty array in js, we first assign this value to the empty array, and then take this value. After that, the status of the product is selected by default, and you can change the status to cancel with one click. Don't say much, and then calculate the total price of the selected goods.
Js Code:
SelectList (e) {
Let selectAllStatus = this.data.selectAllStatus
Const index=e.currentTarget.dataset.index
Let carts=this.data.carts
Const selected= carts[index] .selected
Cards [index]. Selected =! selected
SelectAllStatus = carts [index] .selected
/ / if (cards [index]. Selected =! selected) {
/ / selectAllStatus:false
/ /}
This.setData ({
Carts
SelectAllStatus
});
This.getTotalPrice ()
}
DeleteList (e) {
Const index = e.currentTarget.dataset.index
Let carts = this.data.carts
Carts.splice (index,1)
This.setData ({
Carts: carts
});
If (! carts.length) {
This.setData ({
HasList: false
});
} else {
This.getTotalPrice ()
}
}
AddCount (e) {
Const index = e.currentTarget.dataset.index
Let carts = this.data.carts
Let num = cards [index] .num
Num++
Cards [index] .num = num
This.setData ({
Carts
})
This.getTotalPrice ()
}
MinuCount (e) {
Const index = e.currentTarget.dataset.index
Let carts = this.data.carts
Let num = cards [index] .num
If (num {
This.setData ({
UserInfo: res.userInfo
HasUserInfo: true
})
}
} else {
/ / compatible processing without open-type=getUserInfo version
Wx.getUserInfo ({
Success: res = > {
App.globalData.userInfo = res.userInfo
This.setData ({
UserInfo: res.userInfo
HasUserInfo: true
})
}
})
}
}
GetUserInfo: function (e) {
Console.log (e)
App.globalData.userInfo = e.detail.userInfo
This.setData ({
UserInfo: e.detail.userInfo
HasUserInfo: true
})
}
This is the end of the article on "Mini Program Mall Development case Analysis". Thank you for your reading. I believe you all have a certain understanding of the knowledge of "Mini Program Mall Development case Analysis". If you want to learn more knowledge, you are welcome to follow the industry information channel.
