七夕秀恩愛新姿式！這波操做我給十分！

1、前言

像每一滴酒回不了最初的葡萄，我回不到年少。愛情亦是如此，這就是寫一篇小程序的初衷，用來記錄我和她最美的戀愛。什麼是最美戀愛？就是繁忙之餘的一封書信，一塊兒奮鬥的目標，精彩的瞬間，旅遊的足跡，和那無數的記念日。

言歸正傳吧，先看看小程序給你的第一印象。（截圖的是體驗版本，上線版本有些功能是沒有上的哦）

頁面比較簡約，她很喜歡。

2、說說代碼

1.框架

小程序前端用的是taro框架寫的，後臺用的雲開發（簡直是我的開發者的福音）。 貼一下整體架構圖：

其餘的架構，頁面等等都很常見，我具體來講說雲函數的調用吧，主要是對數據庫的操做：

雲函數的入口（運用TcbRouter實現不一樣方法的調用）：

小程序端是這樣調用的：

調用方法的參數：

let param = {
      method:'get',
      collection:'mail',
      id:auth.user._id,
      bindId:auth.user.bindId,
      start:this.start,
      limit:PAGE.LIMIT
    };

    let res = await commonApi.list(param);
複製代碼

3、說說功能

主要來講說郵箱這個功能吧，畢竟如今寫信的愈來愈少了，這裏很大程度的還原了寫信的過程，能夠挑選信封，挑選郵票，而後寄出你的思戀。 我已經收到這麼多信了 大家呢？

還有個留言板功能，她說和微信聊天有什麼區別（區別就在於沒有websocket），這裏就不贅述啦。

4、結語

七夕已至，快和親愛的人綁定最美戀愛關係吧！在這裏，大家就是導演，記錄美好愛情。 特別說明：此小程序，是我親手爲女友寫的，感謝她提供需求支持，七夕快樂。

❤️ 小彩蛋 ❤️

使用小程序·雲開發按如下四步操做便可查看驚喜彩蛋~

在cloudfuntions文件夾下，點擊右鍵新建一個雲函數love，並部署上傳，

exports.main = async (event, context) => {
  return {
    timelimit: 10000,
  }
}
複製代碼

使用開發者工具新增一個小程序頁面love，在love.wxml裏輸入如下代碼

<view>你問我愛你多少年？</view>
<image bindtap="loveFunction" src="{{loveurl}}"></image>
<view wx:if="{{timelimit}}">
  <view><text>我愛你{{timelimit}}年</text></view>
  <view><text>雲開發祝全部程序員七夕脫單</text></view>  
</view>
複製代碼

在love.js裏輸入：

data: {
    timelimit:'',
    loveurl:"https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/love.png",
  },

  loveFunction() {
    wx.cloud.callFunction({
      name: 'love',
      data: {
      },
      success: res => {
        this.setData({
          timelimit: JSON.stringify(res.result.timelimit)
        })
      }
    })
  },
複製代碼

在love.wxss裏輸入：

view{text-align: center;margin: 20px 0;font-weight: bold;}
text{color: #FFC0CB;}
image{width: 100rpx;height: 100rpx}
button{background-color: #FFC0CB;color:#fff;width: 300rpx}
複製代碼

源碼連接

github.com/TencentClou…

---

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