【小程序】基於雲開發的微信校園約拍平臺《壹瞬》

壹瞬約拍

前言

調查與發現

• 多數大學生用微博/朋友圈約拍
• 約拍爲兼職攝影師主要收入來源之一
• 同類型產品較少
• 大部分同類型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";
}

實機演示（部分截圖）

• 核心功能：約拍信息的發佈、查看、匹配等等
  
• 社交基本功能
  
• 個人中心管理
  

項目總結

• 本項目爲小程序入門練手用途，代碼部分僅供參考；
• 大致思路已經形成，但諸多功能仍未完善，由於後期開發難度較大（畫餅太大），目前處於beta擱置階段；
• 希望這篇文章能給剛入坑的同學一些幫助！如果能給想做校園約拍平臺的同行一點新的思路更是再好不過了！