創意來源於生活，之所以開發這個校園約拍小程式，是因為在攝影選修課上常聽老師抱怨外出寫生老找不到模特，許多大學生都想擁有一套專屬自己記憶的攝影作品，記錄下不會磨滅的美好回憶，可如何找到讓自己滿意的攝影師是他們的難題。悅拍屋是一個校園攝影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相關的技術故事/技術實戰經驗想要跟大家分享，歡迎留言聯絡我們哦~比心！

相關推薦