甜蜜暴击！程序员为媳妇儿做了个记录心情的小程序

web前端一大咖学习群
闲暇之余，听媳妇嘀咕说要给她做一个能表达她每日心情的小程序，只能她在上面发东西。既然媳妇发话了，就花点心思做一个吧，因为没有 UI 图，所有布局全靠自己瞎编，内容略长，感兴趣的可以一览。

下面将以图片、代码的形式和大家讲解这个小 demo 的实现过程：

首页

首页效果图

首页讲解

音乐（下面仅展示音乐相关代码）

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

通过 wx.createInnerAudioContext() 获取实例，安卓机上音乐能正常播放，iOS 上不行，具体原因感兴趣的可以去深究一下；
由于前面邀请函小程序相关文章发出后，问得最多的问题依然是音乐无法播放这块，所以这个 demo 中就再给大家讲解了下实现的原理。

日历

这里日历使用了小程序插件，之所以在首页放一个日历是为了页面不显得太单调。下面讲解下插件是如何使用的：

登录微信公众平台>设置>第三方设置>添加插件>搜索相关插件的名字（使用 APPID 搜索更好）>点击某个插件右侧的查看详情，进入插件详情页添加插件，一般都能立马添加通过；
插件详情里面一般都有使用文档，或 Git 地址，插件的具体属性事件都会在文档里有介绍；
下面讲解下如何在项目中使用插件：

① 找到 src 根目录下的 app.json 文件，添加如下内容：

// “cloud”: true,
“plugins”: {
“calendar”: {
“version”: “1.1.3”,
“provider”: “wx92c68dae5a8bb046”
}
}
② 在需要引用该插件的页面的 .json 文件中加入如下内容：

{
// “navigationBarTitleText”: “媳妇的心情日记”,
// “enablePullDownRefresh”: true,
“usingComponents”: {
“calendar”: “plugin://calendar/calendar”
}
}
③ 在页面中直接使用如下（具体属性方法的意思根据对应插件有所不同）：

<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”
/>
天气和地址

① 这里我借助的是高德微信小程序 SDK;

② 首先获取使用相关 API 需要的 Key 值，如下：

③ 下载对应 SDK（.js 文件）并引入到项目中；

④ 通过相关 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)
}
})
},
发表日记

这里涉及到发表文字图片内容，在个人小程序提交审核后很大可能不会被通过，虽然第一次提交我的个人小程序通过审核了，后面几次审核均未通过，虽然我这里只限制了我和媳妇两个人能发日记，其他人压根看不到右下角的发布加号，但是审核人员会查代码，代码中一旦被他们发现有类似发表相关的内容或字样就会导致审核不通过，好在已经通过了一次，媳妇能正常写点东西，也算基本符合要求，遗憾的是后面实现点赞相关的功能都没有更新到线上。

① 通过唯一的 OpenID 来判断是否显示首页右下角的发布加号；

② 后面会具体讲解页面里上传图片到云开发及存储到数据库相关功能。

点赞功能

① 这里点赞功能借助小程序云开发的云函数来实现，结合代码：

③ 当用户点赞或取消点赞时，组件 data 中 tempObj 属性会临时存储三个参数：1) 对应日记的 _id；2) 用户操作的类型是点赞（点赞是‘2’）或是取消点赞（取消点赞是‘1’）；3) 对应日记的 like 数组；

④ 通过小程序 API 的 wx.getSetting({}) 来判断用户是否已经授权。如果授权了获取用户信息，未授权则弹框引导用户点击确认按钮去手动授权；

⑤ 授权成功后，拿到用户信息，我们开始调用点赞或取消点赞相关的云函数，如下：

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)
}
}
⑥ 相关云函数操作说明都写在上面的注释里，点赞功能未更新到线上（原因是因为审核不通过），感兴趣的可根据上面思路实现此功能。

发表心情

效果图

讲解

① 通过首页右下角的发布加号，进入发布心情页；

② 地址等相关信息是从首页通过路由带过来的；

③ 下面重点讲解下关于上传图片到云存储并写入数据库的操作过程，内容如下：

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(‘写点什么吧~’)
}
}
④ 这里的 Cloudpath 可以自己定义，存储到云中是这样的：

