小程式·雲開發實戰 - 校園約拍小程式

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