摘要：閑暇之余，聽媳婦嘀咕說(shuō)要給她做一個(gè)能表達(dá)她每日心情的小程序，只能她在上面發(fā)東西。既然媳婦發(fā)話了，就花點(diǎn)心思做一個(gè)吧，因?yàn)闆](méi)有圖，所有布局全靠自己瞎編，下面結(jié)合圖片和代碼跟大家講解下實(shí)現(xiàn)過(guò)程，內(nèi)容略長(zhǎng)，感興趣的可以一覽。

閑暇之余，聽媳婦嘀咕說(shuō)要給她做一個(gè)能表達(dá)她每日心情的小程序，只能她在上面發(fā)東西。既然媳婦發(fā)話了，就花點(diǎn)心思做一個(gè)吧，因?yàn)闆](méi)有UI圖，所有布局全靠自己瞎編，下面結(jié)合圖片和代碼跟大家講解下實(shí)現(xiàn)過(guò)程，內(nèi)容略長(zhǎng)，感興趣的可以一覽。
下面將以圖片、代碼的形式和大家講解這個(gè)小demo的實(shí)現(xiàn)過(guò)程：

音樂(lè)(下面僅展示音樂(lè)相關(guān)代碼)

data () {
  return {
    isPlay: true,
    audioCtx: ""
  }
},
onLoad () {
  const that = this
  that.audioCtx = wx.createAudioContext("myAudio")
  that.getMusicUrl()
},
methods: {
  getMusicUrl () {
    const that = this
    const db = wx.cloud.database()
    const music = db.collection("music")
    music.get().then(res => {
      that.audioUrl = res.data[0].musicUrl
      that.audioCtx.loop = true
      that.audioCtx.play()
    })
  },
  audioPlay () {
    const that = this
    if (that.isPlay) {
      that.audioCtx.pause()
      that.isPlay = !that.isPlay
      tools.showToast("您已暫停音樂(lè)播放~")
    } else {
      that.audioCtx.play()
      that.isPlay = !that.isPlay
      tools.showToast("背景音樂(lè)已開啟~")
    }
  }
}

.bg_music
  position fixed
  right 0
  top 20rpx
  width 100rpx
  z-index 99
  display flex
  justify-content flex-start
  align-items flex-start
  .musicImg
    width 60rpx
    height 60rpx
  .music_icon
    animation musicRotate 3s linear infinite
  .music_play
    width 28rpx
    height 60rpx
    margin-left -10rpx
    transform-origin top
    -webkit-transform rotate(20deg)
  .playImg
    animation musicStop 1s linear forwards
  .pauseImg
    animation musicStart 1s linear forwards
#myAudio
  display none

1、通過(guò)wx.createInnerAudioContext()獲取實(shí)例 ，安卓機(jī)上音樂(lè)能正常播放，IOS上不行，具體原因感興趣的可以去深究一下；

2、由于前面邀請(qǐng)函小程序相關(guān)文章發(fā)出后，問(wèn)的最多的問(wèn)題依然是音樂(lè)無(wú)法播放這塊，所以這個(gè)demo中就再給大家講解了下實(shí)現(xiàn)的原理。

日歷

這里日歷使用了小程序插件，之所以在首頁(yè)放一個(gè)日歷是為了頁(yè)面不顯的太單調(diào)。下面講解下插件是如何使用的：

1、登錄微信公眾平臺(tái)>設(shè)置>第三方設(shè)置>添加插件>搜索相關(guān)插件的名字（使用appId搜索更好）>點(diǎn)擊某個(gè)插件右側(cè)的查看詳情，進(jìn)入插件詳情頁(yè)添加插件，一般都能立馬添加通過(guò)；

2、插件詳情里面一般都有使用文檔，或git地址，插件的具體屬性事件都會(huì)在文檔里有介紹；

3、下面講解下如何在項(xiàng)目中使用插件：

// "cloud": true,
"plugins": {
  "calendar": {
    "version": "1.1.3",
    "provider": "wx92c68dae5a8bb046"
  }
}

