閒暇之餘，聽媳婦嘀咕說要給她做一個能表達她每日心情的小程式，只能她在上面發東西。既然媳婦發話了，就花點心思做一個吧，因為沒有UI圖，所有佈局全靠自己瞎編，下面結合圖片和程式碼跟大家講解下實現過程，內容略長，感興趣的可以一覽。

下面將以圖片、程式碼的形式和大家講解這個小demo的實現過程：

首頁

首頁效果圖

首頁講解

• 音樂(下面僅展示音樂相關程式碼)

<div class="bg_music" @tap="audioPlay">
    <image src="../../static/images/music_icon.png" class="musicImg" :class="isPlay?'music_icon':''"/>
    <image src="../../static/images/music_play.png" class="music_play" :class="isPlay?'pauseImg':'playImg'"/>
</div>
<audio id="myAudio" :src="audioUrl" autoplay loop></audio>
 

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('您已暫停音樂播放~')
    } else {
      that.audioCtx.play()
      that.isPlay = !that.isPlay
      tools.showToast('背景音樂已開啟~')
    }
  }
}
 

.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、通過wx.createInnerAudioContext()獲取例項 ，安卓機上音樂能正常播放，IOS上不行，具體原因感興趣的可以去深究一下；

2、由於前面邀請函小程式相關文章發出後，問的最多的問題依然是音樂無法播放這塊，所以這個demo中就再給大家講解了下實現的原理。

---

• 日曆

這裡日曆使用了小程式外掛，之所以在首頁放一個日曆是為了頁面不顯的太單調。下面講解下外掛是如何使用的：

1、登入微信公眾平臺>設定>第三方設定>新增外掛>搜尋相關外掛的名字（使用appId搜尋更好）>點選某個外掛右側的檢視詳情，進入外掛詳情頁新增外掛，一般都能立馬新增通過；

2、外掛詳情裡面一般都有使用文件，或git地址，外掛的具體屬性事件都會在文件裡有介紹；

3、下面講解下如何在專案中使用外掛：

1、找到src根目錄下的app.json檔案，新增如下內容：

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

2、在需要引用該外掛的頁面的.json檔案中加入如下內容：

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

3、在頁面中直接使用如下（具體屬性方法的意思根據對應外掛有所不同）：

<calendar
    :class="showCalendar?'':'hide_right'"
    class="right"
    weeks-type="en"
    cell-size="20"
    :header="showHeader"
    show-more-days=true
    calendar-style="demo4-calendar"
    board-style="demo4-board"
    :days-color="demo4_days_style"
    @dayClick="dayClick"
/>

---

• 天氣和地址

1、這裡我藉助的是高德微信小程式SDK;

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

3、下載對應SDK（.js檔案）並引入到專案中；

4、通過相關api獲取天氣和地址:

getWeather () {
  const that = this
  let myAmapFun = new amapFile.AMapWX({key: '你申請的key'})
  myAmapFun.getWeather({
    success (res) {
      // 成功回撥
      that.address = res.liveData.city
      that.weather = res.liveData.weather + ' '
      that.temperature = res.liveData.temperature + '℃'
      that.winddirection = res.liveData.winddirection + '風' + res.liveData.windpower + '級'
    },
    fail (info) {
      // 失敗回撥
      console.log(info)
    }
  })
},

---

• 發表日記

這裡涉及到發表文字圖片內容，在個人小程式提交稽核後很大可能是不會被通過的，雖然第一次提交我的個人小程式通過稽核了，後面幾次稽核均未通過，雖然我這裡只限制了我和媳婦兩個人能發日記，其他人壓根看不到右下角的釋出加號，但是稽核人員會查程式碼，程式碼中一旦被他們發現有類似發表相關的內容或字樣就會導致稽核不通過，好在已經通過了一次，媳婦能正常寫點東西，也算基本符合要求，遺憾的是後面實現點贊相關的功能都沒有更新到線上。

1、通過唯一的openId來判斷是否顯示首頁右下角的釋出加號；

2、後面會具體講解頁面裡上傳圖片到雲開發及儲存到資料庫相關功能

---

• 點贊功能

1、這裡點贊功能借助的小程式雲開發的雲函式來實現的，結合程式碼：

<ul class="list">
    <li class="item" v-for="(item, index) in diaryList" :key="item._id" @tap="toDetail(item)">
        <image class="like" src="../../static/images/like_active.png" v-if="likeList[index] === '2'" @tap.stop="toLike(item._id, '1', item.like)"/>
        <image class="like" src="../../static/images/like.png" v-if="likeList[index] === '1'" @tap.stop="toLike(item._id, '2', item.like)"/>
        <image class="img" :src="item.url" mode="aspectFill"/>
        <p class="desc">{{item.desc}}</p>
        <div class="name-weather">
            <span class="name">{{item.name}}</span>
            <span class="weather">{{item.weather}}</span>
        </div>
        <p class="time-address">
            <span class="time">{{item.time}}</span>
            <!-- <span class="address">{{item.address}}</span> -->
        </p>
    </li>
