七夕秀恩愛新姿勢！這波操作我給十分！

一、前言

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

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

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

二、說說代碼

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);
           

三、說說功能

主要來說說郵箱這個功能吧，畢竟現在寫信的越來越少了，這裡很大程度的還原了寫信的過程，可以挑選信封，挑選郵票，然後寄出你的思戀。

我已經收到這麼多信了 你們呢？

還有個留言闆功能，她說和微信聊天有什麼差別（差別就在于沒有websocket），這裡就不贅述啦。

四、結語

七夕已至，快和親愛的人綁定最美戀愛關系吧！在這裡，你們就是導演，記錄美好愛情。

特别說明：此小程式，是我親手為女朋友寫的，感謝她提供需求支援，七夕快樂。

/:heart小彩蛋 /:heart

使用小程式·雲開發按以下四步操作即可檢視驚喜彩蛋~

在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}
           

源碼連結

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

雲開發（CloudBase）是一款雲端一體化的産品方案 ，采用 serverless 架構，免環境搭建等運維事務 ，支援一雲多端，助力快速建構小程式、Web應用、移動應用。

技術文檔：https://www.cloudbase.net/

如果你有關于使用雲開發CloudBase相關的技術故事/技術實戰經驗想要跟大家分享，歡迎留言聯系我們哦~比心！