壹瞬约拍

前言

调查与发现

多数大学生用微博/朋友圈约拍
约拍为兼职摄影师主要收入来源之一
同类型产品较少
大部分同类型App定位模糊
缺少合适的摄影师认证门槛
成人内容擦边球

一些问题

产品定位：先例较少
主打方向：朋友圈 or 闲鱼？社交工具 or 类购物平台？
运作模式：线上线下情况多且复杂
用户群体：仅大学生 or 允许商业工作室介入
约拍方式：自行搜索 or 智能推荐
运营与保障：参考滴滴/Uber等网约平台

一些再创造（理想化）

三重门槛：实名认证、在校认证、摄影水平审核
社交模块：点赞、关注、私信、转发功能
微交易模块：线上支付订金、线下自行协商
信息拓展：支持上传个人作品集
用户检索：引入风格标签、同城标签
模仿豆瓣：可创建小组/发布线上线下活动

项目流程

参考文档

主程序参考：腾讯云实战教程 & 微信小程序官方文档
UI样式库参考：WeUI文档 & 阿里巴巴图标库

开发工具

原型设计：墨刀
程序模板：Github
UI样式库：WeUI
UI样式库：ColorUI
图标库：阿里图标库
开发工具：微信开发者工具
API文档：小程序官方文档
参考教程：Github/B站/CSDN

UI设计

后台管理

未进行任何优化

核心技术（引例）

云函数：登录捕获

const cloud = require('wx-server-sdk')
// 初始化 cloud
cloud.init()
const db = cloud.database()
/**
 * 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
 * 
 * event 参数包含小程序端调用传入的 data
 * 
 */
exports.main = async(event, context) => {
  let openId = event.userInfo.openId
  const result = await db.collection("userList").where({
    openId: openId
  }).get();
  if (result.data.length > 0) {
    return await db.collection("userList").doc(result.data._id).update({
      data: {
        avatarUrl: event.avatarUrl,
        nickName: event.nickName,
        gender: event.gender
      }
    })
  } else {
    return await db.collection("userList").add({
      data: {
        avatarUrl: event.avatarUrl,
        nickName: event.nickName,
        gender: event.gender,
        openId: openId,
        isAuth: false,
        createTime: new Date()
      }
    })
  }
}

CSS3：搜索动画

本技术借鉴自云开发CloudBase大神博客
思路：在模态框内放置两个view标签

 <view id='preloader'>              //外围的圆形框定义
    <view id='loader'></view>       //内部的线条定义
</view>

#preloader {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid #97b2ff;
}
#loader {         //中间线条定义
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #97b2ff;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
#loader:before {          //通过伪类元素定义外围线条
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #97b2ff;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}
#loader:after {       //通过伪类元素定义最内部线条
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #97b2ff;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

底层代码（引例）

userCenter.js（个人中心页面）

// pages/userCenter/userCenter.js
const app = getApp();
var that;
const db = wx.cloud.database();
Page({
  data: {
    isShow: false,
    // 显示加载更多 loading
    hothidden: true,
    userInfo: {},
    // loading
    hidden: true,
    iconList: [{
      icon: 'camerafill',
      color: 'purple',
      badge: 0,
      name: '我的约拍',
      url: '/pages/userCenter/myLaunch/myLaunch'
    }, {
      icon: 'home',
      color: 'blue',
      badge: 0,
      name: '个人主页',
      url: '/pages/userCenter/personal/personal'
    }, {
      icon: 'writefill',
      color: 'yellow',
      badge: 0,
      name: '编辑资料',
      url: '/pages/userCenter/editDetail/editDetail'
    }, {
      icon: 'share',
      color: 'olive',
      badge: 0,
      name: '分享名片',
        url: '/pages/userCenter/shareCard/shareCard'
    }, {
      icon: 'likefill',
      color: 'red',
      badge: 0,
      name: '我的收藏',
      url: '/pages/userCenter/collect/collect'
    }, {
      icon: 'edit',
      color: 'blue',
      badge: 0,
      name: '建议反馈',
      url: '/pages/userCenter/advice/advice'
    }],
    gridCol: 3,
    skin: false
  },
  //......
  })

userCenter.wxss（个人中心页面）

/* pages/userCenter/userCenter.wxss */
 .page__bd{
   padding-bottom: 0;
 }
.weui-media-box__thumb{
 border: 1px solid beige;
  border-radius: 50%;
}
.page {
  /* height: 100Vh;
  width: 100vw; */
}

.page.show {
  overflow: hidden;
}

.switch-sex::after {
  content: "\e716";
}

.switch-sex::before {
  content: "\e7a9";
}

.switch-music::after {
  content: "\e66a";
}

.switch-music::before {
  content: "\e6db";
}