preface
- Recently in the study of micro channel small program, ready to cooperate to write a project practice hand, see the recent very hot Hongxing Erke, decided to start from him, the light of the top!
- Official documents and W3Cschool were referred to in the development process. Please give me more advice on any shortcomings
- Article address of project partner
The development of preparation
- Wechat developer tools
- VS Code
- Have a good vant component library
- Mark Man
Technical preparation
- css
- JavaScripts
- Cloud database
Cloud database
Calling the database Products, we inserted 50 item data into the database for page display
Project planning
This project is a cooperative project, and I am mainly responsible for navigation of my page, detail page, classification and part of shopping cart
The bottom navigation bar is divided into four types: home page, classification, shopping cart, mine. The four navigations are solved with custom tabbars added to app.json
"tabBar": {
"selectedColor": "#fece00"."borderStyle": "white"."backgroundColor": "#ededed"."list": [{"text": "Home page"."pagePath": "pages/home/home"."iconPath": "assets/images/tabs/home.png"."selectedIconPath": "assets/images/tabs/home-active.png"
},
{
"text": "Classification"."pagePath": "pages/sort/sort"."iconPath": "assets/images/tabs/sort.png"."selectedIconPath": "assets/images/tabs/sort-active.png"
},
{
"text": "Shopping cart"."pagePath": "pages/shopcar/shopcar"."iconPath": "assets/images/tabs/shopcar.png"."selectedIconPath": "assets/images/tabs/shopcar-active.png"
},
{
"text": "I"."pagePath": "pages/my/my"."iconPath": "assets/images/tabs/my.png"."selectedIconPath": "assets/images/tabs/my-active.png"}}]Copy the codeOn display
Project deconstruction
Details page
It is important to note that when using the Vant library, the address of the component to be used should be included in the global JSON or local page JSON
{
"usingComponents": {
"van-goods-action": "@vant/weapp/goods-action/index"."van-goods-action-icon": "@vant/weapp/goods-action-icon/index"."van-goods-action-button": "@vant/weapp/goods-action-button/index"."van-share-sheet": "@vant/weapp/share-sheet/index"."van-collapse": "@vant/weapp/collapse/index"."van-collapse-item": "@vant/weapp/collapse-item/index"."van-icon": "@vant/weapp/icon/index"}}Copy the code
It can be found that the picture, description, price and color of the goods in the above two giFs are different. I did not set the data as dead data when making the page, but took the data from the cloud database and linked the database in the JS file
const db = wx.cloud.database(); // Connect to the database
const productsCollection = db.collection('products'); // Get the data set
Copy the codeDeclare productInfo in the JS data, and assign specific data fields to ProductInfo based on the id value passed in when the page loads
async onLoad(options) {
let {data} = await productsCollection
.where({
id: db.command.eq(id)
})
.get();
this.setData({
productinfo:data
})
},
Copy the code 
After careful observation of the two giFs above, it can be found that the size of the first picture is M-4XL and the size of 35-44 in the second chapter. This is because I have made two detail pages, one is the detail page of clothing, corresponding to the size of M-4XL, and the other is the detail page of shoes, corresponding to the size of 35-44. When making the page jump, IsShoes field of database data plays the role of page jump judgment
Judge when the page jumps, if isShoes is true, jump to the shoe details page, otherwise jump to the clothing details page,JS code is as follows
goToDetail(e){
if(e.currentTarget.dataset.item.isShoes){
wx.navigateTo({
url: `.. /detail/detail? id=${e.currentTarget.dataset.item.id}`})}else{
wx.navigateTo({
url: `.. /detail2/detail2? id=${e.currentTarget.dataset.item.id}`,}}}),Copy the codeThe quantity of goods can be added or subtracted, but it cannot be less than 0
As shown in the figure below
The JS code is as follows
reduceNum() {
if (this.data.number < 1) {
wx.showToast({
title: 'It can't be reduced any more'});this.data.number = 1
}
this.setData({
number: -this.data.number
})
},
increaseNum() {
if (this.data.number > 5) {
wx.showToast({
title: 'Pro ~ no wild consumption'})},this.setData({
number: + +this.data.number
})
},
Copy the codeAfter selecting the size and quantity of the product, we click add to the shopping cart. In the shopping cart, we can see that the newly added product is displayed in the first line of the shopping bar, and the quantity is 2. The code logic of this behavior is taken charge of by another project partner, whose address is attached at the beginning of the article
The shopping cart
Results show
Page analysis
Check box making
I named the check box bind:change trigger event onChangeOfHD for Hongxing Erke official flagship store.
Name the commodity check box bind:change event onChange,
Name the bind:change event onChangeOfSub.
data:{
checked: false.checked_sub: false.result: [],}Copy the codeThe above code shows declaring variables in the data of the JS file
setButton() {
let result = [];
for (let index in this.data.products) {
result.push(index);
}
this.setData({
result: result
})
},
onChangeOfHD(event) {
this.setData({
checked: event.detail,
});
if (this.data.checked) {
this.setButton()
} else {
this.setData({
result: []})}},onChange(event) {
this.setData({
result: event.detail,
});
},
onChangeOfSub(event) {
this.setData({
checked_sub: event.detail
})
if (this.data.checked_sub) {
this.setButton()
this.setData({
checked: true})},else {
this.setData({
checked: false.result: []})}},Copy the codeThe setButton() method in the above code represents marking the selected state of the item. Since it needs to be used many times, it is encapsulated as a method for reuse
When the onChangeOfHD event is triggered, the Boolean value of checked changes. If checked is true, all items should be checked. Pass the index values of all items into the result array so that all items are displayed. I empty the Result array
When the onChange event is triggered, the state of a single commodity reuse box can be changed
When the onChangeOfSub event is triggered, if the value checked_sub is true, Then the check boxes and all items of Hongxing Erke official flagship store should be checked, that is, checked becomes true, and all item index values are passed into the result array (call setButton() method).
Search page
Results show
Page analysis
<view class="page">
<scroll-view scroll-y>
<view class="hxek-search">
<van-search value="{{value}}" show-action shape="round" placeholder="Please enter search keywords" bind:search="onSearch"
bind:cancel="onCancel" />
<view wx:if="results.length > 0">
<van-cell wx:for="{{results}}" wx:key="_id" title="{{item.title}}" size="large" bind:click="gotoDetail"
data-id="{{results[index].id}}" data-isShoes="{{results[index].isShoes}}" />
</view>
</view>
</scroll-view>
</view>
<view class="search-body">
<text class="search-body_txt">Hot recommended</text>
<view class="search-body_blk" wx:for="{{recommend}}" wx:key="index" bindtap="gotoHome">{{item.txt}}</view>
</view>
Copy the codeResult. length > 0 in line 6 of the above code indicates that the searched goods will be displayed only when the query result set is greater than 0
The next is to realize the query function, first connect to the cloud database, use the fuzzy query keyword to return the goods that meet the conditions
const db = wx.cloud.database(); // Connect to the database
const productsCollection = db.collection("products"); // Get the data set
// Declare in data
data: {
productsCollection,
results: []}onSearch(e) {
// display when querying
wx.showToast({
title: 'Query... '.icon: 'loading'
})
let keyword = e.detail; // Get the text entered in the query
// If the input text is empty, search for goods in the store and return
if(! keyword.trim()) { wx.showToast({title: 'Search for in-store items'.icon: 'error'
})
return;
}
/* * select * from RegExp; /* * select * from RegExp; Options :' I 'to ignore case * add data to the result array after successful query and display */ on the page
productsCollection
.where({
title: db.RegExp({
regexp: keyword,
options: 'i'
})
})
.get()
.then(res= > {
this.setData({
results: res.data
})
console.log(this.data.results)
})
},
// When you click Cancel after the query is complete, the Result array is reset to empty and the page returns to its original state
onCancel() {
this.setData({
results: []})},Copy the codeThe above is the general content of the query function, the successful query will also be a page jump, the following is the code of the page jump
gotoDetail(e){According to the data ID,isShoes field to jump to the pagelet { id ,isshoes} = e.currentTarget.dataset;
if(isshoes){
wx.navigateTo({
url: '.. /detail/detail? id='+id,
})
}else{
wx.navigateTo({
url: '.. /detail2/detail2? id='+id,
})
}
console.log(id,isshoes)
},
Copy the codemy
My page analysis
Here is the HTML code
<view class="page">
<view class="page_hd">
<view class="person-center"></view>
<view class="head-portrait"><image src="https://image.suning.cn/uimg/cmf/cust_headpic/0000000000_01_240x240.jpg" class="head-img"></image></view>
<view class="person-information">
<text>Hongxing Erke Dana</text>
<image src="http://image2.suning.cn/uimg/cms/img/153440744708636664.png" class="person-img"></image>
</view>
<navigator><view class="exit">Log out</view></navigator>
</view>
<view class="page_bd">
<view class="weui-cells weui-bd weui-cells_after-title">
<block wx:for="{{collect}}" wx:key="index">
<navigator url="{{item.url}}">
<view class="weui-cell weui-cell_access weui-cell_example ">
<view class="weui-cell__hd">
<image class="icon-img" src="{{item.iconPath}}"></image>
</view>
<view class="weui-cell__bd">{{item.title}}</view>
<view class="weui-cell__ft"></view>
</view>
</navigator>
</block>
</view>
<view class="weui-cells weui-cells_after-title">
<block wx:for="{{set}}" wx:key="index">
<navigator url="{{item.url}}" bindtap="gotoDetail">
<view class="weui-cell weui-cell_access weui-cell_example ">
<view class="weui-cell__hd">
<image class="icon-img" src="{{item.iconPath}}"></image>
</view>
<view class="weui-cell__bd">{{item.title}}</view>
<view class="weui-cell__ft"></view>
</view>
</navigator>
</block>
</view>
</view>
</view>
Copy the codeJump page effect picture
The production of four pages are relatively simple, here is not much analysis, the source project at the end of the article
Program source code
Click here to
conclusion
For the first time to write is a large project, is a big challenge for me, making early met with some difficulties with the page layout, then asked the students to handy, the cloud database operation are also studied in the official website for a long time, just have more technology in the project code (query, jump details page, etc.) 😉 😉 😉. All in all, this project is a big growth for me. Thank you very much for helping my teachers and classmates. If my article is helpful to you, please click “like” 👍. We look forward to your comments in the comments section to discuss and learn together