閑暇之余，聽(tī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ò)程：

首頁(yè)

首頁(yè)效果圖

首頁(yè)講解

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

<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 = thisthat.audioCtx = wx.createAudioContext('myAudio')that.getMusicUrl() }, methods: {getMusicUrl () {const that = thisconst db = wx.cloud.database()const music = db.collection('music')music.get().then(res => {that.audioUrl = res.data[0].musicUrlthat.audioCtx.loop = truethat.audioCtx.play()})},audioPlay () {const that = thisif (that.isPlay) {that.audioCtx.pause()that.isPlay = !that.isPlaytools.showToast('您已暫停音樂(lè)播放~')} else {that.audioCtx.play()that.isPlay = !that.isPlaytools.showToast('背景音樂(lè)已開(kāi)啟~')}} } .bg_musicposition fixedright 0top 20rpxwidth 100rpxz-index 99display flexjustify-content flex-startalign-items flex-start.musicImgwidth 60rpxheight 60rpx.music_iconanimation musicRotate 3s linear infinite.music_playwidth 28rpxheight 60rpxmargin-left -10rpxtransform-origin top-webkit-transform rotate(20deg).playImganimation musicStop 1s linear forwards.pauseImganimation musicStart 1s linear forwards #myAudiodisplay 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)目中使用插件：

1、找到src根目錄下的app.json文件，添加如下內(nèi)容：

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

2、在需要引用該插件的頁(yè)面的.json文件中加入如下內(nèi)容：

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

3、在頁(yè)面中直接使用如下（具體屬性方法的意思根據(jù)對(duì)應(yīng)插件有所不同）：

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

---

• 天氣和地址

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

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

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

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

getWeather () {const that = thislet myAmapFun = new amapFile.AMapWX({key: '你申請(qǐng)的key'})myAmapFun.getWeather({success (res) {// 成功回調(diào)that.address = res.liveData.citythat.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)有類(lèi)似發(fā)表相關(guān)的內(nèi)容或字樣就會(huì)導(dǎo)致審核不通過(guò)，好在已經(jīng)通過(guò)了一次，媳婦能正常寫(xiě)點(diǎn)東西，也算基本符合要求，遺憾的是后面實(shí)現(xiàn)點(diǎn)贊相關(guān)的功能都沒(méi)有更新到線上。

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

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

---

• 點(diǎn)贊功能

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

<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>是否授權(quán)使用點(diǎn)贊功能？</p><div class="bottom"><button class="cancel" @tap="hideDialog">取消</button><button class="confirm" lang="zh_CN" open-type="getUserInfo" @getuserinfo="login">確認(rèn)</button></div></div> </div> // 獲取日記列表 getDiaryList () {const that = thiswx.cloud.callFunction({name: 'diaryList',data: {}}).then(res => {that.getSrcFlag = falsethat.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 = thisthat.tempObj = {id: id,type: type,like: arr}wx.getSetting({success (res) {if (res.authSetting['scope.userInfo']) {// 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱(chēng)wx.getUserInfo({success: function (res) {that.userInfo = res.userInfowx.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)獲取用戶(hù)信息 login (e) {const that = thisconsole.log(that.tempObj, e)if (e.target.errMsg === 'getUserInfo:ok') {wx.getUserInfo({success: function (res) {that.userInfo = res.userInfowx.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)用戶(hù)點(diǎn)贊或取消點(diǎn)贊時(shí)，組件data中tempObj屬性會(huì)臨時(shí)存儲(chǔ)三個(gè)參數(shù)：
①、對(duì)應(yīng)日記的_id；
②、用戶(hù)操作的類(lèi)型是點(diǎn)贊（點(diǎn)贊是‘2’）或是取消點(diǎn)贊（取消點(diǎn)贊是‘1’）；
③、對(duì)應(yīng)日記的like數(shù)組；

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

5、授權(quán)成功后，拿到用戶(hù)信息，我們開(kāi)始調(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)包含用戶(hù)的openIdconst wxContext = cloud.getWXContext()// 定義空數(shù)組let arr = []if (event.like && event.like.length > 0) {// 讓定義的數(shù)組等于用戶(hù)操作的當(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)的typearr.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ò)此用戶(hù)，直接push此用戶(hù)并存儲(chǔ)typeif (count === 0) {arr.push({openId: wxContext.OPENID,type: event.type,name: event.name})}} else {// 如果此條日記like數(shù)組本身就為空，直接push當(dāng)前用戶(hù)并存儲(chǔ)typearr.push({openId: wxContext.OPENID,type: event.type,name: event.name})}// 通過(guò)云開(kāi)發(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ō)明都寫(xiě)在上面的注釋里，有不清楚的歡迎留言，由于點(diǎn)贊功能未更新到線上（原因是因?yàn)閷徍瞬煌ㄟ^(guò)），想體驗(yàn)的同學(xué)可以留下評(píng)論，提供體驗(yàn)權(quán)限。

---

發(fā)表心情

效果圖

講解

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

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

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

upload () {const that = thiswx.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() * 1000000const 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 = thisif (that.desc) {that.getSrcFlag = falseconst 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('寫(xiě)點(diǎn)什么吧~')} }

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

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

---

日記詳情頁(yè)

詳情頁(yè)效果圖

講解

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)的；

---

訪客頁(yè)

效果圖

1、授權(quán)前

2、授權(quán)后

---

總結(jié)

云開(kāi)發(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/TencentCloudBase/Good-practice-tutorial-recommended

---

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

轉(zhuǎn)載于:https://www.cnblogs.com/CloudBase/p/11350380.html

總結(jié)

以上是生活随笔為你收集整理的你的心事我全知晓——心情日记小程序丨实战的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。