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

本文轉載自查看原文 2019-06-25 16:44 1326 微信雲開發/ 微信小程序/ 源碼分享/ 表白牆

后續會繼續更新，敬請期待2.0全新版本~
歡迎添加左邊的微信一起探討！

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

[其他開源項目]

Bug修復更新日歷

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

修復組件的bug；
修復首頁showModal導致出錯的bug；

[2020-04-30] 更新：

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

[2020-05-20] 說明更新
小程序沒有做后台，但是需要后台的可以參考這個官方提供的方案，https://mp.weixin.qq.com/s/HZCVnnau3grmKA06E-M-yg 和 https://mp.weixin.qq.com/s/TFc2fj-gOVwAvs603WZG_A

注意：

“情侶臉”雲函數 FaceAPI 的wx-server-sdk依賴需要更新才能正常使用，這里的都是舊版本的,上傳雲函數前請自行使用npm更新。
登錄鑒權：（現在這個不適用了，因為微信小程序的規則改了，這個不符合新規，需要自己根據實際情況修改）
后台管理：暫時沒有做后台管理界面，直接在雲開發后台即可查看管理，您也可以根據自己需要自己寫一個簡單的管理界面放在小程序端，然后把入口隱藏起來，限制指定用戶使用即可。

程序結構
說明
配置過程
結語
程序效果圖
雲開發 quickstart
參考文檔

程序結構

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

說明

《SayLove》表白牆微信小程序，前台基於校園情書微信小程序進行大量的修改，雖然樣式看起來都差不多，但是做了大量的修改。特別是后台部分，后台完全使用微信小程序雲開發，不依賴服務器。前台代碼由於是在原作者的基礎上根據實際情況做了修改，所以跟原來作者的看起來很像,但並沒有照搬照抄。

為什么我要改寫原作者的小程序？因為我嘗試過根據原作者的所寫的ReadMe進行配置，發現過程過於復雜，而且依賴因素太多，嘗試了很多次都無法成功。在自己的好奇心驅使下，就基於原項目進行的改寫，后台改寫為微信小程序雲開發，使其安裝配置變得非常簡單，拿來就可以直接使用了。

參考源項目的內容如下：

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

重構率超過了60%以上，如果不是借鑒了源項目的點子話，基本上可以說是自己重寫的了，
大修改部分如下：

后台：自己構造，完全依賴於雲開發，無需搭建后台服務器
所有數據的結構：完全是自己構造的（因為后台不一樣，所以數據的構造完全不一樣）
登錄鑒權：自己重新寫的（現在這個不可以用了，因為微信小程序的規則改了，這個不符合新規，需要自己修改）
首頁新消息通知：自己重新寫的（沒有直接使用參考的原項目）
各個板塊的點贊、評論：重新根據自己的需要重新編寫，對其進行了提升（因為后台不一樣，所以數據的結構需要重新構造）
各個板塊的圖片上傳：界面以及邏輯代碼是自己重新的（參考的源項目使用的是插件，這里改為了原生的），圖片保存在雲開發的后台
賣舍友板塊：瀑布流重寫，沒有使用原來的瀑布流
發布話題、發布賣舍友部分重寫：根據自己的需要進行了重寫
情侶臉板塊：自己封裝阿里雲人臉識別的接口，來適配雲開發
個人中心板塊重寫：自己重新構造了消息通知

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

由於本人的能力有限，還有很多地方沒法完善，望指正！

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

配置過程

因為項目里含有微信小程序雲開發用到的依賴，因此體積比較大。

直接下載源碼,源碼地址：https://github.com/lx164/SayLove/tree/master

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

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

    comment
    message
    mylike
    parise
    posts
    sale_friends
    topics

然后把以上的集合權限修改為：所有用戶可讀，僅創建者可讀寫。

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

配置文件在 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