导语
把朋友圈装进小程序需要几步？云开发给你答案！本文教你用云开发实现小程序版“朋友圈”的发布与展示~
随着小程序云开发越来越成熟，现在用云开发可以做的事情也越来越多，今天就来带大家实现小程序朋友圈功能。
知识技能点：
1、小程序云开发
2、小程序云存储
3、小程序云数据库
4、图片大图预览
5、图片选择与删除
流程图
首先往数据库中放入你想展示的数据。
然后我们在朋友圈页只需要请求数据库里的数据，然后展示到页面就如下图所示所以我们接下来就来实现发布和展示的功能。
一、发布朋友圈
1、首先要创建一个小程序项目
注册小程序账号并创建小程序项目。
2、创建发布页面
我们发布页布局比较简单，一个文字输入框，一个图片展示区域，一个发布按钮。
发布页布局wxml的代码如下：
class="desc" placeholder="请输入内容" bindinput="getInput" />
class="iamgeRootAll">
class="imgRoot" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
class="photo" src="../../images/photo.png">
wx:else class="imgItem" data-index="{{index}}">
class="img" src='{{item}}' mode='aspectFill'>
class="closeImg" bindtap="DeleteImg" src="../../images/close.png" data-index="{{index}}">
wx:if="{{imgList.length==0}}" class="imgItem" bindtap="ChooseImage">
class="photo" src="../../images/photo.png">
type="primary" bindtap="publish">发布朋友圈
这里唯一的难点，就是下面的图片分布，因为我们每次用户选择的图片个数不固定，这就要去分情况考虑了。
wx:if="{{imgList.length==(index+1)&& imgList.length<8}}" 这段代码是用来控制我们发布的那个“+” 号的显示与隐藏的。
这个“+”号有下面三种情况需要考虑：
1、没有添加任何图片时，只显示“+”号
2、有图片，但是不满8条时，我们需要展示图片和加号。
3、有8张图片了，加号就要隐藏了。仔细看下上面的wxml代码，代码里都有体现。
3、实现图片选择和显示功能
图片选择很简单，就用官方的api即可。实现代码如下：
//选择图片
ChooseImage() {
wx.chooseImage({
count: 8 - this.data.imgList.length, //默认9,我们这里最多选择8张
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
console.log("选择图片成功", res)
if (this.data.imgList.length != 0) {
this.setData({
imgList: this.data.imgList.concat(res.tempFilePaths)
})
} else {
this.setData({
imgList: res.tempFilePaths
})
}
}
});
},
这里单独说明下 8 - this.data.imgList.length。因为我这里规定最多只能上传8张图片。所以用了count8 ,至于后面为什么要减去this.data.imgList.length。主要是我们用户不一定一次选择8张图片，有可能第一次选择2张，第二次选择2张，以此类推。所以我们做选择时，每次传入的数量肯定不一样的。而这个imgList.length就是用户已经选择的图片个数。用8减去已选择的个数，就是下次最多能选择的了。
上面代码在选择成功后，会生成一个临时的图片链接。如下图所示，这个链接既可以用来展示我们已经选择的图片，后面的图片上传也要用到。
4、实现图片删除功能
我们每张图片的右上角有个删除按钮，点击删除按钮可以实现图片的删除。
这里比较简单，把代码贴给大家：
//删除图片
DeleteImg(e) {
wx.showModal({
title: '要删除这张照片吗？',
content: '',
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
this.data.imgList.splice(e.currentTarget.dataset.index, 1);
this.setData({
imgList: this.data.imgList
})
}
}
})
},
5、发布功能
1、发布之前我们需要先校验下内容和图片是否为空。
2、由于我们发布的时候要保证所有的图片都要上传成功，所以这里我们这么处理。
const promiseArr = []
//只能一张张上传 遍历临时的图片数组
for (let i = 0; i < this.data.imgList.length; i++) {
let filePath = this.data.imgList[i]
let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正则表达式，获取文件扩展名
//在每次上传的时候，就往promiseArr里存一个promise，只有当所有的都返回结果时，才可以继续往下执行
promiseArr.push(new Promise((reslove, reject) => {
wx.cloud.uploadFile({
cloudPath: new Date().getTime() + suffix,
filePath: filePath, // 文件路径
}).then(res => {
// get resource ID
console.log("上传结果", res.fileID)
this.setData({
fileIDs: this.data.fileIDs.concat(res.fileID)
})
reslove()
}).catch(error => {
console.log("上传失败", error)
})
}))
}
//保证所有图片都上传成功
Promise.all(promiseArr).then(res => {
//图片上传成功了，才会执行到这。。。
})
我们这里用Promise来确保所有的图片都上传成功了，才执行后面的操作。
到这里我们发布的功能就实现了，接下来讲朋友圈展示页如何实现。
二、朋友圈展示页
这个页面主要做的就是：
1、从云数据库读取数据。
2、展示列表数据。
1、读取数据
这里读取数据挺简单，就是从云数据库读数据，这里我们做了一个排序，就是最新发布的数据在最上面。代码如下：
wx.cloud.database().collection('timeline')
.orderBy('createTime', 'desc') //按发布视频排序
.get({
success(res) {
console.log("请求成功", res)
that.setData({
dataList: res.data
})
},
fail(res) {
console.log("请求失败", res)
}
})
2、朋友圈列表的展示
这里也比较简单，直接把布局代码贴给大家。dataList就是我们第一步请求到的数据。
wx:for="{{dataList}}" wx:key="index">
class="itemRoot">
class="desc">{{item.desc}}
class="imgRoot">
class="imgList" wx:for="{{item.fileIDs}}" wx:for-item="itemImg" wx:key="index">
class="img" src='{{itemImg}}' mode='aspectFill' data-img='{{[itemImg,item.fileIDs]}}' bindtap="previewImg">
3、图片预览
功能实现很简单就下面几行代码，但是我们从wxml获取组件上的数据时比较麻烦。
// 预览图片
previewImg: function(e) {
let imgData = e.currentTarget.dataset.img;
console.log("eeee", imgData[0])
console.log("图片s", imgData[1])
wx.previewImage({
//当前显示图片
current: imgData[0],
//所有图片
urls: imgData[1]
})
},
4、点击图片时通过 data- 获取图片列表和当前图片数据
我们点击组件时，可以通过data- 传递数据，但是一个点击如果像传多条数据呢。这时候可以用 data-xxx='{{[xxx,xxx]}}' 来传递数据了。代码如下：
wx:for="{{item.fileIDs}}" wx:key="item2" wx:for-item="item2">
src='{{item2}}' data-img='{{[item2,item.fileIDs]}}' mode='aspectFill' bindtap="previewImg">
//我们再js里可以接收两个数据
previewImg: function(e) {
let imgData = e.currentTarget.dataset.img;
console.log("item2", imgData[0])
console.log("item.fileIDs", imgData[1])
//大图预览
wx.previewImage({
//当前显示图片
current: imgData[0],
//所有图片
urls: imgData[1]
})
},
上面代码就可以实现，一次点击，通过data- 传递多个数据到js里。
到此，一个模拟朋友圈小程序就此完成了。
三、获取源码
☁
更多精彩
点击下方图片即可阅读
云开发，不止于快
云开发
Tencent CloudBase
点击在看让更多人发现精彩
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
