摘要：接下來我將結(jié)合項(xiàng)目的講解給大家分享一些實(shí)用技術(shù)和對于云開發(fā)的一些經(jīng)驗(yàn)，希望對正在學(xué)習(xí)小程序的你有幫助。

創(chuàng)意來源于生活，之所以開發(fā)這個(gè)校園約拍小程序，是因?yàn)樵跀z影選修課上常聽老師抱怨外出寫生老找不到模特，許多大學(xué)生都想擁有一套專屬自己記憶的攝影作品，記錄下不會(huì)磨滅的美好回憶，可如何找到讓自己滿意的攝影師是他們的難題。悅拍屋是一個(gè)校園攝影o2o的約拍平臺，提供全方位的約拍服務(wù)，同時(shí)提供一個(gè)自我展示，學(xué)習(xí)交流，互動(dòng)娛樂的平臺。接下來我將結(jié)合項(xiàng)目的講解給大家分享一些實(shí)用技術(shù)和對于云開發(fā)的一些經(jīng)驗(yàn)，希望對正在學(xué)習(xí)小程序的你有幫助。

在開發(fā)一個(gè)項(xiàng)目之前首先要進(jìn)行技術(shù)選型從而降低產(chǎn)品開發(fā)的技術(shù)風(fēng)險(xiǎn)和提高開發(fā)效率，技術(shù)選型必須得緊緊圍繞著業(yè)務(wù)場景來選擇。

產(chǎn)品原型設(shè)計(jì)：墨刀

UI組件庫
1.微信原生樣式庫WeUI,讓用戶使用感知更加統(tǒng)一
2.注重視覺交互體驗(yàn)的ColorUI組件庫，在感知統(tǒng)一的基礎(chǔ)上視覺元素多樣化

前端
1.小程序原生語法以及API
2.Promise實(shí)現(xiàn)異步調(diào)用
3.ES6編寫頁面交互邏輯

后端
1.云函數(shù)：無需自建服務(wù)器，在云端運(yùn)行的代碼，微信私有協(xié)議天然鑒權(quán)，開發(fā)者只需編寫自身業(yè)務(wù)邏輯代碼
2.云數(shù)據(jù)庫：無需自建數(shù)據(jù)庫，一個(gè)既可在小程序前端操作，也能在云函數(shù)中讀寫的 JSON 數(shù)據(jù)庫
3.云存儲：實(shí)現(xiàn)小程序前端直接上傳/下載云端文件，在云開發(fā)控制臺可視化管理
4.云調(diào)用：由原生微信服務(wù)集成，基于云函數(shù)免鑒權(quán)使用小程序開放接口的能力，包括服務(wù)端調(diào)用、獲取開放數(shù)據(jù)等能力

其他
1.使用微信提供的云測試對未上線的小程序進(jìn)行缺陷測試、性能數(shù)據(jù)分析、機(jī)型覆蓋測試，確保小程序上線后正常運(yùn)營
2.使用基于云開發(fā)的AI視覺能力-身份證識別實(shí)現(xiàn)實(shí)名認(rèn)證，智能鑒黃結(jié)合人工完成發(fā)布信息的審核
3.開發(fā)工具:微信開發(fā)者工具、VScode
4.部分圖標(biāo)使用自阿里巴巴矢量圖標(biāo)庫

大家可以通過此圖了解整個(gè)項(xiàng)目的主要功能點(diǎn)

此處給出一張主頁原型圖示例，墨刀還是挺好用的

悅拍屋的整體色調(diào)為淺藍(lán)色，各位小伙伴在開發(fā)自己項(xiàng)目的時(shí)候可以根據(jù)色彩標(biāo)準(zhǔn)搭配來設(shè)計(jì)項(xiàng)目所采用的色彩，合適的色彩搭配可以給用戶良好的視覺體驗(yàn)

接下來我會(huì)對部分功能模塊以圖文結(jié)合的形式詳細(xì)描述，將其中涉及的技術(shù)、知識分享給大家

用戶可在首頁查看約拍需求，并點(diǎn)擊查看需求詳情，用戶在了解需求后，若自己符合條件即可提交約拍信息，等待發(fā)布者的回復(fù)，可將此需求收藏方便查看

官方默認(rèn)的導(dǎo)航欄只能對背景顏色進(jìn)行更改，對于想要在導(dǎo)航欄添加一些比較酷炫的效果則需要通過自定義導(dǎo)航欄實(shí)現(xiàn)

實(shí)現(xiàn)原理：通過設(shè)置app.json中頁面配置的navigationStyle(導(dǎo)航欄樣式)配置項(xiàng)的值為custom,即可實(shí)現(xiàn)自定義導(dǎo)航

"window":{
    "navigationStyle":"custom"
}

本項(xiàng)目的部分頁面自定義導(dǎo)航欄實(shí)現(xiàn)使用了ColorUI的導(dǎo)航欄組件，在完成上一步屬性設(shè)置后再引入導(dǎo)航欄組件即可

"usingComponents":{
    "cu-custom":"/colorui/components/cu-custom"  //該路徑替換為自己項(xiàng)目內(nèi)ColorUI組件所在位置
}