</ul>
<div class="dialog" v-if="showDialog">
    <div class="box">
        <h3>提示</h3>
        <p>是否授權使用點贊功能？</p>
        <div class="bottom">
            <button class="cancel" @tap="hideDialog">取消</button>
            <button class="confirm" lang="zh_CN" open-type="getUserInfo" @getuserinfo="login">確認</button>
        </div>
    </div>
</div>

// 獲取日記列表
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()
  })
},
// 點贊或取消點贊
toLike (id, type, arr) {
  const that = this
  that.tempObj = {
    id: id,
    type: type,
    like: arr
  }
  wx.getSetting({
    success (res) {
      if (res.authSetting['scope.userInfo']) {
        // 已經授權，可以直接呼叫 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('取消點贊成功')
              } else {
                tools.showToast('點贊成功~')
              }
              // getOpenId()方法裡會執行一遍獲取日記列表
              that.getOpenId()
            })
          }
        })
      } else {
        that.showDialog = true
      }
    }
  })
},
// 授權獲取使用者資訊
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('取消點贊成功')
          } else {
            tools.showToast('點贊成功~')
          }
          // getOpenId()方法裡會執行一遍獲取日記列表
          that.getOpenId()
        })
      }
    })
  }
  that.showDialog = false
}

2、首頁獲取日記列表，在儲存日記到資料庫集合的時候我會在每條日記物件中新增一個like屬性，like預設是一個空陣列；

3、當用戶點贊或取消點贊時，元件data中tempObj屬性會臨時儲存三個引數：
①、對應日記的_id；
②、使用者操作的型別是點贊（點贊是‘2’）或是取消點贊（取消點贊是‘1’）；
③、對應日記的like陣列；

4、通過小程式api的wx.getSetting({})來判斷使用者是否已經授權。如果授權了獲取使用者資訊，未授權則彈框引導使用者點選確認按鈕去手動授權；

5、授權成功後，拿到使用者資訊，我們開始呼叫點贊或取消點贊相關的雲函式，如下：

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
  try {
    // wxContext內包含使用者的openId
    const wxContext = cloud.getWXContext()
    // 定義空陣列
    let arr = []
    if (event.like && event.like.length > 0) {
      // 讓定義的陣列等於使用者操作的當前日記下的like陣列
      arr = event.like
      // 定義一個計數變數
      let count = 0
      // 迴圈遍歷，當openId相同時替換like陣列中的相同項，並存儲對應的type
      arr.forEach((item, index) => {
        if (item.openId === wxContext.OPENID) {
          count++
          arr.splice(index, 1, {
            openId: wxContext.OPENID,
            type: event.type,
            name: event.name
          })
        }
      })
      // 當計數變數為0時，說明在這條日記中，like陣列中未儲存過此使用者，直接push此使用者並存儲type
      if (count === 0) {
        arr.push({
          openId: wxContext.OPENID,
          type: event.type,
          name: event.name
        })
      }
    } else {
      // 如果此條日記like陣列本身就為空，直接push當前使用者並存儲type
      arr.push({
        openId: wxContext.OPENID,
        type: event.type,
        name: event.name
      })
    }
    // 通過雲開發操作資料庫的相關api,即update通過_id來更新集合中某條資料
    return await db.collection('diary').doc(event.id).update({
      data: {
        like: arr
      }
    })
  } catch (e) {
    console.error(e)
  }
}

6、相關雲函式操作說明都寫在上面的註釋裡，有不清楚的歡迎留言，由於點贊功能未更新到線上（原因是因為稽核不通過），想體驗的同學可以留下評論，提供體驗許可權。

---

發表心情

效果圖

講解

1、通過首頁右下角的釋出加號，進入釋出心情頁；

2、地址等相關資訊是從首頁通過路由帶過來的；

3、下面重點講解下關於上傳圖片到雲端儲存並寫入資料庫的操作過程，內容如下：

upload () {
  const that = this
  wx.chooseImage({
    count: 1,
    sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
    sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
    success: function (res) {
      wx.showLoading({
        title: '上傳中'
      })
      // 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
      let filePath = res.tempFilePaths[0]
      const name = Math.random() * 1000000
      const cloudPath = 'picture/' + name + filePath.match(/\.[^.]+?$/)[0]
      wx.cloud.uploadFile({
        cloudPath, // 雲端儲存圖片名字
        filePath // 臨時路徑
      }).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('寫點什麼吧~')
  }
}

4、這裡的cloudPath可以自己定義，儲存到雲中是這樣的：

5、我們通過元件data中的imgUrl臨時儲存手動上傳的圖片路徑，最終通過儲存按鈕一起儲存到雲資料庫，存如到資料庫是這樣的：

---

日記詳情頁

詳情頁效果圖

講解

1、詳情就不過多講解，這裡利用了一些小程式api，比方說動態改變頭部標題，每次進入動態隨機改變頂部標題背景，點贊數也是從首頁帶過來的；

---

訪客頁

效果圖

1、授權前

2、授權後

---

總結

雲開發雖然能用，但對於大型專案個人還是不推薦，從圖片和資料載入這塊的效果來看，傳統服務端拿到的資料明顯要快很多，既然有這麼一個免費的工具，我想感興趣的同學可以利用起來，玩點小demo，新花樣。

原始碼連結

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

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

相關推薦