{
  // "navigationBarTitleText": "媳婦的心情日記",
  // "enablePullDownRefresh": true,
  "usingComponents": {
    "calendar": "plugin://calendar/calendar"
  }
}

天氣和地址

1、這里我借助的是高德微信小程序SDK;

2、首先獲取使用相關(guān)api需要的key值，如下：

3、下載對(duì)應(yīng)SDK（.js文件）并引入到項(xiàng)目中；

4、通過(guò)相關(guān)api獲取天氣和地址:

getWeather () {
  const that = this
  let myAmapFun = new amapFile.AMapWX({key: "你申請(qǐng)的key"})
  myAmapFun.getWeather({
    success (res) {
      // 成功回調(diào)
      that.address = res.liveData.city
      that.weather = res.liveData.weather + " "
      that.temperature = res.liveData.temperature + "℃"
      that.winddirection = res.liveData.winddirection + "風(fēng)" + res.liveData.windpower + "級(jí)"
    },
    fail (info) {
      // 失敗回調(diào)
      console.log(info)
    }
  })
},

發(fā)表日記

這里涉及到發(fā)表文字圖片內(nèi)容，在個(gè)人小程序提交審核后很大可能是不會(huì)被通過(guò)的，雖然第一次提交我的個(gè)人小程序通過(guò)審核了，后面幾次審核均未通過(guò)，雖然我這里只限制了我和媳婦兩個(gè)人能發(fā)日記，其他人壓根看不到右下角的發(fā)布加號(hào)，但是審核人員會(huì)查代碼，代碼中一旦被他們發(fā)現(xiàn)有類似發(fā)表相關(guān)的內(nèi)容或字樣就會(huì)導(dǎo)致審核不通過(guò)，好在已經(jīng)通過(guò)了一次，媳婦能正常寫點(diǎn)東西，也算基本符合要求，遺憾的是后面實(shí)現(xiàn)點(diǎn)贊相關(guān)的功能都沒(méi)有更新到線上。

1、通過(guò)唯一的openId來(lái)判斷是否顯示首頁(yè)右下角的發(fā)布加號(hào)；

2、后面會(huì)具體講解頁(yè)面里上傳圖片到云開發(fā)及存儲(chǔ)到數(shù)據(jù)庫(kù)相關(guān)功能

點(diǎn)贊功能

1、這里點(diǎn)贊功能借助的小程序云開發(fā)的云函數(shù)來(lái)實(shí)現(xiàn)的，結(jié)合代碼：

    

        
        
        
        
{{item.desc}}
        

            {{item.name}}
            {{item.weather}}
        
        

            {{item.time}}
            
        
    


    

        
提示
        
是否授權(quán)使用點(diǎn)贊功能？
        

            取消
            確認(rèn)
        
    

// 獲取日記列表
getDiaryList () {
  const that = this
  wx.cloud.callFunction({
    name: "diaryList",
    data: {}
  }).then(res => {
    that.getSrcFlag = false
    that.diaryList = res.result.data.reverse()
    that.likeList = []
    that.diaryList.forEach((item, index) => {
      item.like.forEach(itemSecond => {
        if (itemSecond.openId === that.openId) {
          that.likeList.push(itemSecond.type)
        }
      })
      if (that.likeList.length < index + 1) {
        that.likeList.push("1")
      }
    })
    wx.hideNavigationBarLoading()
    wx.stopPullDownRefresh()
  })
},
// 點(diǎn)贊或取消點(diǎn)贊
toLike (id, type, arr) {
  const that = this
  that.tempObj = {
    id: id,
    type: type,
    like: arr
  }
  wx.getSetting({
    success (res) {
      if (res.authSetting["scope.userInfo"]) {
        // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱
        wx.getUserInfo({
          success: function (res) {
            that.userInfo = res.userInfo
            wx.cloud.callFunction({
              name: "like",
              data: {
                id: id,
                type: type,
                like: arr,
                name: that.userInfo.nickName
              }
            }).then(res => {
              if (type === "1") {
                tools.showToast("取消點(diǎn)贊成功")
              } else {
                tools.showToast("點(diǎn)贊成功~")
              }
              // getOpenId()方法里會(huì)執(zhí)行一遍獲取日記列表
              that.getOpenId()
            })
          }
        })
      } else {
        that.showDialog = true
      }
    }
  })
},
// 授權(quán)獲取用戶信息
login (e) {
  const that = this
  console.log(that.tempObj, e)
  if (e.target.errMsg === "getUserInfo:ok") {
    wx.getUserInfo({
      success: function (res) {
        that.userInfo = res.userInfo
        wx.cloud.callFunction({
          name: "like",
          data: {
            id: that.tempObj.id,
            type: that.tempObj.type,
            like: that.tempObj.like,
            name: that.userInfo.nickName
          }
        }).then(res => {
          if (that.tempObj.type === "1") {
            tools.showToast("取消點(diǎn)贊成功")
          } else {
            tools.showToast("點(diǎn)贊成功~")
          }
          // getOpenId()方法里會(huì)執(zhí)行一遍獲取日記列表
          that.getOpenId()
        })
      }
    })
  }
  that.showDialog = false
}

