preface

Recently, I learned wechat mini program for a period of time. I also tried to make JINGdong mini program with my friends, focusing on the realization of some basic functions of business logic and online shopping. In line with the original intention of learning and sharing, I will share the pit encountered in the development in the article, hoping to bring some help to the little white like me.

Want to read the advanced welcome to our big man’s article

Preparation before development

  • Wechat developer tools
  • Fiddler packet capture software
  • Have a good vant component library
  • Mark Man interface proportion, color

Projects show

Let’s see how it works

Pictures are as follows

The overall framework

  • This project is based on wechat small program cloud development. Because it is a full stack project, the front-end uses the DEVELOPMENT mode of WXML + WXSS + JS supported by small program, and the back-end data is managed by cloud database.

The overall structure of the project

| - jd jingdong module | | - miniprogram project - vant had great vant component library | - assets part of the data, do separation module | - db. | js data - app. Js global js | - app. Json global json configuration, Custom tabbar | - app. WXSS WXSS global configuration | | | - pages page - the index page interface - the details shopping | - search search interfaceCopy the code

Common JS is used to write the data of assets file. The data module. Exports is exposed.

Cloud database

A cloud database is a NoSQL database. Each table is a collection. It is worth noting that the _id and _openID fields need to be included when designing the database. _ID is the primary key of the table, and _openID is the user ID. Each user has a different _openID to distinguish different users.

Database design

Here are two tables I designed

| - JDShop | - _id table primary key | - _openid user id flagship store | | - address goods - comment comments | - | percentage goodcomment praise - imgUrl commodity image links | - source of origins of goods | | - plusPrice jd member price - the price of goods price | - | sales_count sales - tags tags | | - time time - the title of goods title | type - the type of goodsCopy the code

| - suggestResult | - _id | - desc descriptionCopy the code

The table is relatively simple, make do look!

Cloud storage

Cloud development provides a storage space, you can upload files to the cloud, similar to a web disk, for compression within 2M small programs are very helpful

After uploading to the cloud, you can directly copy the download address, saving a lot of space

Pay attention to: Remember permissions must be changed to all users can read, can oh

Project details

Brand classification page

The two scoll-Views are arranged in an elastic layout. If the width of the left scoll-view is fixed and the width of the right scoll-view is display: 1, the remaining width will be used

Let’s share the click style here

If you look closely, I have three dynamic styles here, first the most obvious red border on the left side of the text, second, the font is bold and finally the bottom background becomes white

<view class="cates {{ activeIndex == index ? 'active_cates': '}}" // Multiple styles can be setCopy the code

In the case of the red border, for example, you can use style overlay to separate the effects with different class names. In my case, by setting a teradata operator, add a click event, bindtap, to determine activeIndex == index when clicked, when true, The pre-set Active_cates will run, and the left border will appear. Do you think there are hands on the line?

And when YOU click on different categories, the right side of the page seems to change, right?

Changed, but not completely

In essence, its structure WXML, JS logic has not changed, only the data-driven interface through WX :for all to traverse to come out, this is a good place for wechat cloud development, especially convenient, with this is not to save a lot of effort to cut pages

Product screening page

The first effect

Here simple page layout, for everyone is certainly a piece of cake, not to repeat, I will talk about here database data filtering, for example

This is the corresponding JS code

Async sales_btn(e){let {data} = await jdshop OrderBy ('sales_count','desc').get() this.setdata ({jdshop:data})},Copy the code

Because it is cloud development, the fake data we made are in the cloud database, so we need to access the cloud database and call the data we want. Because accessing the database is an asynchronous task, I am using the latest writing method of ES6 Async to change the asynchronous task into synchronous task and receive with await. For details, you can see Teacher Ruan Yifeng’s Async function

Get () gets the data, and then assigns it to the traversal data jdshop. Isn’t that easy? As for some of the database methods, I recommend looking at the cloud development database documentation

And I’m using custom styles here, which take up the entire screen

This is the JSON code

{"usingComponents": {}, "navigationStyle":"custom"}Copy the code

Search page

No more talking, let’s see the effect

Here to share with you a few possible bumps

  • Obviously when we click, we go to another page, but how does the data bottle get through?
  • How does the following search box change in real time when the current keyword is changed?
  • How do you save your search history and report it back immediately when clicking on a search?

Take your time

The first one is that it’s actually pretty easy to pass data around

search_btn(){ //console.log(this.data.value); let value = this.data.value; wx.navigateTo({ url: `.. /search/search? Value = '+value, // wx.navigateto jump page})}Copy the code

NavigateTo (wx. NavigateTo) navigateTo (wx. NavigateTo) navigach (wx. NavigateTo)

Notice how you write: “? Value = value”

Second, first of all, the search bar here uses the Vant component, and the catch here is that the bind event is not Bindtap, but bind:change, so you still need to look through the Vant documentation

This is the binding function code

async onChange(e) { let dataList = wx.getStorageSync('title'); // This is a local store designed to the Storage let searchKey = e.datail; Log ("searchKey",searchKey); Good. / / playing console log debug let {data} = await suggestResultCollection. Where ({desc: db. The RegExp ({RegExp: searchKey, Get.setdata ({suggest_list:data, isSuggestShow: true, dataList}) if(! e.detail){ this.setData({ isSuggestShow: false }) } }Copy the code

We use the bind:change event to get the searchKey value that you entered in real time. As for how to match the following search, we need to use the regular expression. SuggestResultCollection was used to filter using **. Where ** and called the regular RegExp, which was our searchKey, and finally got the data from.get()

The third

storage

Storage is a small program with its own nature of cache, can help you temporarily store some user ID, information what, so sometimes not all into the database, the data into storage, may be a more convenient idea. ** Sample code **

wx.setStorage({
  key:"key",
  data:"value"
})
Copy the code

The specific implementation

The code looks like this (this is the function that binds the bind:Search event)

onSearch(e){ let dataList = [], data = e.detail; dataList.push(data); Let storageList = wx.getStoragesync ("title") if(storageList){//if (datelist = dataList. Concat (storageList)); // concat merges two arrays} wx.setStoragesync ('title', dataList); // add dataList to storage},Copy the code

The source code

Program source code

A little insight

  • Multi-use components. Some repetitive code can be optimized for custom components. In fact, we are doing real business projects, and the engineering is extremely large, so use more components, and you have to slack off when you have to slack off
  • Call console.log as often as possible

The last

This is my first time to write a small program project, the function is not very complete.bossesPlease give me a thumbs up!