創意來源於生活，之所以開發這個校園約拍小程序，是因為在攝影選修課上常聽老師抱怨外出寫生老找不到模特，許多大學生都想擁有一套專屬自己記憶的攝影作品，記錄下不會磨滅的美好回憶，可如何找到讓自己滿意的攝影師是他們的難題。悅拍屋是一個校園攝影o2o的約拍平台，提供全方位的約拍服務，同時提供一個自我展示，學習交流，互動娛樂的平台。接下來我將結合項目的講解給大家分享一些實用技術和對於雲開發的一些經驗，希望對正在學習小程序的你有幫助。
前言
在開發一個項目之前首先要進行技術選型從而降低產品開發的技術風險和提高開發效率，技術選型必須得緊緊圍繞着業務場景來選擇。
- 產品原型設計：墨刀
- UI組件庫
1.微信原生樣式庫WeUI,讓用戶使用感知更加統一
2.注重視覺交互體驗的ColorUI組件庫，在感知統一的基礎上視覺元素多樣化 - 前端
1.小程序原生語法以及API
2.Promise實現異步調用
3.ES6編寫頁面交互邏輯 - 后端
1.雲函數：無需自建服務器，在雲端運行的代碼，微信私有協議天然鑒權，開發者只需編寫自身業務邏輯代碼
2.雲數據庫：無需自建數據庫，一個既可在小程序前端操作，也能在雲函數中讀寫的JSON數據庫
3.雲存儲：實現小程序前端直接上傳/下載雲端文件，在雲開發控制台可視化管理
4.雲調用：由原生微信服務集成，基於雲函數免鑒權使用小程序開放接口的能力，包括服務端調用、獲取開放數據等能力 - 其他
1.使用微信提供的雲測試對未上線的小程序進行缺陷測試、性能數據分析、機型覆蓋測試，確保小程序上線后正常運營
2.使用基於雲開發的AI視覺能力-身份證識別實現實名認證，智能鑒黃結合人工完成發布信息的審核
3.開發工具:微信開發者工具、VScode
4.部分圖標使用自阿里巴巴矢量圖標庫
總體設計
功能結構圖
大家可以通過此圖了解整個項目的主要功能點
產品原型圖
此處給出一張主頁原型圖示例，墨刀還是挺好用的
色彩設計圖
悅拍屋的整體色調為淺藍色，各位小伙伴在開發自己項目的時候可以根據色彩標准搭配來設計項目所采用的色彩，合適的色彩搭配可以給用戶良好的視覺體驗
功能模塊詳解
接下來我會對部分功能模塊以圖文結合的形式詳細描述，將其中涉及的技術、知識分享給大家
約拍邀請
用戶可在首頁查看約拍需求，並點擊查看需求詳情，用戶在了解需求后，若自己符合條件即可提交約拍信息，等待發布者的回復，可將此需求收藏方便查看
技術分享：自定義頂部導航欄
官方默認的導航欄只能對背景顏色進行更改，對於想要在導航欄添加一些比較酷炫的效果則需要通過自定義導航欄實現
實現原理：通過設置app.json中頁面配置的navigationStyle(導航欄樣式)配置項的值為custom,即可實現自定義導航
"window":{
"navigationStyle":"custom"
}
本項目的部分頁面自定義導航欄實現使用了ColorUI的導航欄組件，在完成上一步屬性設置后再引入導航欄組件即可
"usingComponents":{
"cu-custom":"/colorui/components/cu-custom" //該路徑替換為自己項目內ColorUI組件所在位置
}
主頁自定義導航欄通過設置背景圖片加上GIF波浪效果
<view class='page__bd'>
<view class="bg-img padding-tb-xl" style="background-image:url('http://wx4.sinaimg.cn/mw690/006UdlVNgy1g2v2t1ih8jj31hc0p0qej.jpg');background-size:cover;">
<view class="cu-bar">
<view class="content text-bold text-white">
悅拍屋
</view>
</view>
</view>
<view class="shadow-blur">
<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx;margin-top:-100rpx;"></image>
</view>
</view>
效果圖
使用組件定義的導航欄
<cu-custom bgImage="https://s2.ax1x.com/2019/05/02/Etiyng.jpg" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">認證信息說明
</view>
</cu-custom>
效果圖
特別提醒1：使用自定義導航后，頁面的返回需要在自定義導航欄中自行設置
特別提醒2：導航欄組件需要自行引入ColorUI組件庫后才能使用，具體引入教程地址在附錄中給出
發布約拍
選擇發布約拍功能填寫約拍需求，提交審核通過后可在首頁實時查看發布結果
技術分享：入場動畫
額。。錄制可能略微有點卡頓，實際效果挺流暢的，各位大佬有什么好的錄制工具推薦可以在評論中回復
實現原理：通過toggleDelay的布爾值為真動態添加動畫類名，在生命周期函數onReady中控制toggleDelay的值從而控制整個動畫過程(原理與Vue的動態類名相似)
data:{
toggleDelay；false
},
onReady:function(){
let that = this
//toggleDelay的值為真，動畫開始
that.setData({
toggleDelay: true
})
//控制整個動畫的時長
setTimeout(function() {
that.setData({
toggleDelay: false
})
}, 2000)
}
<view class="padding-xs {{toggleDelay?'animation-slide-bottom':''}}" style="animation-delay: {{item.time}}s;" wx:for="{{list}}" wx:key="{{index}}">
<image class="img" id='img{{index}}' src="{{item.src}}" mode="widthFix" />
</view>
//所有動畫的定義
[class*=animation-] {
animation-duration: .5s;
animation-timing-function: ease-out;
animation-fill-mode: both
}
//animatioon-slide-bottom所定義的動畫
.animation-slide-bottom {
animation-name: slide-bottom
}
//動畫效果
@keyframes slide-bottom {
0% {
opacity: 0;
transform: translateY(100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
animation-slide-bottom是動畫類名，animation-delay是每一個卡片動畫執行的延遲時間，每一個動畫的執行時長為0.5s,所以延遲時間是以0.5s遞增的，三個卡片的動畫總時長就為2s,即2s后就執行onReady中的settimeout事件結束動畫
特別提醒：動畫的延遲時間，執行時間可以自行設計，動畫效果過渡自然即可
特別提醒：由於觸發動畫的鈎子函數定義在頁面初次渲染的生命周期函數中，故只有在頁面初次渲染時才執行，避免每次顯示頁面時加載動畫造成用戶的視覺疲勞
智能推薦約拍對象
系統會根據約拍需求自動推薦約拍對象(個人開發精力有限，推薦算法后續推出。。。)
技術分享：CSS3實現酷炫搜索動畫
在模態框內放置兩個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;
}
實名認證
嘿嘿，由於懶得給個人信息打碼，就暫時不給大家演示認證過程了。。
技術分享：Ai視覺能力
很多小伙伴都有過在自己項目中使用AI技術的想法，但又因為入門AI的難度比較大，並且需要的時間較長就放棄了，現在給大家安利一個可以直接使用的AI服務，讓AI不再具有神秘感(AI大佬可以忽略此部分。。)
- 方案一
在騰訊雲中搜索身份證識別，上面會有詳細的API文檔以及測試工具幫助你快速使用
點擊查看騰訊雲-身份證識別
- 方案二
方案一是以提供API接口的形式提供身份證識別服務，而接下來要介紹的方案真的就比較簡單了，在騰訊雲中搜索智能圖像,其中的增值服務AI智能圖像能力，你可以通過雲函數和雲存儲實現相應功能，基於小程序雲開發的 AI DEMO中開發好了部分功能，你只需通過教程將雲函數和組件引入你的項目即可使用
點擊查看騰訊雲-智能圖像
點擊查看基於小程序雲開發的 AI DEMO
特別提醒：當然使用這些服務也並非是完整的解決方案，對於身份證信息的加密、存儲方案、安全協議等還是需要各位小伙伴自行設計解決方案哦。
雲開發
雲開發為開發者提供完整的原生雲端支持和微信服務支持，弱化后端和運維概念，無需搭建服務器，使用平台提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者已經使用的雲服務相互兼容，並不互斥。
官方文檔中API被分為了小程序端和服務端，一開始看過兩端的API之后，感覺好像沒有什么不同啊，在查閱相關資料以及實際開發中某些業務的處理總結出一些經驗后才明白了兩者的不同，下面給各位具體說說兩者的不同之處，應該能幫助大家在使用雲開發實戰時少踩一點坑
初始化的不同
小程序端
全局聲明一次
if (!wx.cloud) {
console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
} else {
wx.cloud.init({
env:'xxx',
traceUser: true,
})
}
服務端
每個雲函數中聲明一次
const cloud = require('wx-server-sdk')
cloud.init()
權限不同
小程序端
在小程序端可以選擇直接操作數據庫，但由於是前端操作數據庫存在一些安全問題，有較多的權限限制，在雲控制中可對每個集合進行權限設置，這也就是為什么有小伙伴在小程序端對某些數據進行更新，顯示更新成功但並未更新數據，就是因為小程序端默認只能更新當前用戶寫入的數據
特別提醒：在小程序端使用創建者的權限對數據進行修改時一定要確保該集合中有_openid字段，否則系統在權限判斷時是沒有辦法識別當前操作為創建者的，數據修改無法執行
服務端
服務端擁有管理員的權限，對所有數據擁有讀寫權限
語法支持不同
小程序端
在微信開發者工具里，以及Android端手機（瀏覽器內核是QQ瀏覽器的X5），async/await是天然支持的，但 iOS 端手機在較低版本則不支持，因此需要引入額外的polyfill。可以在有使用async/await 的文件當中引入polyfill文件。
const runtime = require('相對路徑/lib/runtime')
服務端
在雲函數里，由於 Node 版本最低是 8.9，因此是天然支持 async/await 語法的
示例：獲取約拍需求列表
//雲函數入口文件
const cloud = require('wx-server-sdk')
//初始化
cloud.init()
//連接數據庫
const db = cloud.database()
async function getAll(){
const result = await db.collection('ypList')
.orderBy('cameraInfo.launchTime','desc').where({}).get()
return result
}
// 雲函數入口函數
exports.main = async (event, context) => {
//此處的action是用來判斷該調用哪一個方法
if(event.action === 'getAll'){
return getAll()
}
}
結語
一個人手擼個全棧項目確實很辛苦，但收獲也很多。至少對於小程序的實戰開發更為熟練了，對MVVM的思想的理解也更加深刻了。技術發展得很快，學習一項技術如果不深入其本質，那么技術是學不完的。深入學習就是個解決問題的過程，或是幫助別人解決問題，或是借助他人的力量解決問題。目前在正在學習Vue、React、TypeScript等技術，后續會推出相關技術的項目解析文章，希望對於同樣在學習的你有幫助。
特別說明：本項目已參加2019屆中國高校計算機-微信應用開發賽完，開源至github，感興趣的小伙伴可以看看
附錄
在此提供一些本項目涉及到的技術、工具等鏈接供大家學習使用
- 產品原型設計工具：墨刀
- 色彩搭配設計：配色網
- 在線作圖：ProcessOn
- UI樣式庫：WeUI
- UI樣式庫：ColorUI
- 圖標庫：Iconfont阿里巴巴矢量圖標庫
- 開發工具：微信開發者工具
- 開發者工具：Vscode
- 騰訊雲服務：身份證識別
- 騰訊雲服務：智能圖像
- API文檔：微信官方文檔.小程序
- 技術文檔：ES6
源碼鏈接
https://github.com/TencentCloudBase/Good-practice-tutorial-recommended
雲開發（CloudBase）是一款雲端一體化的產品方案 ，采用 serverless 架構，免環境搭建等運維事務 ，支持一雲多端，助力快速構建小程序、Web應用、移動應用。
技術文檔：https://www.cloudbase.net/
如果你有關於使用雲開發CloudBase相關的技術故事/技術實戰經驗想要跟大家分享，歡迎留言聯系我們哦~比心！