2、首頁(yè)獲取日記列表，在存儲(chǔ)日記到數(shù)據(jù)庫(kù)集合的時(shí)候我會(huì)在每條日記對(duì)象中添加一個(gè)like屬性，like默認(rèn)是一個(gè)空數(shù)組；

3、當(dāng)用戶點(diǎn)贊或取消點(diǎn)贊時(shí)，組件data中tempObj屬性會(huì)臨時(shí)存儲(chǔ)三個(gè)參數(shù)：
①、對(duì)應(yīng)日記的_id；
②、用戶操作的類型是點(diǎn)贊（點(diǎn)贊是‘2’）或是取消點(diǎn)贊（取消點(diǎn)贊是‘1’）；
③、對(duì)應(yīng)日記的like數(shù)組；

4、通過(guò)小程序api的wx.getSetting({})來(lái)判斷用戶是否已經(jīng)授權(quán)。如果授權(quán)了獲取用戶信息，未授權(quán)則彈框引導(dǎo)用戶點(diǎn)擊確認(rèn)按鈕去手動(dòng)授權(quán)；

5、授權(quán)成功后，拿到用戶信息，我們開始調(diào)用點(diǎn)贊或取消點(diǎn)贊相關(guān)的云函數(shù)，如下：

const cloud = require("wx-server-sdk")
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
  try {
    // wxContext內(nèi)包含用戶的openId
    const wxContext = cloud.getWXContext()
    // 定義空數(shù)組
    let arr = []
    if (event.like && event.like.length > 0) {
      // 讓定義的數(shù)組等于用戶操作的當(dāng)前日記下的like數(shù)組
      arr = event.like
      // 定義一個(gè)計(jì)數(shù)變量
      let count = 0
      // 循環(huán)遍歷，當(dāng)openId相同時(shí)替換like數(shù)組中的相同項(xiàng)，并存儲(chǔ)對(duì)應(yīng)的type
      arr.forEach((item, index) => {
        if (item.openId === wxContext.OPENID) {
          count++
          arr.splice(index, 1, {
            openId: wxContext.OPENID,
            type: event.type,
            name: event.name
          })
        }
      })
      // 當(dāng)計(jì)數(shù)變量為0時(shí)，說(shuō)明在這條日記中，like數(shù)組中未存儲(chǔ)過(guò)此用戶，直接push此用戶并存儲(chǔ)type
      if (count === 0) {
        arr.push({
          openId: wxContext.OPENID,
          type: event.type,
          name: event.name
        })
      }
    } else {
      // 如果此條日記like數(shù)組本身就為空，直接push當(dāng)前用戶并存儲(chǔ)type
      arr.push({
        openId: wxContext.OPENID,
        type: event.type,
        name: event.name
      })
    }
    // 通過(guò)云開發(fā)操作數(shù)據(jù)庫(kù)的相關(guān)api,即update通過(guò)_id來(lái)更新集合中某條數(shù)據(jù)
    return await db.collection("diary").doc(event.id).update({
      data: {
        like: arr
      }
    })
  } catch (e) {
    console.error(e)
  }
}

