Flutter开发App的未来及其在各行业的应用潜力分析
715
2023-11-13
微信小程序实现发动态功能的示例代码
−目录一、设计所需要的表1、文章表2、评论表3、点赞表二、发布动态1、文本区2、最终发表动态效果3、发布动态代码
最近做了一个校园拍卖小程序，想在里面添加一个类似校园圈功能，现在来一步一步实现。
一、设计所需要的表
1、文章表
文章表很简单，就类似朋友圈，一个文字内容，一个图片数组
2、评论表
3、点赞表
二、发布动态
1、文本区
光标有点问题，回车换行时光标和文字被埋在下面了
解决，给textarea设置一个最大高度，max-length,把scroll-view改为view ，因为textarea本身自带滚动
2、最终发表动态效果
3、发布动态代码
1、publisherArticle.wxml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<view class="main">
<!--文字区-->
<view class="text" >
<textarea fixed="true" auto-height placeholder="这一刻的想法..." bindinput="setText" style="margin: 10rpx;width: 96%;max-height: 90%;"/>
</view>
<!--图片区-->
<view class="img">
<block wx:for="{{selectImgs}}" wx:key="index">
<image src="{{item}}" style="height: 220rpx;width: 220rpx;margin: 10rpx;"></image>
</block>
<image wx:if="{{selectImgs.length != 9}}" src="/image/addImg.png" bindtap="selectImg" style="height: 80rpx;width: 80rpx;padding: 70rpx;background-color: rgb(241, 236, 236);margin-top: 10rpx;"></image>
</view>
<view class="publish" bindtap="publish">发表</view>
</view>
2、publisherArticle.wxss
3、publishArticle.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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)
})
},
}
到此这篇关于微信小程序实现发动态功能的文章就介绍到这了,更多相关小程序发动态内容请搜
您可能感兴趣的文章:微信小程序仿朋友圈发布动态功能详解dll动态库的开发与调用及文件的读写小程序
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~