基於微信雲開發 -SayLove表白牆V1.0-微信小程序源碼分享

後續會繼續更新，敬請期待2.0全新版本~

歡迎通過以下方式聯繫我，一起探討！
1、關注 菜鳥搬運 微信公衆號！
2、直接加我微信，聯繫方式在 https://www.cnblogs.com/LiangSenCheng/p/12543230.html 頁面頂部的右邊，請備註【來自CSDN】！

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

注意：

• 雲函數的wx-server-sdk依賴需要更新才能正常使用，這裏的都是舊版本的。上傳雲函數前請自行使用npm更新。
• 登錄鑑權：（現在這個不可以用了，因爲微信小程序的規則改了，這個不符合新規，需要自己修改）

程序結構

|--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%以上，如果不是借鑑了源項目的點子話，基本上可以說是自己重寫的了，
大修改部分如下：

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

本程序已經經過測試，拿來按照說明簡單配置就可以直接使用,界面可以自己進行修改。本人熱愛小程序，目前上線並維護的有兩個，其中一個是《桂工課程表》https://github.com/lx164/Glut_TimeTable，後面找時間也會進行開源。

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

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

程序效果圖

配置過程

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

1、直接下載源碼；

源碼地址：https://github.com/lx164/SayLove/tree/master

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

2、打開微信開發者工具，導入項目，填寫APPID；

3、開通雲開發環境（請參考官方文檔）；

4、新建以下數據庫集合,一行爲一個集合名（不要寫錯）：

    comment
    message
    mylike
    parise
    posts
    sale_friends
    topics

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

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

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

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

如下圖：

6、【選填，若使用 情侶臉 ，則需要填寫】填寫阿里雲面部識別相關配置信息：

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

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

如圖：

7、上傳 APP/cloudfunctions 文件夾下的雲函數，雲函數所需要的依賴已安裝，請直接選擇 上傳並部署：所有文件；

8、編譯運行。

結語

歡迎一起探討，如果可以，可以給我一個start，或者

雲開發 quickstart

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

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

參考文檔

• 雲開發文檔