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

時間  2019-12-28
標籤 程序 開發 實戰 简体版
原文   原文鏈接

創意來源於生活，之因此開發這個校園約拍小程序，是由於在攝影選修課上常聽老師抱怨外出寫生老找不到模特，許多大學生都想擁有一套專屬本身記憶的攝影做品，記錄下不會磨滅的美好回憶，可如何找到讓本身滿意的攝影師是他們的難題。悅拍屋是一個校園攝影o2o的約拍平臺，提供全方位的約拍服務，同時提供一個自我展現，學習交流，互動娛樂的平臺。接下來我將結合項目的講解給你們分享一些實用技術和對於雲開發的一些經驗，但願對正在學習小程序的你有幫助。javascript

前言

在開發一個項目以前首先要進行技術選型從而下降產品開發的技術風險和提升開發效率，技術選型必須得牢牢圍繞着業務場景來選擇。html

  • 產品原型設計：墨刀
  • UI組件庫
    1.微信原生樣式庫WeUI,讓用戶使用感知更加統一
    2.注重視覺交互體驗的ColorUI組件庫，在感知統一的基礎上視覺元素多樣化
  • 前端
    1.小程序原生語法以及API
    2.Promise實現異步調用
    3.ES6編寫頁面交互邏輯
  • 後端
    1.雲函數：無需自建服務器，在雲端運行的代碼，微信私有協議自然鑑權，開發者只需編寫自身業務邏輯代碼
    2.雲數據庫：無需自建數據庫，一個既可在小程序前端操做，也能在雲函數中讀寫的 JSON 數據庫
    3.雲存儲：實現小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理
    4.雲調用：由原生微信服務集成，基於雲函數免鑑權使用小程序開放接口的能力，包括服務端調用、獲取開放數據等能力
  • 其餘
    1.使用微信提供的雲測試對未上線的小程序進行缺陷測試、性能數據分析、機型覆蓋測試，確保小程序上線後正常運營
    2.使用基於雲開發的AI視覺能力-身份證識別實現實名認證，智能鑑黃結合人工完成發佈信息的審覈
    3.開發工具:微信開發者工具、VScode
    4.部分圖標使用自阿里巴巴矢量圖標庫

整體設計

功能結構圖

你們能夠經過此圖瞭解整個項目的主要功能點前端

功能結構圖

產品原型圖

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

主頁原型圖

色彩設計圖

悅拍屋的總體色調爲淺藍色，各位小夥伴在開發本身項目的時候能夠根據色彩標準搭配來設計項目所採用的色彩，合適的色彩搭配能夠給用戶良好的視覺體驗git

色彩設計圖

功能模塊詳解

接下來我會對部分功能模塊以圖文結合的形式詳細描述，將其中涉及的技術、知識分享給你們es6

約拍邀請

用戶可在首頁查看約拍需求，並點擊查看需求詳情，用戶在瞭解需求後，若本身符合條件便可提交約拍信息，等待發布者的回覆，可將此需求收藏方便查看github

技術分享：自定義頂部導航欄

官方默認的導航欄只能對背景顏色進行更改，對於想要在導航欄添加一些比較酷炫的效果則須要經過自定義導航欄實現 web

實現原理：經過設置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，感興趣的小夥伴能夠看看

附錄

在此提供一些本項目涉及到的技術、工具等連接供你們學習使用

源碼連接

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

若是你有關於使用雲開發CloudBase相關的技術故事/技術實戰經驗想要跟你們分享，歡迎留言聯繫咱們哦~比心！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程