https://developers.weixin.qq.com/community/develop/article/doc/00084e1ab486d80cc7b8ef45951c13
「高校開發者」小程序 + 云開發 = 個人開發者快速創作的平臺
Zero06-21
433瀏覽
4評論
通過小程序+云開發快速實現想法
個人介紹
大家好，我是Zero，一名大三的前端開發愛好者，目前主要研究微信小程序和iOS開發。
這是第二次參加微信小程序應用開發賽，2018年我們設計了一款通過二維碼尋找丟失物品的小程序《蝴蝶尋物》，獲得了華北賽區三等獎。
今年，在小程序云開發功能的大力推廣下，我決定采用云開發的方式，實現一個雙人互動打卡互動的小程序《Mango Daily》(中文名稱《芒果日常》)。
得力于云開發提供的API，本項目在較短的時間內就實現了比較理想的效果。
接下來，我想從項目的立項開始，講講我是如何依靠小程序+云開發平臺將想法快速實現。
1. 立項
1.1 項目背景
熟悉我的朋友都知道，我是個懶人 ?? ，所以我決定做一個兩人互相監督完成目標的小程序。
目前市場上存在的大部分習慣日常類應用是通過個人或者群體打卡，我們更希望互相綁定的兩個用戶之間去完成一些日常活動。例如在完成自己的每日任務時，可以查看對方的打卡進度，提醒對方及時完成任務；或者可以根據任務為對方制訂一套獎勵計劃，鼓勵對方按時完成任務。另外，你可以在廣場記錄當天完成的任務，發生的故事，這可以只在你與同伴之間分享，也可以設置允許其他人閱讀。
1.2 設計
一開始UI是在腦海中浮現的，只是想做一個以芒果色為主，并且能夠快速看到對方打卡進度的界面。于是就有了一個以芒果色和樹葉綠為主的界面。
后來進行了第二版的設計，拋去了復雜的顏色組合，采用更簡潔的設計，同時自定義了部分組件。
1.3 技術準備
在去年的項目中，我們采用ThinkPHP開發了一套API系統，其中需要實現小程序的授權登錄，設置鑒權來保證數據安全等操作。整個過程只有我一名開發人員，所以大致就是“先搞定后端，其次搞定界面，最后進行聯調”的一個過程。
后來在云+社區看到一篇文章：《1個開發如何撐起一個過億用戶的小程序》，覺得確實可以通過新的方式去嘗試一下前后端分離的開發過程。通讀小程序云開發文檔之后，發現并不需要學習新的技術，就可以快速上手。
這是第一次使用Serverless實現一款作品，打開了我創作應用的大門。
這次使用了?Teambition?來做任務看板，由于是個人開發維護，所以簡單的 ‘ToDo, Doing, Done’ 模式就完全夠用了。
2. 開發
Mango Daily 使用的是小程序原生開發+云開發結合的方式進行開發的。
2.1 界面開發
界面沒有使用第三方UI框架，而是自己將常用的模塊封裝成了組件。
圖中比較核心的模塊包括 TabBar、Toast、Modal、Nav等。
這里打算介紹一下我自己設計的Toast提示框，通過自定義視圖+圖片，替換掉了官方的loading，success，failure，warning效果。
在實現該組件的時候，我考慮了兩種方案，一是通過普通image組件和設置z-index的方式實現Toast；另一個是使用cover-view組件。之所以考慮這兩種方案，是因為我在發布隨筆頁面會是用到textarea，如果使用方案一會被原生組件遮擋。
自定義TabBar則是使用小程序官方提供的方法去實現的。但是這個方法會在首次切換時出現跳動，頁面滑動時錯位等問題，后來使用過完全自定義的方式去實現TabBar。
"usingComponents": {"tabbar":"/components/tabbar/tabbar"}
在每個需要使用自定義TabBar的頁面調用自定義組件。
下圖是通過自定義組件實現的一個TabBar：
另外，Mango Daily中使用CSS3實現了部分動畫，考慮到iOS端和安卓端小程序的渲染引擎不同，需要對代碼進行兼容性處理。
/* 淡入 */.fade-in{animation-name: fade-in;-webkit-animation-name: fade-in;}@keyframesfade-in {from{opacity:0;? ? }to{opacity:1;? ? }}@-webkit-keyframesfade-in {from{opacity:0;? ? }to{opacity:1;? ? }}
這是我個人實現的一個動畫：
2.2 云開發
云開發包括云數據庫，云函數和云存儲。本項目中三個功能均使用到。
2.2.1 云數據庫
云數據庫是一個非關系型數據庫，在實際開發中基本符合本項目的需求。部分表關聯查詢則是通過分步查詢的方式代替。
云數據庫已經實現了自動鑒權，可以保證數據的安全性。目前云數據庫只支持以下幾種權限：
所有用戶可讀，僅創建者可讀寫
僅創建者可讀寫
所有用戶可讀
所有用戶不可讀寫
默認情況下是***僅創建者可讀寫***，所以在首次開發時，手動插入的測試數據并不一定可以在前端順利讀取，需要修改集合的權限。
云數據庫的調用在前端代碼中即可完成。但是從上面幾種讀寫權限來看，并沒有辦法實現對另一個用戶創建的數據進行修改或者刪除的操作(當然這也是非常不可取的)，于是云函數就派上用場了。
2.2.2 云函數
我理解的云函數，則是跑在云端的一個函數腳本文件。
在接觸云開發之前，如果我們想要去調用微信公眾平臺提供的API(例如發起退款、發送模板消息等)，則需要在后端代碼去實現，然后只需要給前端返回一個JSON表示請求狀態即可。或者想要去實現上述描述中，修改一條由他人創建的數據的功能時，都是有后端工程師去完成的。
在本次開發中，我深刻體會到了云函數的強大，以及微信公眾平臺工程師設計產品的嚴謹性。
Mango Daily用到了微信公眾平臺的模板消息功能，所以需要在合適的時機請求微信官方提供的API。
因為取消了后端的開發，所以一開始打算直接在小程序端去請求官方API。但是失敗了。因為此請求涉及APPKEY等重要信息，禁止在前端直接請求。這樣就可以通過云函數去代替先前的后端開發，最后將狀態返回給小程序端即可。
另外，云函數對云數據庫有更高的操作權限，所以想要修改、刪除他人生成的數據時，云函數可以直接進行操作。
云函數還提供定時觸發功能，不過在本項目中暫未涉及。
2.2.3 云存儲
本次開發省去了使用其他服務商的存儲服務，全部得力于云存儲功能。云存儲允許上傳多種文件類型，像圖片、音頻等文件還可以直接在小程序端調用。這里我們使用云存儲實現了文章插圖的功能。
2.3 優化
2.3.1 全局配置
之前在某個項目中實現過國際化功能，即按照不同使用地區顯示中英文的操作。這里我沿用了之前的設計，將代碼中所有的提示文字提取到一個文件中，在wxml中使用變量代替文字。這樣處理之后，文案可以集中管理。
全局文案配置文件：
js文件
constapp = getApp();Page({data: {text: app.text.calendar,? }// ...})
wxml文件
<!-- 保存 -->{{ text.editHabit }}<!-- 保存 end -->
2.3.2 數據層封裝
Mango Daily 數據操作進行了兩次封裝，一層是對云數據庫API進行封裝，第二層是每一個數據集合都對應一個Manager管理層。
以用戶集合?User，Article?為例，項目中的結構如下：
util
|- db.js
manager
|- Article.js
|- User.js
db.js 是對云數據庫API的封裝，實現了增刪查改等操作，以更新數據為例。
/**
* 更新數據
*/constupdate =(collection, _id, data) =>{returnnewPromise((resolve, reject) =>{if(!exist(collection)) {? ? ? ? ? ? reject(401, resCode[401]);? ? ? ? }? ? ? ? ? ? db.collection(collection).doc(_id).update({data: data? ? ? ? }).then(res=>{? ? ? ? ? ? resolve(res);? ? ? ? }).catch((code, msg) =>{? ? ? ? ? ? reject(code, msg);? ? ? ? });? ? });}
Article.js?是文章集合的管理類，同樣實現了增刪查改等操作，不過其是基于?db.js?進行擴展的。以更新文章操作為例：
/**
* 更新
*/constupdate =(_id, data) =>{returnnewPromise((resolve, reject) =>{? ? ? ? db.update(collection, _id, data).then(res=>{? ? ? ? ? ? resolve(res);? ? ? ? }).catch((code, msg) =>{? ? ? ? ? ? reject(db.errMsg);? ? ? ? });? ? });}
之所以封裝兩層，是想盡量減少Page對象中對云數據庫的直接調用。這樣在頁面js文件中只需要調用某一個Manager提供的函數即可。
2.3.3 后臺上傳策略
Mango Daily還實現了發送模板消息的功能，這就涉及到了FromID的收集。目前FromID的收集大部分采用埋點的方式。
如果每次采集到新的FromID都直接上傳到數據庫存儲，可能會造成網絡資源的浪費，所以需要選擇合適的時機上傳數據。
在本項目中，每次采集到FromID，首先存到?globalData?中，當小程序進入后臺狀態時，再進行數據的上傳。
app.js?中的實現：
/**
* 后臺監聽
*/onHide:function(){this.uploadFormID();},/**
* 上傳token
*/uploadFormID:function(){letids =this.globalData.formIds;if(ids.length ==0) {return;? ? }letformId = ids.pop();this.push.upload(formId).then(_=>{console.log("上傳formID:", formId);this.uploadFormID();? ? }).catch(err=>{console.log(err);? ? });},
3. 維護
很遺憾，這一部分可能沒有太多需要寫的。
在18年的項目中，需要考慮數據庫的維護問題。但是使用了云開發之后，Serverless的優點就表現出來了。我無須將太多的精力放在后端的維護上。
4. 總結
在本次項目開發中，我深刻體會到了云開發的便捷性。無須自己實現鑒權，對接第三方存儲。數據方面，增刪查改功能非常方便。云開發提供的種種便利，讓我在有新創意的時候，優先選擇小程序+云開發的方式去實現。
你好，你的小程序涉及用戶自行生成內容的發布/分享/交流，屬社交范疇，為個人主體小程序未開放類目，建議申請企業主體小程序
另外，Mango Daily中的隨筆功能屬于用戶自行生成內容功能，所以在上架的時候，個人開發者賬號是不被允許的，所以在考慮上架產品的時候，請按照實際情況酌情考慮選擇賬號主體類型。
2019.6.21補充：很遺憾，本項目沒有進決賽。后續加油啦！
