【宝剑出鞘】第二式：公告发布项目

迪丽瓦拉

2025-06-01 10:51:54

0次

大家好，我是csdn的博主：lqj_本人

这是我的个人博客主页：

lqj_本人的博客_CSDN博客-微信小程序,前端,python领域博主lqj_本人擅长微信小程序,前端,python,等方面的知识https://blog.csdn.net/lbcyllqj?spm=1011.2415.3001.5343哔哩哔哩欢迎关注：小淼Develop

小淼Develop的个人空间-小淼Develop个人主页-哔哩哔哩视频

本篇文章主要讲述【宝剑出鞘】第二式：公告发布项目，本篇文章已经成功收录【宝剑出鞘】专栏中：

https://blog.csdn.net/lbcyllqj/category_12254851.htmlhttps://blog.csdn.net/lbcyllqj/category_12254851.html

前言

项目页面演示

使用到的UI

自创方法

重要设计思路

首页实现思路：

登录管理员页面思路：

修改公告页面思路：

作者强力推荐

前言

所谓云开发，是由传统的开发模式的基础上改良后的开发模式。是云端一体化的后端云服务，采用 serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 App 等应用。

项目页面演示

使用到的UI

UI组件：Vant Weapp - 轻量、可靠的小程序 UI 组件库

自创方法

wx.chooseMedia新接口的批量上传图片方法

    //删除图片deleteImage(e) {console.log(e)console.log(e.currentTarget.dataset.index)let arr = this.data.imageListarr.splice(e.currentTarget.dataset.index, 1)this.setData({imageList: arr})},//放大预览图片previewImage(e) {wx.previewImage({urls: this.data.imageList,current: this.data.imageList[e.currentTarget.dataset.index]})},// 上传submit(e){let that = thisvar DATE = util.formatTime(new Date());if(that.data.title == '请输入标题' || that.data.content == '请输入内容'||that.data.imageList.length == 0){wx.showToast({title: '您还有信息未填！',icon:'none'})}else{that.setData({cTime:DATE })wx.showLoading({title: '上传中...',})let time = Date.now() //首先获取大概的上传时间let arr = [] //用于保存上传图片的云端路径//上传图片到云存储,云存储有专门的文件夹imageList/let count = 0 //记录最后一个上传的图片回调函数this.data.imageList.forEach((item, index) => {let path = "imageList/" + time + "_" + index + ".png"wx.cloud.uploadFile({cloudPath: path,filePath: item, // 文件路径}).then(res => {count++//友好提示if (count === this.data.imageList.length) {wx.hideLoading()wx.showToast({title: '上传成功',})this.setData({imageList: []})}})arr.push("cloud://kaifa1-0g5d829q5df2f7e8.6b61-kaifa1-0g5d829q5df2f7e8-1312670923/" + path)})const db = wx.cloud.database()wx.showLoading({title:'上传中',})db.collection('content').add({data:{title:that.data.title,content:that.data.content,images: arr,cTime:that.data.cTime,openid:that.data.openid},success(res){console.log("插入成功"+res)wx.hideLoading()wx.showToast({title: '上传成功！',})setTimeout(()=>{wx.navigateBack({delta:1})},800)},fail:console.error})// })}},

动态效果：

重要设计思路

首页实现思路：

显示：标题、时间、上传图片第一张图片

wxml：

{shuju}}" wx:key="index">{item._id}}" class="box1">{{item.title}}{item.images[0]}}">{{item.cTime}}

登录管理员页面思路：

获取到数据库中的账号、密码，并作出判断是否输入正确。正确则跳转，不正确则提示，并返回！

    let that = this if(that.data.zhanghao == '账号' || that.data.mima == '密码'){wx.showToast({title: '请输入信息',icon:"none"})}else{let that = thiswx.cloud.database().collection('guanliyuan').where({zhanghao:that.data.zhanghao,mima:that.data.mima}).get({success(res){console.log(res.data.length)if(res.data.length < 1){wx.showToast({title: '账号或密码错误',icon:'none'})}else{wx.navigateTo({url: '../GLY_GL/GLY_GL',})}}})}

修改公告页面思路：

1.循环渲染出数据库中的数据条数，获取到每条的id

2.通过每条对应id对本条在原有的数据上，进行修改

1.js：

    let that = thiswx.cloud.database().collection('content').get({success(res){console.log(res.data)that.setData({shuju:res.data.reverse()})}})

2.js

    let that = thiswx.cloud.database().collection('content').doc(that.options.xiugai_id).get({success(res){console.log(res)that.setData({title:res.data.title,content:res.data.content,})}})

      db.collection('content').doc(that.options.xiugai_id).update({data:{title:that.data.title,content:that.data.content,images: arr,cTime:that.data.cTime,openid:that.data.openid},success(res){console.log("插入成功"+res)wx.hideLoading()wx.showToast({title: '上传成功！',})setTimeout(()=>{wx.navigateBack({delta:1})},800)},fail:console.error})