preface

The original

Every project should have its purpose and demand to realize it. As far as I know, there are five second-hand groups in our school. When we graduate every year, there are also scenes where seniors set up stalls to sell their unused products on the roads of the school. Of course, you can also sell the unused products online. However, if the person Posting the unused products can choose to sell the products directly in the university, then you can pay directly on delivery. You don’t have to worry about what to do if the quality of the unused products is wrong, because you can check the products on the spot.

Of course, as mentioned above, if you do not need to trade through the Internet, and do not need to ship things, the function will be significantly less.

Below is my map, is I want to complete the function, but I did not complete all the functions in terms of my ability (will be listed later), although the completion is not as good as imagined, but when I summarize, this small program to do here, I learned something. Of course, I will try to write down the whole project later.

The sites and resources used

Product prototype: ink knife
Wechat developer tools
Alibaba vector icon
Cloud database
Wechat small program development tutorial manual document

1. Project construction

1.1 Project Prototype

1.2 Page brain diagram

1.3 Structure and Function

There are three bottom navigation, which are

Home page: index

– round figure

— Search box (jump to search display page)

— Tabbar (Click to update the product list below)

— Commodity display
Release: the publish
My: mine

— Profile picture wechat name

– set

— Generate small programs

— My release

1.4 database

shop-list

Manage the release of idle goods

sho-users

Manage the login users

2, implementation,

2.1 componentization

The componentization of small programs is used in the project. The rotograph and search box of the home page are written as components in the compenents file directory:

First introduce in index.json:

 "usingComponents": {
    "index-swiper":"/components/swiper/swiper"."my-search":"/components/search/search",}Copy the code

Using components in index.html:

<! -- componentized swiper --><view class="swiper-container">
    <index-swiper imgUrls="{{imgUrls}}"></index-swiper>
  </view><! -- componentized search --><my-search></my-search>
Copy the code

The important thing to note here is that the data in swiper is determined by index, so in swiper.js, we’re going to set imgUrls to

 properties: {
    imgUrls:Object
  },
Copy the code

In index.js, you can set the imgUrls Page

