前言
本文是使用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()
}
if (index === 1) {
this.getNewList()
}
if (index === 2) {
this.getOpenId()
}
},
// 最近发布的，按时间排序前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, 10)
})
},
// 获取自己发布的
getMyList () {
const that = 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()
}, 2000)
if (res.data.length === 0) {
toast('您暂时没有发布文章日记', 'none')
}
that.diaryList = res.data.reverse()
}
})
},
// 通过云函数获取日记的list
getDiaryList () {
const that = this
wx.showLoading({
title: '加载中'
})
wx.cloud.callFunction({
name: 'diaryList'
}).then(res => {
setTimeout(function () {
wx.hideLoading()
}, 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 () {
const that = 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 function toast (title = '成功', icon = 'success', duration = 2000) {
wx.showToast({
title: title,
icon: icon,
duration: duration
})
}
// 时间格式化
export function 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
}
详情页
展示内容详情，顶部轮播是作者上传的图片，可以点击查看原图，有为日记点赞，以及评论功能
// diaryDetail.vue
methods: {
// id 是文章id通过首页跳转传过来 page页面可以用 this.$root.$mp.query.id 获取
getDiaryDetail (id) {
const that = this
const db = wx.cloud.database()
const diary = db.collection('diary')
diary.doc(id).get().then(res => {
that.detailInfo = res.data
that.detailImgs = res.data.imagesList
})
},
// 点赞
dianZan () {
const that = this
const db = wx.cloud.database()
const _id = this.$root.$mp.query.id
const dianzan = db.collection('dianzan')
dianzan.where({
textId: _id,
_openid: that.openId
}).get({
success: function (res) {
if (res.data.length === 0) {
that.addDZ()
return false
}
toast('不能重复点赞哦！', 'none')
}
})
},
// 添加点赞人，以便可以判断是否重复点赞
addDZ () {
const that = this
const _id = this.$root.$mp.query.id
const db = wx.cloud.database()
const dianzan = db.collection('dianzan')
dianzan.add({
data: {
textId: _id, // 文字id
isZan: 1 // 1 为点赞
}
}).then(res => {
that.isAnimate = true
that.changeDZCount(_id)
})
},
// 调用点赞云函数，自增点赞数
changeDZCount (id) {
const that = this
wx.cloud.callFunction({
name: 'dianzan',
data: {
_id: id
}
}).then(res => {
toast('谢谢您的认可哦！', 'none')
that.getDiaryDetail(id)
})
},
// 判断阅读的人是否对这篇文章已经点过赞，如果点过赞进入页面心直接变红
getZan () {
const that = this
const db = wx.cloud.database()
const _id = this.$root.$mp.query.id
const dianzan = db.collection('dianzan')
dianzan.where({
textId: _id,
_openid: that.openId
}).get({
success: function (res) {
if (res.data.length) {
that.isAnimate = true
}
}
})
},
// 获取评论
getComment (id) {
const that = this
const db = wx.cloud.database()
const comment = db.collection('comment')
comment.where({
textId: id
}).get({
success: function (res) {
that.commentList = res.data.reverse()
}
})
},
// 添加评论
addComment () {
if (this.content === '') {
toast('请输入评论内容', 'none')
return false
}
const that = this
const db = wx.cloud.database()
const comment = db.collection('comment')
comment.add({
data: {
textId: this.$root.$mp.query.id, // 正文id
user: that.userInfo, // 用户信息
content: that.content, // 评论内容
time: getNowFormatDate() // 评论时间
}
}).then(res => {
that.contentCount = 0
that.getComment(this.$root.$mp.query.id)
})
},
// 判断用户是否发表过评论
getIsComment () {
const that = this
const db = wx.cloud.database()
const comment = db.collection('comment')
comment.where({
_openid: that.openId,
textId: this.$root.$mp.query.id
}).get().then(res => {
if (res.data.length === 0) {
that.addComment()
toast('发表成功')
that.content = ''
return false
}
toast('不能重复发表评论哦！', 'none')
})
},
// 绑定评论字数
handleContentInput (e) {
this.contentCount = e.target.value.length
},
// 发表评论
onGotUserInfo (e) {
this.userInfo = e.target.userInfo
this.getIsComment()
},
// 轮播图 全屏预览图片 调用微信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()方法
// write.vue
methods: {
// 上传图片，并将临时图片保存到云存储中
chooseImage () {
const that = this
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', '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(0, 9)
}
})
}
}
})
},
// 限制标题字数
handleTitleInput (e) {
this.titleCount = e.target.value.length
},
// 限制标题字数
handleContentInput (e) {
this.contentCount = e.target.value.length
},
// 全屏预览图片
handleImagePreview (e) {
console.log(e)
let idx = e.target.dataset.idx
let images = this.imagesList
wx.previewImage({
current: images[idx], // 当前预览的图片索引
urls: images // 所有要预览的图片
})
},
// 移除不想要的图
removeImage (e) {
const that = this
const idx = e.target.dataset.idx // 当前需要移除的图片索引
wx.showModal({
title: '提示',
content: '您确定删除这张照片吗？',
success (res) {
if (res.confirm) {
that.imagesList.splice(idx, 1)
toast('删除成功')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
// 发布文章
onGotUserInfo (e) {
if (this.title === '') {
toast('请输入文章标题', 'none')
return false
}
if (this.content === '') {
toast('请输入文章内容', 'none')
return false
}
if (this.imagesList.length === 0) {
toast('您还没上传图片', 'none')
return false
}
this.userInfo = e.target.userInfo
this.getOpenId()
},
// 往数据库里写数据
sendMessage () {
const that = this
const db = wx.cloud.database()
const diary = db.collection('diary')
diary.add({
data: {
title: that.title, // 正文标题
content: that.content, // 正文内容
imagesList: that.imagesList, // 上传图片 list
avatarUrl: that.userInfo.avatarUrl, // 头像
nickname: that.userInfo.nickName, // 名字
preview: 0, // 预览数
fabulous: 0, // 点赞数
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 文件下添加 "cloud": true 告诉小程序使用云开发,
project.config.json文件下添加 "cloudfunctionRoot": "static/functions/",指定存放云函数的目录