主頁自定義導(dǎo)航欄通過設(shè)置背景圖片加上GIF波浪效果

  
    
      
        
          悅拍屋
        
      
    
    
      
    
  

效果圖

使用組件定義的導(dǎo)航欄

  返回
  認(rèn)證信息說明
  

效果圖

特別提醒1：使用自定義導(dǎo)航后，頁面的返回需要在自定義導(dǎo)航欄中自行設(shè)置

特別提醒2：導(dǎo)航欄組件需要自行引入ColorUI組件庫后才能使用，具體引入教程地址在附錄中給出

選擇發(fā)布約拍功能填寫約拍需求，提交審核通過后可在首頁實(shí)時(shí)查看發(fā)布結(jié)果

額。。錄制可能略微有點(diǎn)卡頓，實(shí)際效果挺流暢的，各位大佬有什么好的錄制工具推薦可以在評論中回復(fù)

實(shí)現(xiàn)原理：通過toggleDelay的布爾值為真動(dòng)態(tài)添加動(dòng)畫類名，在生命周期函數(shù)onReady中控制toggleDelay的值從而控制整個(gè)動(dòng)畫過程(原理與Vue的動(dòng)態(tài)類名相似)

data:{
    toggleDelay；false
},
onReady:function(){
    let that = this
    //toggleDelay的值為真，動(dòng)畫開始
    that.setData({
      toggleDelay: true
    })
    //控制整個(gè)動(dòng)畫的時(shí)長
    setTimeout(function() {
      that.setData({
        toggleDelay: false
      })
    }, 2000)
}

//所有動(dòng)畫的定義
[class*=animation-] {
    animation-duration: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both
}
//animatioon-slide-bottom所定義的動(dòng)畫
.animation-slide-bottom {
    animation-name: slide-bottom
}
//動(dòng)畫效果
@keyframes slide-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

animation-slide-bottom是動(dòng)畫類名，animation-delay是每一個(gè)卡片動(dòng)畫執(zhí)行的延遲時(shí)間，每一個(gè)動(dòng)畫的執(zhí)行時(shí)長為0.5s,所以延遲時(shí)間是以0.5s遞增的，三個(gè)卡片的動(dòng)畫總時(shí)長就為2s,即2s后就執(zhí)行onReady中的settimeout事件結(jié)束動(dòng)畫

特別提醒：動(dòng)畫的延遲時(shí)間，執(zhí)行時(shí)間可以自行設(shè)計(jì)，動(dòng)畫效果過渡自然即可

特別提醒：由于觸發(fā)動(dòng)畫的鉤子函數(shù)定義在頁面初次渲染的生命周期函數(shù)中，故只有在頁面初次渲染時(shí)才執(zhí)行，避免每次顯示頁面時(shí)加載動(dòng)畫造成用戶的視覺疲勞

系統(tǒng)會(huì)根據(jù)約拍需求自動(dòng)推薦約拍對象(個(gè)人開發(fā)精力有限，推薦算法后續(xù)推出。。。)

在模態(tài)框內(nèi)放置兩個(gè)view標(biāo)簽，以下是標(biāo)簽定義

                //外圍的圓形框定義
           //內(nèi)部的線條定義

#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 {       //通過偽類元素定義最內(nèi)部線條
  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;
}

嘿嘿，由于懶得給個(gè)人信息打碼，就暫時(shí)不給大家演示認(rèn)證過程了。。

很多小伙伴都有過在自己項(xiàng)目中使用AI技術(shù)的想法，但又因?yàn)槿腴TAI的難度比較大，并且需要的時(shí)間較長就放棄了，現(xiàn)在給大家安利一個(gè)可以直接使用的AI服務(wù)，讓AI不再具有神秘感(AI大佬可以忽略此部分。。)

方案一

在騰訊云中搜索身份證識別，上面會(huì)有詳細(xì)的API文檔以及測試工具幫助你快速使用

點(diǎn)擊查看騰訊云-身份證識別

方案二

方案一是以提供API接口的形式提供身份證識別服務(wù)，而接下來要介紹的方案真的就比較簡單了，在騰訊云中搜索智能圖像,其中的增值服務(wù)AI智能圖像能力，你可以通過云函數(shù)和云存儲實(shí)現(xiàn)相應(yīng)功能，基于小程序云開發(fā)的 AI DEMO中開發(fā)好了部分功能，你只需通過教程將云函數(shù)和組件引入你的項(xiàng)目即可使用

點(diǎn)擊查看騰訊云-智能圖像
點(diǎn)擊查看基于小程序云開發(fā)的 AI DEMO

特別提醒：當(dāng)然使用這些服務(wù)也并非是完整的解決方案，對于身份證信息的加密、存儲方案、安全協(xié)議等還是需要各位小伙伴自行設(shè)計(jì)解決方案哦。

云開發(fā)為開發(fā)者提供完整的原生云端支持和微信服務(wù)支持，弱化后端和運(yùn)維概念，無需搭建服務(wù)器，使用平臺提供的 API 進(jìn)行核心業(yè)務(wù)開發(fā)，即可實(shí)現(xiàn)快速上線和迭代，同時(shí)這一能力，同開發(fā)者已經(jīng)使用的云服務(wù)相互兼容，并不互斥。

