阅读 1594

小程序 + 云数据库打造【校园闲置shop1.0】

在这里插入图片描述

前言

初衷

每个项目都应该有实现它的目的和需求,据我所知,我们学校的二手闲置群已经开到了五群,每年毕业的时候,在学校各大路上也会有学长学姐们摆摊卖闲置的场景。当然网上也可以出售闲置,不过,如果发布闲置的人可以直接在本校选择卖出,那么将可以直接货到付款,不必担心闲置如果质量有问题怎么办,因为你自己可以当场验货。

当然,如上面说到的,如果不需要通过网上交易,也不需要发货之类的东西,功能实现明显会少很多。

下面有我的导图,是我想要完成的功能,但就我的能力我并没有完成全部的功能(后面会列出来),尽管完成的并没有想象的那么好,但就当自己总结一下,这个小程序做到这里,我学到的东西。当然,在之后我也会尽量把整个项目写一下。

所用到的网站和资源

1、项目构建

1.1项目原型

在这里插入图片描述

在这里插入图片描述

1.2页面脑图

在这里插入图片描述

1.3结构功能

一共有三个底部导航,分别是

  • 首页:index

    -- 轮播图

    -- 搜索框 (跳转到搜索显示页面)

    -- tabbar (点击更新下面商品列表显示)

    -- 商品显示

  • 发布:publish

  • 我的:mine

    -- 头像 微信名

    -- 设置

    -- 生成小程序

    -- 我的发布

在这里插入图片描述

1.4 数据库

  • shop-list

管理发布的闲置商品

在这里插入图片描述

  • sho-users

管理登录的用户

在这里插入图片描述

2、实现

2.1 组件化

在项目中使用了小程序的组件化,将首页的轮播图,和搜索框作为组件写在了compenents文件目录下:

在这里插入图片描述

先在index.json引入:

 "usingComponents": {
    "index-swiper":"/components/swiper/swiper",
    "my-search":"/components/search/search",
 }
复制代码

index.html中使用组件:

<!-- 组件化swiper -->
<view class="swiper-container">
    <index-swiper imgUrls="{{imgUrls}}"></index-swiper>
  </view>
<!-- 组件化search -->
<my-search></my-search>
复制代码

这里要注意的是,swiper里面的数据是由index来确定的,因此在swiper.js里面,我们要将imgUrls,设定为

 properties: {
    imgUrls:Object
  },
复制代码

那么在index.js里面就可以设置imgUrls Page下

imgUrls:[
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3205342688,4225907114&fm=26&gp=0.jpg',
      'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4048818314,2316053512&fm=26&gp=0.jpg'
    ],
复制代码

2.2 tabbar 跳转

在这里插入图片描述

2.2.1 基本描述

在最先加载页面的时候,首屏加载的时候,加载的所有shop-list的数据,此时的tabbar没有使用

在这里插入图片描述

当点击tabbar的任何一项,页面会加载相应类别的商品

在这里插入图片描述

2.2.2 实现

index.wxml-tabbar部分

<!-- 列表分类展示 -->
<view class="type-container">
   <!-- 循环输出tabbar导航内容 -->
    <view class="type-item" wx:for="{{typeCat}}" wx:key="{{index}}">
    <!-- 设置被点击的导航项的样式  同时点击时触发typeSwitch事件 -->
      <view data-id="{{item.id}}" class="type-name {{activeTypeId === item.id ? 'type-item-on' : ''}}"
      bindtap="typeSwitch" 
      >
        {{item.name}}
      </view>
    </view>
</view>
复制代码

index.js-tabbar部分

data:{
activeTypeId:'01',
    type: '',
    // 类型的数据配置
    typeCat: [{
      id:'0',name:'电子产品',
    },
    {
      id:'1',name:'生活用品',
    },
    {
      id:'2',name:'小吃零食',
    },
    {
      id:'3',name:'书籍资料',
    }]
}


typeSwitch(e) {
    this.setData({
      activeTypeId:e.currentTarget.dataset.id,
    })
// 从数据库中请求数据
}
复制代码

index.wxss--tabbar部分

.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);
}
复制代码

2.3 获取用户id

通过云函数获取用户openid

在这里插入图片描述

index.js:(默认)

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}
复制代码

在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)
      }
    })
 }
复制代码

可以得到openid

在这里插入图片描述

2.4 云数据库操作

2.4.1 加载闲置商品

2.4.1.1 首屏加载商品

wx.cloud.database().collection("shop-list").get({
      success(res) {
        console.log("请求成功",res)
        that.setData({
          shopList:res.data
          //shopList 需要在data里面先定义为 shopList:[]
        })
      },
      fail(res) {
        console.log("请求失败",res)
      }
    })
复制代码

2.4.1.1 点击tabbar加载商品

接上面2.2 tabbar跳转的代码

 typeSwitch(e) {
    this.setData({
      activeTypeId:e.currentTarget.dataset.id,
    })
    let that = this
    // 数据库
    wx.cloud.database().collection("shop-list").where({
      id:e.currentTarget.dataset.id
    }).get({
      success(res) {
        console.log("请求成功",res)
        that.setData({
          shopList:res.data
          //  //shopList 需要在data里面先定义为 shopList:[]
        })
      },
      fail(res) {
        console.log("请求失败",res)
      }
    })
  },
复制代码

2.4.2 发布闲置

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("成功",res)
      },
      fail(res){
        console.log("失败",res)
      }
    })
    wx.switchTab({
      url: '../index/index',  //注意switchTab只能跳转到tab页面,不能跳转到不带tab的页面
    })
  },
复制代码

2.4.3 按输入搜索

搜索这个功能是通过点击首页的搜索框跳转到另一个页面,进行查询。 在查询功能的设计上,采用了正则表达的方式,匹配title,addr字段中,符合输入框输入内容的结果。

 const _ = db.command

 db.collection('shop-list').where(_.or([{
 //这个是有几个字段查询的方法
 }]))
复制代码

如果只是单字段:

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

 })
复制代码

具体的代码如下:

<view class="search">
  <input bindinput="searchinput"  value="{{input}}"placeholder="校园二手交易平台">
  </input>
  <!-- <image  src="../../images/search.svg"></image>  -->
  <button bindtap="suredetail" type="primary" size="mini">go</button>
</view>

复制代码
searchinput:function(e){
    this.setData({
      input: e.detail.value
    })
  },
  suredetail() {
    let that = this
    let input = that.data.input;
    // 数据库
    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
        })
      }
    })
  },
复制代码

3、存在不足

再看我最先的导图,可以看到很多功能我都还没有写,比如收藏,评论,生成二维码等等。

而且我大部分的操作都是直接在js中操作云数据库,其实这样有很大的弊端,下面是我在网上找的一张对比图:

云函数和小程序端操作数据库的区别

在这里插入图片描述

总结

最后放一下所有实现的页面

  • 首页:

在这里插入图片描述

  • 发布:

在这里插入图片描述

  • 我的:

在这里插入图片描述

  • 详情:

在这里插入图片描述

  • 搜索:

在这里插入图片描述

虽然本次的“小程序实战”暂时并没有期待的样子,但是这只是一个阶段,剩下的还会花时间去理一下,把可以加的功能写完。当然还是要去尝试把现在通过小程序去操作数据库,改成用云函数去操作。

如果你是刚学习小程序,不如也尝试一下:你或许可以学到

  • tabbar 跳转加载数据库数据
  • search 多字段查询
  • publish 发布闲置
  • 小程序操作云数据的操作

放下我的源码 jingda

一起加油吧

在这里插入图片描述

文章分类
阅读
文章标签