您现在的位置是：网站首页> 编程资料编程资料
微信小程序实现发动态功能的示例代码_javascript技巧_
2023-05-24
424人已围观
简介 微信小程序实现发动态功能的示例代码_javascript技巧_
最近做了一个校园拍卖小程序，想在里面添加一个类似校园圈功能，现在来一步一步实现。
一、设计所需要的表
1、文章表
文章表很简单，就类似朋友圈，一个文字内容，一个图片数组
2、评论表
3、点赞表
二、发布动态
1、文本区
光标有点问题，回车换行时光标和文字被埋在下面了
解决，给textarea设置一个最大高度，max-length,把scroll-view改为view ，因为textarea本身自带滚动
2、最终发表动态效果
3、发布动态代码
1、publisherArticle.wxml
发表
2、publisherArticle.wxss
.main{ position: fixed; top: 10rpx; bottom: 10rpx; left: 0rpx; right: 0rpx; z-index: 0; } .text{ position: fixed; top: 20rpx; left: 10rpx; right: 10rpx; height: 23%; background-color: white; border-radius: 10rpx; z-index: 1; } .img{ position: fixed; display: flex; flex-wrap: wrap; top: 23%; left: 10rpx; right: 10rpx; bottom: 15%; background-color: white; border-radius: 10rpx; z-index: 1; } .publish{ position: fixed; z-index: 1; top: 88%; width: 11%; left: 40%; background-color: rgb(8, 88, 32); color: white; font-size: 40rpx; border-radius: 30px; padding: 10rpx 30rpx; box-shadow: 2px 2px 10px rgb(16, 46, 33); }3、publishArticle.js
Page({ data: { selectImgs: null, text: '', uploadImgs: [] }, selectImg(){ wx.chooseImage({ count: 8, success: (res) => { this.setData({ selectImgs: res.tempFilePaths }) } }) }, setText(e){ let text = e.detail.value console.log(text) this.setData({ text: text }) }, //发表动态 publish(){ this.uploadImages().then((resolve, reject) => { wx.showLoading({ title: '发布中' }) setTimeout(() => {}, 500) let imagesUrl = this.data.uploadImgs //云存储的图片列表 let text = this.data.text wx.cloud.database().collection('article').add({ data: { content: text, imagesUrl: imagesUrl }, success: (res) => { wx.hideLoading({ success: (res) => { wx.showToast({ title: '发表成功', }) wx.navigateBack({ delta: 1, }) }, }) } }) }) }, //上传图片到云存储 uploadImages() { let _this = this return new Promise(function (resolve, reject) { function upload(index) { var picnum = index+1 wx.showLoading({ title: '上传第' + picnum + '张图片' }) wx.cloud.uploadFile({ cloudPath: 'articleImgs/' + new Date().getTime() + '_' + Math.floor(Math.random() * 1000) + '.jpg', //给图片命名 filePath: _this.data.selectImgs[index], //本地图片路径 success: (res) => { _this.data.uploadImgs[index] = res.fileID wx.hideLoading({ success: (res) => {}, }) //判断是否全部上传 if (_this.data.selectImgs.length - 1 <= index) { console.log('已全部上传') resolve('success') return } else { console.log(index) upload(index + 1) } }, fail: (err) => { reject('error') wx.showToast({ title: '上传失败，请重新上传', type: 'none' }) } }) } upload(0) }) }, } 到此这篇关于微信小程序实现发动态功能的文章就介绍到这了,更多相关小程序发动态内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章:
相关内容
- vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案_vue.js_
- Vue深入理解插槽slot的使用_vue.js_
- React如何使用axios请求数据并把数据渲染到组件_React_
- JavaScript圣杯布局与双飞翼布局实现案例详解_javascript技巧_
- react中useState使用:如何实现在当前表格直接更改数据_React_
- Vue常用的修饰符的作用详解_vue.js_
- Vue虚拟DOM详细介绍_vue.js_
- node.js报错:npm ERR code EPERM的解决过程_node.js_
- React前端渲染优化--父组件导致子组件重复渲染的问题_React_
- Vue3 使用v-md-editor如何动态上传图片的方法实现_vue.js_
