注册    登录
今天看啥  ›  专栏  ›  jingda

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

jingda  · 掘金  ·  · 2021-01-24 20:08
阅读 198

小程序 + 云数据库打造【校园闲置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

一起加油吧

在这里插入图片描述




原文地址：访问原文地址
快照地址： 访问文章快照
推荐文章
芋道源码  ·  离谱！CPU狂飙900%，这怎么处理？
2 小时前
芋道源码  ·  14.2k star，一款开源的爬虫项目，支持小红书、抖音、微博等主流内容平台
2 天前
芋道源码  ·  真心建议大家冲冲这个新兴领域，应届生年薪都炒到了61.8w+！
2 天前
发现新西兰  ·  7月1号起，新西兰有这些重大变化！
5 天前
芋道源码  ·  @Transactional 中使用线程锁导致了锁失效，震惊我一整年！
3 天前
金融监管研究院  ·  城投数据资产融资及大宗产业化转型综合研修班！
1 周前
BioMed科技  ·  福建师范大学翁云翔/刘海清团队《AHM》：基于长脂肪族侧基的儿茶酚衍生物制备可按需去除的强韧湿湿态组织粘附水凝胶
11 月前
直通硅谷  ·  【每日面经】Amazon Onsite&amp;OA、Facebook最新面经速递！
3 年前
面相与命运  ·  购一次物鼻腔耳朵都瓦特了。谁家的购物车这么恐怖？植脂末面包巧克力-20191003192126
4 年前
华尔街俱乐部  ·  24年来最大改革！港交所将允许“创新型”公司采取双重股权结构
6 年前
关于   移动版   ·   Py中国   ·   RSS之家   ·   codingpro   ·   Code   ·   link之家   ·   卧龙AI搜索   ·   藏经阁   ·   小百科
今天看啥 - 微信公众号rss订阅, 微信rss, 稳定的RSS源
© 2024 ~ 沪ICP备11025650号