mpVue + 云开发微信小程序之旅
本文是使用mpVue + 小程序云开发构建的mini型的微信小程序,小程序加载过程会稍微比较慢,如存在问题望各路大神指教。 小程序分为三个部分:1. 首页主要是展示发布的内容;2. 写日记是提供添加数据的项;3. 详情页是浏览内容正文的具体详情 喜欢的小伙伴动动您的小手给个小星星哦,谢谢!!?小程序源码 小程序二维码 首页先看首页效果图,顶部是一个轮播? 直接上代码吧 // index.vue
methods: {
// 跳转详情
navigateTo (id) {
wx.navigateTo({
url: '../diaryDetail/main?id=' + id
})
},// 切换 全部, 最新, 我的
switechNav (index) {
this.isActive = index
if (index === 0) {
this.getDiaryList()
}
1) {
this.getNewList()
}
2) {
this.getOpenId()
}
},136);">// 最近发布的,按时间排序前10条
getNewList () {
const that = this
wx.showLoading({
title: '加载中'
})
wx.cloud.callFunction({
name: 'diaryList'
}).then(res => {
let infoList = res.result.data.reverse()
setTimeout(function () {
wx.hideLoading()
},2000)
that.diaryList = infoList.slice(0,0);">10)
})
},136);">// 获取自己发布的
getMyList () {
this
const db = wx.cloud.database()
const diary = db.collection('diary')
wx.showLoading({
title: '加载中'
})
diary.where({
_openid: that.openId
}).get({
success: function (res) {
setTimeout(function () {
wx.hideLoading()
},0);">2000)
if (res.data.length === 0) {
toast('您暂时没有发布文章日记','none')
}
that.diaryList = res.data.reverse()
}
})
},136);">// 通过云函数获取日记的list
getDiaryList () {
'diaryList'
}).then(res => {
setTimeout(2000)
let infoList = res.result.data
that.diaryList = infoList.sort(function (a,b) {
return b.preview - a.preview
})
that.imgUrls = that.diaryList[0].imagesList
})
},
// 获取openid
getOpenId () {
this
wx.cloud.callFunction({
name: 'user'
}).then(res => {
that.openId = res.result.OPENID
that.getMyList()
})
}
}
复制代码
工具函数工具函数在 utils/index.js,做时间格式化和弹出提示 function addZero (n) {
return n > 10 ? n : '0' + n
}
// toast 弹出提示
export toast (title = '成功',icon = 'success',duration = 2000) {
wx.showToast({
title: title,icon: icon,duration: duration
})
}
// 时间格式化
getNowFormatDate () {
const now = new Date()
const year = now.getFullYear()
const month = addZero(now.getMonth() + 1)
const day = addZero(now.getDate())
const hh = addZero(now.getHours())
const mm = addZero(now.getMinutes())
const ss = addZero(now.getSeconds())
const timer = year + '-' + month + '-' + day + ' ' + hh + ':' + mm + ':' + ss
return timer
}
export default {
toast,getNowFormatDate
}
复制代码
详情页展示内容详情,顶部轮播是作者上传的图片,可以点击查看原图,有为日记点赞,以及评论功能 )
diary.doc(id).get().then(res => {
that.detailInfo = res.data
that.detailImgs = res.data.imagesList
})
},136);">// 点赞
dianZan () {
const _id = this.$root.$mp.query.id
const dianzan = db.collection('dianzan')
dianzan.where({
textId: _id,_openid: that.openId
}).get({
success: function (res) {
0) {
that.addDZ()
return false
}
toast('不能重复点赞哦!',0);">'none')
}
})
},136);">// 添加点赞人,以便可以判断是否重复点赞
addDZ () {
'dianzan')
dianzan.add({
data: {
textId: _id,136);">// 文字id
isZan: 1 // 1 为点赞
}
}).then(res => {
that.isAnimate = true
that.changeDZCount(_id)
})
},136);">// 调用点赞云函数,自增点赞数
changeDZCount (id) {
'dianzan',data: {
_id: id
}
}).then(res => {
toast('谢谢您的认可哦!',0);">'none')
that.getDiaryDetail(id)
})
},136);">// 判断阅读的人是否对这篇文章已经点过赞,如果点过赞进入页面心直接变红
getZan () {
if (res.data.length) {
that.isAnimate = true
}
}
})
},136);">// 获取评论
getComment (id) {
const comment = db.collection('comment')
comment.where({
textId: id
}).get({
success: function (res) {
that.commentList = res.data.reverse()
}
})
},136);">// 添加评论
addComment () {
if (this.content === '') {
toast('请输入评论内容',0);">'none')
false
}
'comment')
comment.add({
data: {
textId: this.$root.$mp.query.id,136);">// 正文id
user: that.userInfo,136);">// 用户信息
content: that.content,136);">// 评论内容
time: getNowFormatDate() // 评论时间
}
}).then(res => {
that.contentCount = 0
that.getComment(this.$root.$mp.query.id)
})
},136);">// 判断用户是否发表过评论
getIsComment () {
'comment')
comment.where({
_openid: that.openId,textId: this.$root.$mp.query.id
}).get().then(res => {
0) {
that.addComment()
toast('发表成功')
that.content = ''
false
}
toast('不能重复发表评论哦!',0);">'none')
})
},136);">// 绑定评论字数
handleContentInput (e) {
this.contentCount = e.target.value.length
},136);">// 发表评论
onGotUserInfo (e) {
this.userInfo = e.target.userInfo
this.getIsComment()
},136);">// 轮播图 全屏预览图片 调用微信API wx.previewImage
handleImagePreview (e) {
let idx = e.target.dataset.idx
let images = this.detailImgs
wx.previewImage({
current: images[idx],urls: images
})
}
}
复制代码
写日记将 wx.chooseImage() 生成的临时图片保存到微信云存储,主要掉用 wx.cloud.uploadFile()方法 ,0);">'compressed'],sourceType: ['album',0);">'camera'],success: function (res) {
// 将选择的图片上传到云存储
for (let i = 0; i < res.tempFilePaths.length; i++) {
const filePath = res.tempFilePaths[i]
const name = Math.random() * 1000000
const cloudPath = name + filePath.match(/.[^.]+?$/)[0]
wx.cloud.uploadFile({
cloudPath,filePath,success: res => {
let images = that.imagesList.concat(res.fileID)
that.imagesList = images.length <= 9 ? images : images.slice(9)
}
})
}
}
})
},136);">// 限制标题字数
handleTitleInput (e) {
this.titleCount = e.target.value.length
},136);">// 限制标题字数
handleContentInput (e) {
// 全屏预览图片
handleImagePreview (e) {
console.log(e)
this.imagesList
wx.previewImage({
current: images[idx],136);">// 当前预览的图片索引
urls: images // 所有要预览的图片
})
},136);">// 移除不想要的图
removeImage (e) {
const idx = e.target.dataset.idx // 当前需要移除的图片索引
wx.showModal({
title: '提示',content: '您确定删除这张照片吗?',success (res) {
if (res.confirm) {
that.imagesList.splice(idx,0);">1)
toast('删除成功')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},136);">// 发布文章
onGotUserInfo (e) {
this.title === '请输入文章标题',0);">'请输入文章内容',51); font-weight: 700;">this.imagesList.length === 0) {
toast('您还没上传图片',51); font-weight: 700;">this.getOpenId()
},136);">// 往数据库里写数据
sendMessage () {
'diary')
diary.add({
data: {
title: that.title,136);">// 正文标题
content: that.content,136);">// 正文内容
imagesList: that.imagesList,136);">// 上传图片 list
avatarUrl: that.userInfo.avatarUrl,136);">// 头像
nickname: that.userInfo.nickName,136);">// 名字
preview: // 预览数
fabulous: // 点赞数
creatTime: getNowFormatDate()
}
}).then(res => {
toast('发布成功')
that.title = that.content = ''
that.titleCount = that.contentCount = 0
that.imagesList = []
})
},}
复制代码
末尾在使用云开发中需要将如下代码放到根目录的 src/main.js中 wx.cloud.init({
env: '云开发环境ID'
})
复制代码
app.json 文件下添加? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |