基於微信雲開發 SayLove 表白牆微信小程序V1.0

後續會繼續更新，敬請期待2.0全新版本~
歡迎添加左邊的微信一塊兒探討！ https://www.cnblogs.com/LiangSenCheng/p/11083714.html

項目地址：https://github.com/lx164/SayLove

• [其餘開源項目]

1. 表白牆 https://github.com/lx164/SayLove
2. https://www.cnblogs.com/Liang...

Bug修復更新日曆

• [2020-05-22] 小bug修復：

1. 修復組件的bug；
2. 修復首頁showModal致使出錯的bug；

• [2020-04-30] 更新：

1. 修復「情侶臉」雲函數bug；
2. 優化「情侶臉」交互邏輯，當沒法識別時中斷當前操做；
3. 修復「發佈表白」、「發佈話題」時，沒添加圖片一直顯示加載中的問題；
4. 刪除雲函數沒必要要的依賴包；
5. 全新版本的表白牆正在籌備中....

• [2020-05-20] 說明更新

小程序沒有作後臺，可是須要後臺的能夠參考這個官方提供的方案，https://mp.weixin.qq.com/s/HZ... 和 https://mp.weixin.qq.com/s/TF...

注意：

• 「情侶臉」雲函數 FaceAPI 的wx-server-sdk依賴須要更新才能正常使用，這裏的都是舊版本的,上傳雲函數前請自行使用npm更新。
• 登陸鑑權：（如今這個不適用了，由於微信小程序的規則改了，這個不符合新規，須要本身根據實際狀況修改）
• 後臺管理：暫時沒有作後臺管理界面，直接在雲開發後臺便可查看管理，您也能夠根據本身須要本身寫一個簡單的管理界面放在小程序端，而後把入口隱藏起來，限制指定用戶使用便可。

[TOC]

程序結構

|--App 小程序代碼目錄
|--|-- cloudfunctions 雲函數
|--|--|--|-- DeleteMessage 
|--|--|--|-- DeleteMyLike
|--|--|--|-- Deletes
|--|--|--|-- FaceAPI 阿里雲人臉識別API封裝
|--|--|--|-- FrofessComment
|--|--|--|-- FrofessZan
|--|--|--|-- Message
|--|--|--|-- SaleComment
|--|--|--|-- SaleZan
|--|--|--|-- ViewNumber
|--|--|--|-- login
|--|-- miniprogram 小程序頁面
|--|--|--|-- 略
|--README.md
|--Images 截圖

說明

《SayLove》表白牆微信小程序，前臺基於校園情書微信小程序進行大量的修改，雖然樣式看起來都差很少，可是作了大量的修改。特別是後臺部分，後臺徹底使用微信小程序雲開發，不依賴服務器。前臺代碼因爲是在原做者的基礎上根據實際狀況作了修改，因此跟原來做者的看起來很像,但並無照搬照抄。

爲何我要改寫原做者的小程序？由於我嘗試過根據原做者的所寫的ReadMe進行配置，發現過程過於複雜，並且依賴因素太多，嘗試了不少次都沒法成功。在本身的好奇心驅使下，就基於原項目進行的改寫，後臺改寫爲微信小程序雲開發，使其安裝配置變得很是簡單，拿來就能夠直接使用了。

參考源項目的內容以下：

• 主要是參考了他的點子，並非徹底照搬照抄
• 界面的大致佈局，好比：板塊佈局、配色沒有修改，
• 除了大布局上之外，基本全部小布局都有更改（具體見下面的）
• 【注】：個人初衷目的，並非爲了直接拿別人的項目修修改改，而後就說這是個人成果。
• 我看到原做者的項目是一個偶然的機會，當時有剛好我在學微信小程序的雲開發，因此就參考原做者的項目進行了雲開發的修改適配，做爲學習成果的驗證。除了這個之外並無其餘的目的，也所以把我本身的也開源了。
• 參考的源項目做者地址爲：https://github.com/oubingbing...
• 本項目的地址：https://github.com/lx164/SayLove

重構率超過了60%以上，若是不是借鑑了源項目的點子話，基本上能夠說是本身重寫的了，
大修改部分以下：

