简约约拍小程序-寻找你的专属摄影师的拍照小程序

前言：
约拍小程序，基于OTO商业模式，“线上到线下”，用户线上可随时随地约拍符合自己风格的摄影师、摄影师提供线下的约拍服务。为消费者和热爱拍摄的摄影师构建一个联通的平台。
技术栈：

使用原生微信小程序开发wxml+wxss+js+colorUI样式库，后端及数据库使用小程序云开发
开发团队介绍：

云开发挑战赛自习社队伍，开发成员：林志煌（主要开发），刘翠娟（程序设计） 联系微信：18316996303
小程序实现功能：
- 作品：作品发布作品展示作品点赞
- 动态：发布动态动态点赞动态评论
- 约拍信息：发布约拍约拍展示约拍收藏约拍下单
- 订单：订单详情展示订单完成订单评价下单后占用摄影师单日约拍时间
- 用户：关注切换关注模式查看关注用户查看用户信息用户实时聊天
- 约拍收藏功能
- 关键词匹配搜索功能
- 消息实时通知功能

基本功能实现方式

数据的添加：
使用小程序云开发apidb.collection().add()方法
数据的更新：
使用小程序云开发apidb.collection().update()方法
数据的删除：
使用小程序云开发apidb.collection().removee()方法
数据的读取：
在实际数据读取中大量的使用了联表查询，联表查询使用的是云开发聚合函数lookup()方法例如以下云函数

云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({env:'quick-note-90l6m'})
const db = cloud.database()
const _ = db.command
const $ = db.command.aggregate
// 云函数入口函数
    exports.main = async (event, context) => {
    try {
        var limit = 20
        return await 
     db.collection(event.collection)
    .aggregate()
    .sort({_id:-1}) 
    .lookup(event.lookup)
    .lookup(event.lookup2)
    .match(event.match)
    .skip(event.skip*limit)
    .limit(limit)
    .project(event.project)
    .end()
  } catch (e) {
    console.error(e)
  }
}

图片文件的上传：

调用云开发 wx.cloud.uploadFileapi上传图片，多张图片使用递归上传，文件名称避免重复使用时间戳+后缀命名。如下例子：

upload(){
   wx.showLoading({
     title: '发布中',
   })
   var timestamp=new Date().getTime()
     wx.cloud.uploadFile({
       cloudPath:'works/'+timestamp+this.data.img_list[this.data.upload_num].match(/\.[^.]+?$/)[0],
       filePath:this.data.img_list[this.data.upload_num]
     }).then(result=>{
       this.data.upload_num++
       if(this.data.upload_num !== this.data.img_list.length){
         this.data.upload_img.push(result.fileID)
         this.upload()
       }
       else {
         //dosomething
                   }
               })
             },
           })
         })
       }
   })
 },

大量数据的获取的和页面的渲染逻辑：
由于小程序性能限制，因此从数据库读取数据时使用.skip(event.skip*limit) .limit(limit) .project(event.project)三种聚合函数使数据分页并且只获取指定字段，每次数据库只读取页面的渲染逻辑是一个滚动窗口，每次只读取20条数据并渲染，当用户拖动到滚动窗口的底部时增加skip获取下一页的数据
实时聊天功能：
使用云开发Collection.watch(options: Object): Objectapi,监听数据库的数据变化并实时渲染，如下例

onwatch(){
    // 监听数据库聊天数据,实时更新
    const watcher = db.collection('talk')
    .orderBy('_id', 'desc')
    .limit(1)
    .where(_.and([
      {
        receiver:_.or(this.data.receiver._openid,getApp().globalData.user._openid)
      },
      {
        _openid:_.or(this.data.receiver._openid,getApp().globalData.user._openid)
      }
    ])
    )
    .watch({
      onChange: snapshot=> {
        ++this.data.count
        if(this.data.count === 0 ){
          return
        }
        var temp = this.data.text_array
        if(snapshot.docs.length){
          if(snapshot.docs[0].receiver == getApp().globalData.user._openid){
            snapshot.docs[0].user = 'other'
          }
          else if(snapshot.docs[0].receiver == this.data.receiver._openid){
            snapshot.docs[0].user = 'me'
          }
          else{
            return
          }
        temp.push(snapshot.docs[0])
        this.setData({text_array:temp})
        this.setData({last_view:'last_view'})
        }
      },
      onError: err=> {
        console.error('the watch closed because of error', err)
      }
    }) 
  },

登陆功能
使用云开发鉴权获取用户_openid

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env:'quick-note-90l6m'
})
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return event.userInfo
}

搜索功能
使用云开发聚合函数中的正则匹配title:db.RegExp({ regexp: this.data.search_text, options: 'i', })

设计风格

小程序的整体风格是偏向简约，开发过程中使用colorUI样式库，这对我们的开发效率有很大的帮助主色系使用淡紫色#A58AA9，大部分图标使用colorUI提供的图标库

补充

目前小程序开发时间较为短，缺乏足够的测试，还有部分功能正在开发中，在后期我们将会使约拍小程序功能更加完善！

idiotzhe / bigyellow Goto Github PK

bigyellow's Introduction

简约约拍小程序-寻找你的专属摄影师的拍照小程序

前言：

技术栈：

开发团队介绍：

小程序实现功能：

基本功能实现方式

数据的添加：

数据的更新：

数据的删除：

数据的读取：

图片文件的上传：

大量数据的获取的和页面的渲染逻辑：

实时聊天功能：

登陆功能

搜索功能

设计风格

补充

bigyellow's People

Contributors

Recommend Projects

Recommend Topics

Recommend Org