给媳妇做一个记录心情的小程序
請(qǐng)勿使用本文章及源碼作為商業(yè)用途！
閑暇之余，聽媳婦嘀咕說要給她做一個(gè)能表達(dá)她每日心情的小程序，只能她在上面發(fā)東西。既然媳婦發(fā)話了，就花點(diǎn)心思做一個(gè)吧，因?yàn)闆]有UI圖，所有布局全靠自己瞎編，下面結(jié)合圖片和代碼跟大家講解下實(shí)現(xiàn)過程，內(nèi)容略長，感興趣的可以一覽。
下面將以圖片、代碼的形式和大家講解這個(gè)小demo的實(shí)現(xiàn)過程：
?首頁
首頁效果圖
首頁講解
- 音樂(下面僅展示音樂相關(guān)代碼)
1、通過wx.createInnerAudioContext()獲取實(shí)例?，安卓機(jī)上音樂能正常播放，IOS上不行，具體原因感興趣的可以去深究一下；
2、由于前面邀請(qǐng)函小程序相關(guān)文章發(fā)出后，問的最多的問題依然是音樂無法播放這塊，所以這個(gè)demo中就再給大家講解了下實(shí)現(xiàn)的原理。
- 日歷
這里日歷使用了小程序插件，之所以在首頁放一個(gè)日歷是為了頁面不顯的太單調(diào)。下面講解下插件是如何使用的：
?1、登錄微信公眾平臺(tái)>設(shè)置>第三方設(shè)置>添加插件>搜索相關(guān)插件的名字（使用appId搜索更好）>點(diǎn)擊某個(gè)插件右側(cè)的查看詳情，進(jìn)入插件詳情頁添加插件，一般都能立馬添加通過；
2、插件詳情里面一般都有使用文檔，或git地址，插件的具體屬性事件都會(huì)在文檔里有介紹；
3、下面講解下如何在項(xiàng)目中使用插件：
（1）、找到src根目錄下的app.json文件，添加如下內(nèi)容：
// "cloud": true, "plugins": {"calendar": {"version": "1.1.3","provider": "wx92c68dae5a8bb046"} }（2）、在需要引用該插件的頁面的.json文件中加入如下內(nèi)容：
{// "navigationBarTitleText": "媳婦的心情日記",// "enablePullDownRefresh": true,"usingComponents": {"calendar": "plugin://calendar/calendar"} }（3）、在頁面中直接使用如下（具體屬性方法的意思根據(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ā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ì)被通過的，雖然第一次提交我的個(gè)人小程序通過審核了，后面幾次審核均未通過，雖然我這里只限制了我和媳婦兩個(gè)人能發(fā)日記，其他人壓根看不到右下角的發(fā)布加號(hào)，但是審核人員會(huì)查代碼，代碼中一旦被他們發(fā)現(xiàn)有類似發(fā)表相關(guān)的內(nèi)容或字樣就會(huì)導(dǎo)致審核不通過，好在已經(jīng)通過了一次，媳婦能正常寫點(diǎn)東西，也算基本符合要求，遺憾的是后面實(shí)現(xiàn)點(diǎn)贊相關(guān)的功能都沒有更新到線上。
（1）、通過唯一的openId來判斷是否顯示首頁右下角的發(fā)布加號(hào)；
（2）、后面會(huì)具體講解頁面里上傳圖片到云開發(fā)及存儲(chǔ)到數(shù)據(jù)庫相關(guān)功能
- 點(diǎn)贊功能
（1）、這里點(diǎn)贊功能借助的小程序云開發(fā)的云函數(shù)來實(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 獲取頭像昵稱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)獲取用戶信息 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）、首頁獲取日記列表，在存儲(chǔ)日記到數(shù)據(jù)庫集合的時(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）、通過小程序api的wx.getSetting({})來判斷用戶是否已經(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)包含用戶的openIdconst 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)的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í)，說明在這條日記中，like數(shù)組中未存儲(chǔ)過此用戶，直接push此用戶并存儲(chǔ)typeif (count === 0) {arr.push({openId: wxContext.OPENID,type: event.type,name: event.name})}} else {// 如果此條日記like數(shù)組本身就為空，直接push當(dāng)前用戶并存儲(chǔ)typearr.push({openId: wxContext.OPENID,type: event.type,name: event.name})}// 通過云開發(fā)操作數(shù)據(jù)庫的相關(guān)api,即update通過_id來更新集合中某條數(shù)據(jù)return await db.collection('diary').doc(event.id).update({data: {like: arr}})} catch (e) {console.error(e)} }（6）、相關(guān)云函數(shù)操作說明都寫在上面的注釋里，有不清楚的歡迎留言，由于點(diǎn)贊功能未更新到線上（原因是因?yàn)閷徍瞬煌ㄟ^），想體驗(yàn)的同學(xué)也可以加本人微信號(hào)，提供體驗(yàn)權(quán)限。
發(fā)表心情
效果圖
講解?
（1）、通過首頁右下角的發(fā)布加號(hào)，進(jìn)入發(fā)布心情頁；
（2）、地址等相關(guān)信息是從首頁通過路由帶過來的；
（3）、下面重點(diǎn)講解下關(guān)于上傳圖片到云存儲(chǔ)并寫入數(shù)據(jù)庫的操作過程，內(nèi)容如下：
upload () {const that = thiswx.chooseImage({count: 1,sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有sourceType: ['album', 'camera'], // 可以指定來源是相冊(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('寫點(diǎn)什么吧~')} }（4）、這里的cloudPath可以自己定義，存儲(chǔ)到云中是這樣的：
（5）、我們通過組件data中的imgUrl臨時(shí)存儲(chǔ)手動(dòng)上傳的圖片路徑，最終通過保存按鈕一起存儲(chǔ)到云數(shù)據(jù)庫，存如到數(shù)據(jù)庫是這樣的：
日記詳情頁
詳情頁效果圖
講解?
（1）、詳情就不過多講解，這里利用了一些小程序api，比方說動(dòng)態(tài)改變頭部標(biāo)題，每次進(jìn)入動(dòng)態(tài)隨機(jī)改變頂部標(biāo)題背景，點(diǎn)贊數(shù)也是從首頁帶過來的；
訪客頁
效果圖
（1）、授權(quán)前
（2）、授權(quán)后
源碼地址
diary: 日記小程序（開放源碼）
體驗(yàn)二維碼
由于云開發(fā)中途收費(fèi)導(dǎo)致項(xiàng)目無法正常訪問，暫不開放體驗(yàn)二維碼！
總結(jié)
云開發(fā)雖然能用，但對(duì)于大型項(xiàng)目個(gè)人還是不推薦，從圖片和數(shù)據(jù)加載這塊的效果來看，傳統(tǒng)服務(wù)端拿到的數(shù)據(jù)明顯要快很多，既然有這么一個(gè)免費(fèi)的工具，我想感興趣的同學(xué)可以利用起來，玩點(diǎn)小demo,新花樣，希望這篇文章能夠幫助到有需要的同學(xué)，如果喜歡就點(diǎn)個(gè)贊吧~
后續(xù)優(yōu)化
優(yōu)化后地址
總結(jié)
以上是生活随笔為你收集整理的给媳妇做一个记录心情的小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【论文写作】如何画出好看的图表
- 下一篇： GeneXus与其它低代码平台有什么不同