• 後臺：本身構造，徹底依賴於雲開發，無需搭建後臺服務器
• 全部數據的結構：徹底是本身構造的（由於後臺不同，因此數據的構造徹底不同）
• 登陸鑑權：本身從新寫的（如今這個不能夠用了，由於微信小程序的規則改了，這個不符合新規，須要本身修改）
• 首頁新消息通知：本身從新寫的（沒有直接使用參考的原項目）
• 各個板塊的點贊、評論：從新根據本身的須要從新編寫，對其進行了提高（由於後臺不同，因此數據的結構須要從新構造）
• 各個板塊的圖片上傳：界面以及邏輯代碼是本身從新的（參考的源項目使用的是插件，這裏改成了原生的），圖片保存在雲開發的後臺
• 賣舍友板塊：瀑布流重寫，沒有使用原來的瀑布流
• 發佈話題、發佈賣舍友部分重寫：根據本身的須要進行了重寫
• 情侶臉板塊：本身封裝阿里雲人臉識別的接口，來適配雲開發
• 我的中心板塊重寫：本身從新構造了消息通知

本程序已經通過測試，拿來按照說明簡單配置就能夠直接使用,界面能夠本身進行修改。本人熱愛小程序，目前上線並維護的有兩個，後面看狀況再找時間進行開源。

因爲本人的能力有限，還有不少地方無法完善，望指正！

附：(微信小程序雲函數) 阿里雲人臉比對API封裝 https://www.cnblogs.com/LiangSenCheng/p/10922979.html

配置過程

由於項目裏含有微信小程序雲開發用到的依賴，所以體積比較大。

1. 直接下載源碼,源碼地址：https://github.com/lx164/SayL...

或者clone項目 git clone https://github.com/lx164/SayLove/tree/master/App

1. 打開微信開發者工具，導入項目（導入的時候請選擇 APP 文件夾）；
2. 填寫APPID；
3. 開通雲開發環境（請參考官方文檔）；
4. 新建如下數據庫集合,一行爲一個集合名（不要寫錯）：

comment
    message
    mylike
    parise
    posts
    sale_friends
    topics

而後把以上的集合權限修改成：全部用戶可讀，僅建立者可讀寫。

1. 填寫小程序相關配置信息；

配置文件在 App/miniprogram/config.js ,填寫如下的配置信息：

// 小程序APPID
    const APPID = ''
    // 小程序SECRET
    const SECRET = ""
    // 雲開發環境ID
    const CLOUNDID = ''
    // 消息刷新時間，單位：毫秒
    // 默認10秒刷新一次，即10000毫秒
    // 根據實際須要進行調節
    const FLASHTIME = 10000000

以下圖：

7.填寫阿里雲面部識別相關配置信息【選填】：

注意：若是不須要使用 情侶臉 功能的話，請跳過該步驟

• 7.1 阿里雲的AccessKey和AccessKeySecret的獲取，以及人臉識別服務的開通請參考官方文檔。

// 請填寫完整
    // 阿里雲的AccessKey
    var ak_id = '';
    // 阿里雲的AccessKeySecret 
    var ak_secret = '';

AccessKey和AccessKeySecret的填寫位置如圖：

• 7.2 檢查雲函數 FaceAPI 所須要的依賴是否已安裝；

// 1. 若是已經安裝請自行使用npm更新；
    // 2. 若是沒有安裝，則使用下面命令安裝：
    npm install crypto
    npm install request
    npm install url
    npm install wx-server-sdk

• 7.3 上傳雲函數 APP/cloudfunctions/FaceAPI，上傳時選擇 上傳並部署：全部文件；

1. 上傳 APP/cloudfunctions 文件夾下（除了APP/cloudfunctions/FaceAPI之外）全部的雲函數，上傳時選擇 上傳並部署：雲端安裝依賴；
2. 編譯運行。

結語

歡迎一塊兒探討，若是能夠，能夠給我一個start，或者

程序效果圖

雲開發 quickstart

這是雲開發的快速啓動指引，其中演示瞭如何上手使用雲開發的三大基礎能力：

• 數據庫：一個既可在小程序前端操做，也能在雲函數中讀寫的 JSON 文檔型數據庫
• 文件存儲：在小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理
• 雲函數：在雲端運行的代碼，微信私有協議自然鑑權，開發者只需編寫業務邏輯代碼

參考文檔

• 微信小程序雲開發文檔
• 人臉比對API調用說明文檔