Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.