6、相關(guān)云函數(shù)操作說(shuō)明都寫在上面的注釋里，有不清楚的歡迎留言，由于點(diǎn)贊功能未更新到線上（原因是因?yàn)閷徍瞬煌ㄟ^(guò)），想體驗(yàn)的同學(xué)可以留下評(píng)論，提供體驗(yàn)權(quán)限。

1、通過(guò)首頁(yè)右下角的發(fā)布加號(hào)，進(jìn)入發(fā)布心情頁(yè)；

2、地址等相關(guān)信息是從首頁(yè)通過(guò)路由帶過(guò)來(lái)的；

3、下面重點(diǎn)講解下關(guān)于上傳圖片到云存儲(chǔ)并寫入數(shù)據(jù)庫(kù)的操作過(guò)程，內(nèi)容如下：

upload () {
  const that = this
  wx.chooseImage({
    count: 1,
    sizeType: ["compressed"], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
    sourceType: ["album", "camera"], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
    success: function (res) {
      wx.showLoading({
        title: "上傳中"
      })
      // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
      let filePath = res.tempFilePaths[0]
      const name = Math.random() * 1000000
      const cloudPath = "picture/" + name + filePath.match(/.[^.]+?$/)[0]
      wx.cloud.uploadFile({
        cloudPath, // 云存儲(chǔ)圖片名字
        filePath // 臨時(shí)路徑
      }).then(res => {
        console.log(res)
        wx.hideLoading()
        that.imgUrl = res.fileID
      }).catch(e => {
        console.log("[上傳圖片] 失敗：", e)
      })
    }
  })
},
save () {
  const that = this
  if (that.desc) {
    that.getSrcFlag = false
    const db = wx.cloud.database()
    const diary = db.collection("diary")
    if (that.imgUrl === "../../static/images/default.png") {
      that.imgUrl = "../../static/images/default.jpg"
    }
    diary.add({
      data: {
        desc: that.desc,
        time: tools.getNowFormatDate(),
        url: that.imgUrl,
        name: that.name,
        weather: that.weather,
        address: that.address,
        like: []
      }
    }).then(res => {
      wx.reLaunch({
        url: "/pages/index/main"
      })
    }).catch(e => {
      console.log(e)
    })
  } else {
    tools.showToast("寫點(diǎn)什么吧~")
  }
}

4、這里的cloudPath可以自己定義，存儲(chǔ)到云中是這樣的：

5、我們通過(guò)組件data中的imgUrl臨時(shí)存儲(chǔ)手動(dòng)上傳的圖片路徑，最終通過(guò)保存按鈕一起存儲(chǔ)到云數(shù)據(jù)庫(kù)，存如到數(shù)據(jù)庫(kù)是這樣的：

1、詳情就不過(guò)多講解，這里利用了一些小程序api，比方說(shuō)動(dòng)態(tài)改變頭部標(biāo)題，每次進(jìn)入動(dòng)態(tài)隨機(jī)改變頂部標(biāo)題背景，點(diǎn)贊數(shù)也是從首頁(yè)帶過(guò)來(lái)的；

1、授權(quán)前

2、授權(quán)后

云開發(fā)雖然能用，但對(duì)于大型項(xiàng)目個(gè)人還是不推薦，從圖片和數(shù)據(jù)加載這塊的效果來(lái)看，傳統(tǒng)服務(wù)端拿到的數(shù)據(jù)明顯要快很多，既然有這么一個(gè)免費(fèi)的工具，我想感興趣的同學(xué)可以利用起來(lái)，玩點(diǎn)小demo，新花樣。

https://github.com/TencentClo...

如果你有關(guān)于使用云開發(fā)CloudBase相關(guān)的技術(shù)故事/技術(shù)實(shí)戰(zhàn)經(jīng)驗(yàn)想要跟大家分享，歡迎留言聯(lián)系我們哦~比心！