官方文檔中API被分為了小程序端和服務(wù)端，一開始看過兩端的API之后，感覺好像沒有什么不同啊，在查閱相關(guān)資料以及實(shí)際開發(fā)中某些業(yè)務(wù)的處理總結(jié)出一些經(jīng)驗(yàn)后才明白了兩者的不同，下面給各位具體說說兩者的不同之處，應(yīng)該能幫助大家在使用云開發(fā)實(shí)戰(zhàn)時(shí)少踩一點(diǎn)坑

全局聲明一次

if (!wx.cloud) {
      console.error("請使用 2.2.3 或以上的基礎(chǔ)庫以使用云能力")
    } else {
      wx.cloud.init({
        env:"xxx",
        traceUser: true,
      })
    }

每個(gè)云函數(shù)中聲明一次

const cloud = require("wx-server-sdk")
cloud.init()

在小程序端可以選擇直接操作數(shù)據(jù)庫，但由于是前端操作數(shù)據(jù)庫存在一些安全問題，有較多的權(quán)限限制，在云控制中可對每個(gè)集合進(jìn)行權(quán)限設(shè)置，這也就是為什么有小伙伴在小程序端對某些數(shù)據(jù)進(jìn)行更新，顯示更新成功但并未更新數(shù)據(jù)，就是因?yàn)樾〕绦蚨四J(rèn)只能更新當(dāng)前用戶寫入的數(shù)據(jù)

特別提醒：在小程序端使用創(chuàng)建者的權(quán)限對數(shù)據(jù)進(jìn)行修改時(shí)一定要確保該集合中有_openid字段，否則系統(tǒng)在權(quán)限判斷時(shí)是沒有辦法識別當(dāng)前操作為創(chuàng)建者的，數(shù)據(jù)修改無法執(zhí)行

服務(wù)端擁有管理員的權(quán)限，對所有數(shù)據(jù)擁有讀寫權(quán)限

在微信開發(fā)者工具里，以及Android端手機(jī)（瀏覽器內(nèi)核是QQ瀏覽器的X5），async/await是天然支持的，但 iOS 端手機(jī)在較低版本則不支持，因此需要引入額外的polyfill?？梢栽谟惺褂?b>async/await 的文件當(dāng)中引入polyfill文件。

const runtime = require("相對路徑/lib/runtime")

在云函數(shù)里，由于 Node 版本最低是 8.9，因此是天然支持 async/await 語法的
示例：獲取約拍需求列表

//云函數(shù)入口文件
const cloud = require("wx-server-sdk")
//初始化
cloud.init()
//連接數(shù)據(jù)庫
const db = cloud.database()
async function getAll(){
    const result = await db.collection("ypList")
    .orderBy("cameraInfo.launchTime","desc").where({}).get()
    return result
}
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
    //此處的action是用來判斷該調(diào)用哪一個(gè)方法
    if(event.action === "getAll"){
        return getAll()
    }
}

一個(gè)人手?jǐn)]個(gè)全棧項(xiàng)目確實(shí)很辛苦，但收獲也很多。至少對于小程序的實(shí)戰(zhàn)開發(fā)更為熟練了，對MVVM的思想的理解也更加深刻了。技術(shù)發(fā)展得很快，學(xué)習(xí)一項(xiàng)技術(shù)如果不深入其本質(zhì)，那么技術(shù)是學(xué)不完的。深入學(xué)習(xí)就是個(gè)解決問題的過程，或是幫助別人解決問題，或是借助他人的力量解決問題。目前在正在學(xué)習(xí)Vue、React、TypeScript等技術(shù)，后續(xù)會(huì)推出相關(guān)技術(shù)的項(xiàng)目解析文章，希望對于同樣在學(xué)習(xí)的你有幫助。

特別說明：本項(xiàng)目已參加2019屆中國高校計(jì)算機(jī)-微信應(yīng)用開發(fā)賽完，開源至github，感興趣的小伙伴可以看看

在此提供一些本項(xiàng)目涉及到的技術(shù)、工具等鏈接供大家學(xué)習(xí)使用

產(chǎn)品原型設(shè)計(jì)工具：墨刀

色彩搭配設(shè)計(jì)：配色網(wǎng)

在線作圖：ProcessOn

UI樣式庫：WeUI

UI樣式庫：ColorUI

圖標(biāo)庫：Iconfont阿里巴巴矢量圖標(biāo)庫

開發(fā)工具：微信開發(fā)者工具

開發(fā)者工具：Vscode

騰訊云服務(wù)：身份證識別

騰訊云服務(wù)：智能圖像

API文檔：微信官方文檔.小程序

技術(shù)文檔：ES6

https://github.com/TencentClo...

如果你有關(guān)于使用云開發(fā)CloudBase相關(guān)的技術(shù)故事/技術(shù)實(shí)戰(zhàn)經(jīng)驗(yàn)想要跟大家分享，歡迎留言聯(lián)系我們哦~比心！