⑤ 我们通过组件 data 中的 ImgURL 临时存储手动上传的图片路径，最终通过保存按钮一起存储到云数据库，存入到数据库是这样的：

日记详情页

详情页效果图

讲解

详情就不过多讲解，这里利用了一些小程序 API，比如动态改变头部标题，每次进入动态随机改变顶部标题背景，点赞数也是从首页带过来的。

访客页

效果图

① 授权前

② 授权后

Demo 中碰到的疑问

有些用户头像获取为空

① 如下：

② 数据库查看后头像字段确实为空：

总结

云开发虽然能用，但对于大型项目个人还是不推荐，从图片和数据加载这块的效果来看，传统服务端拿到的数据明显要快很多，既然有这么一个免费的工具，我想感兴趣的同学可以利用起来，玩点小 Demo、新花样，希望这篇文章能够帮助到有需要的同学。

最后，由于媳妇不希望别人看到她写的内容，已隐藏通过小程序名搜索该小程序，大家如果想实现类似功能请参照源码。

甜蜜暴击！程序员为媳妇儿做了个记录心情的小程序相关推荐

疫苗事件中的程序员爸爸 | 整理5.8万条信息自制小程序查疫苗质量
长生疫苗造假案一波未平,陕西又有网友反映"商洛发现多例儿童接种过期疫苗".商洛市回应称疫苗均在有效期内,只是信息登记错误,目前国家卫生健康委员会已进驻当地核查. 疫苗的安全性以及相 ...
给媳妇做一个记录心情的小程序
请勿使用本文章及源码作为商业用途! 闲暇之余,听媳妇嘀咕说要给她做一个能表达她每日心情的小程序,只能她在上面发东西.既然媳妇发话了,就花点心思做一个吧,因为没有UI图,所有布局全靠自己瞎编,下面结合图 ...
我想打老板，作为Java后端程序员，他让我开发电商微信小程序
大家好,我是曹NM,我是一名Java后端程序员,每天开心的撸CRUD: 然后,今天突变- 今天早上老板把我叫到办公室,对我说,"公司最近接了个电商小程序单子,你和王二狗,张SD参与下需求分析 ...
程序员黑科技 | 用13块钱DIY微信小程序浇花神器
作者:iotzheng,腾讯TEG平台开发工程师(江湖人称IoT小能手) 前言去年7月的时候,公司办了一场王者荣耀大赛,我和同事们也报名参加了.首局比赛就给我们泼了冷水,"深圳湾一号业主& ...
前端程序员怎么样通过业余时间接单app、小程序订单
随着整个互联网的极速发展,开发项目的规则也越来越多样化,普通程序员也能够接单利用业余时间做点私活补贴家用了,那么前端iOS开发.安卓开发.小程序应用服务商在哪里才能接到项目呢?这里我来给大家介绍几种方 ...
并不是所有的程序员都适合做技术管理
摘要:这是曾经的技术高手,如今却是名职业经理人分享的内容.他称,相信很多程序员都想做管理,一方面是高薪,另一方面则是做管理很风光.工作也轻松,但实际上并不是所有人都适合做管理,技术和管理是两完全不同的 ...
程序员过关斩将--redis做消息队列，香吗？
菜菜哥,我刚做完了一个订单系统,感觉很简单呀说说看,大量的订单状态怎么处理的? 我设计的时候可是考虑了这一点,所以用了异步处理,采用了MQ 那用的什么MQ呢,透露一下呗我用的redis做的MQ,很 ...
程序员实际情况_程序员实际上是做什么的？
程序员实际情况 What do programmers actually do? What can they be working on? 程序员实际上是做什么的? 他们可以做什么? In this ...
转：程序员每天该做的事
程序员每天该做的事 1.总结自己一天任务的完成情况最好的方式是写工作日志,把自己今天完成了什么事情,遇见了什么问题都记录下来,日后翻看好处多多 >> 好记性不如烂笔头.呵呵 2.考虑自己 ...

甜蜜暴击！程序员为媳妇儿做了个记录心情的小程序

甜蜜暴击！程序员为媳妇儿做了个记录心情的小程序相关推荐

最新文章

热门文章