The light of domestic goods 🐱🏍 imitation hongxing erke micro channel small program production

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 code

On 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 code

Declare 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 code

The 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 code

After 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 code

The 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 code

The 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 code

Result. 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 code

The 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 code

my

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 code

Jump 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

The light of domestic goods 🐱🏍 imitation hongxing erke micro channel small program production

preface

The development of preparation

Technical preparation

Cloud database

Project planning

On display

Project deconstruction

Details page

The shopping cart

Results show

Page analysis

Check box making

Search page

Results show

Page analysis

my

My page analysis

Jump page effect picture

Program source code

conclusion

Related Posts

Initial experience of Hype3 – Visual, responsive and dynamic

My Svelte Study Notes (in constant update……)

Hot bytedance summary