imgUrls:[
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3205342688, & FM = 26 & gp = 0. 4225907114 JPG'.'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4048818314, & FM = 26 & gp = 0. 2316053512 JPG'].Copy the code

2.2 tabbar jump

2.2.1 Basic Description

When the first page is loaded, when the first screen is loaded, all the shop-list data is loaded, and the tabbar is not used at this time

When you click on any item in the Tabbar, the page loads items in that category

2.2.2 implementation

The index WXML – tabbar part

<! -- List classification display -->
<view class="type-container">
   <! -- Loop out tabbar navigation -->
    <view class="type-item" wx:for="{{typeCat}}" wx:key="{{index}}">
    <! -- Sets the style of the navigation item to be clicked and fires typeSwitch events when clicked -->
      <view data-id="{{item.id}}" class="type-name {{activeTypeId === item.id ? 'type-item-on' : ''}}"
      bindtap="typeSwitch" 
      >
        {{item.name}}
      </view>
    </view>
</view>
Copy the code

Index. Js – tabbar part

data:{
activeTypeId:'01'.type: ' '.// Type of data configuration
    typeCat: [{
      id:'0'.name:'Electronic products'}, {id:'1'.name:'Articles of Daily Use'}, {id:'2'.name:'Snack snacks'}, {id:'3'.name:'Book Materials',}}]typeSwitch(e) {
    this.setData({
      activeTypeId:e.currentTarget.dataset.id,
    })
// Request data from the database
}
Copy the code

Index. WXSS — — tabbar parts

.type-container {
  display: flex;
  padding: 5rpx 20rpx 0 20rpx;
  /* position: relative; top:-93rpx; * /
  / * background: RGB (0,0,0,0.137); * /
  margin-top: 15rpx;
  justify-content: flex-start;
}
.type-container .type-item {
  flex: 1;
  height: 60rpx;
}
.type-container .type-item view {
  font-size: small;
  text-align: center;
  line-height: 60rpx;
  border-radius: 10rpx 10rpx 0 0;
  margin: 0 3rpx;
  color: rgb(24.23.23);
 
}
.type-container .type-item .type-item-on {
  color: rgb(111.240.218);
  
  font-size: medium;
  box-shadow: 3rpx greg;
  border-bottom: 2rpx solid  rgb(111.240.218);
}
Copy the code

2.3 Obtaining the User ID

Get the user OpenID from the cloud function

Index. Js: (default)

// Cloud function entry file
const cloud = require('wx-server-sdk')

cloud.init()

// Cloud function entry function
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}
Copy the code

Call the cloud function in index.js:

onLoad() {
    wx.cloud.callFunction({
      name:"shopOpenId".success(res){
        console.log(res)
        var openId = res.result.event.userInfo.openId
      },
      fail(res){
        console.log(res)
      }
    })
 }
Copy the code

You can get the OpenID

2.4 Cloud Database Operations

2.4.1 Loading idle items

2.4.1.1 Loading goods on the first screen

wx.cloud.database().collection("shop-list").get({
      success(res) {
        console.log("Request successful",res)
        that.setData({
          shopList:res.data
          //shopList is defined as shopList in data :[]})},fail(res) {
        console.log("Request failed",res)
      }
    })
Copy the code

2.4.1.1 Click the Tabbar to load the product

Follow the code in 2.2 Tabbar jump above

 typeSwitch(e) {
    this.setData({
      activeTypeId:e.currentTarget.dataset.id,
    })
    let that = this
    / / database
    wx.cloud.database().collection("shop-list").where({
      id:e.currentTarget.dataset.id
    }).get({
      success(res) {
        console.log("Request successful",res)
        that.setData({
          shopList:res.data
          // //shopList needs to be defined as shopList in data :[]})},fail(res) {
        console.log("Request failed",res)
      }
    })
  },
Copy the code

2.4.2 Release idle

addData() {
     wx.cloud.database().collection("shop-list").add({
      data: {
        id:id,
        title:title,
        addr:addr,
        des:des,
        price:price,
        tell:tell,
        cllection : 0.comment : 0.date : new Date(),
        pic : pic
      },
      success(res){
        console.log("Success",res)
      },
      fail(res){
        console.log("Failure",res)
      }
    })
    wx.switchTab({
      url: '.. /index/index'.// Note that switchTab can only jump to the TAB page, but not to the page without a TAB})},Copy the code

2.4.3 Search by entering

The search function is to jump to another page by clicking on the search box on the home page to query. In the design of the query function, the regular expression is adopted to match the result of the input content in the title and ADDR fields and the input box.

 const _ = db.command

 db.collection('shop-list').where(_.or([{
 // This is a query method with several fields
 }]))
Copy the code

If it is a single field:

 db.collection('shop-list').where({

 })
Copy the code

The specific code is as follows:

<view class="search">
  <input bindinput="searchinput"  value="{{input}}"placeholder="Campus Second-hand Trading Platform">
  </input>
  <! -- <image src=".. /.. /images/search.svg"></image> -->
  <button bindtap="suredetail" type="primary" size="mini">go</button>
</view>

Copy the code

searchinput:function(e){
    this.setData({
      input: e.detail.value
    })
  },
  suredetail() {
    let that = this
    let input = that.data.input;
    / / database
    const db = wx.cloud.database()
    const _ = db.command
    db.collection('shop-list').where(_.or([{
      title: db.RegExp({
        regexp: '*' + input + '*'.options: 'i',})}, {addr: db.RegExp({
        regexp: '*' + input + '*'.options: 'i',
      })
    },
  ])).limit(10).get({
      success: res= > {
        console.log(res)
        that.setData({
          shopList: res.data
        })
      }
    })
  },
Copy the code

3. Deficiencies exist

If you look at my first map, you can see that THERE are many features I haven’t written yet, such as bookmarking, commenting, generating qr codes, etc.

And most of my operations are directly in JS operation cloud database, in fact, this has great disadvantages, the following is a comparison I found on the Internet:

The difference between cloud function and small program side operation database

conclusion

Finally, put all the implemented pages

Home page:

Release:

Details:

Search:

Although the “small program actual combat” is not expected for the time being, but this is just a stage, the rest of the will spend time to manage, the function can be added to finish writing. Of course, we should try to use cloud functions instead of using small programs to operate the database.

If you’re new to small programs, give them a try: you might learn

Tabbar Loads database data
Search Indicates a multi-field query
Publish idle
The operation of small programs to operate cloud data

Put down my source jingda

Let’s go for it

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Small program + Cloud database to create campus Idle Shop1.0

preface

The original

The sites and resources used

1. Project construction

1.1 Project Prototype

1.2 Page brain diagram

1.3 Structure and Function

1.4 database

2, implementation,

2.1 componentization

2.2 tabbar jump

2.2.1 Basic Description

2.2.2 implementation

2.3 Obtaining the User ID

2.4 Cloud Database Operations

2.4.1 Loading idle items

2.4.1.1 Loading goods on the first screen

2.4.1.1 Click the Tabbar to load the product

2.4.2 Release idle

2.4.3 Search by entering

3. Deficiencies exist

conclusion

Small program + Cloud database to create campus Idle Shop1.0

preface

The original

The sites and resources used

1. Project construction

1.1 Project Prototype

1.2 Page brain diagram

1.3 Structure and Function

1.4 database

2, implementation,

2.1 componentization

2.2 tabbar jump

2.2.1 Basic Description

2.2.2 implementation

2.3 Obtaining the User ID

2.4 Cloud Database Operations

2.4.1 Loading idle items

2.4.1.1 Loading goods on the first screen

2.4.1.1 Click the Tabbar to load the product

2.4.2 Release idle

2.4.3 Search by entering

3. Deficiencies exist

conclusion

Related Posts

125 Tips for Improving Website usability

Hardcore user experience report of rare Earth Nuggets browser plugin

From principle to optimization, simple database indexing