随着小程序云开发越来越成熟，现在用云开发可以做的事情也越来越多，今天就来带大家实现小程序朋友圈功能。

知识技能点

• 1，小程序云开发

• 2，小程序云存储

• 3，小程序云数据库

• 4，图片大图预览

• 5，图片选择与删除

先给大家画个发布的流程图

发布朋友圈

一，首先要创建一个小程序项目

这里就不多说了，如果你还不知道如何创建小程序项目可以去翻看下我之前的文章，也可以看下我录制的《10小时零基础入门小程序开发》

• 注意：一定要用自己的appid，所以你需要注册一个小程序（个人的就行）

二，创建发布页面

我们发布页布局比较简单，一个文字输入框，一个图片展示区域，一个发布按钮。

<textareaclass="desc"placeholder="请输入内容"bindinput="getInput"/>
<viewclass="iamgeRootAll">
<viewclass="imgRoot"wx:for="{{imgList}}"wx:key="{{index}}"bindtap="ViewImage"data-url="{{imgList[index]}}">
<viewwx:if="{{imgList.length==(index+1)&&imgList.length<8}}"class="imgItem"bindtap="ChooseImage">
<imageclass="photo"src="../../images/photo.png"></image>
</view>
<viewwx:elseclass="imgItem"data-index="{{index}}">
<imageclass="img"src='{{item}}'mode='aspectFill'></image>
<imageclass="closeImg"bindtap="DeleteImg"src="../../images/close.png"data-index="{{index}}"></image>
</view>
</view>
<!--一开始用来占位-->
<viewwx:if="{{imgList.length==0}}"class="imgItem"bindtap="ChooseImage">
<imageclass="photo"src="../../images/photo.png"></image>
</view>
</view>

<buttontype="primary"bindtap="publish">发布朋友圈</button>

这里唯一的难点，就是下面的图片分布，因为我们每次用户选择的图片个数不固定，这就要去分情况考虑了。
wx:if="{{imgList.length==(index+1)&& imgList.length<8}}"这段代码是用来控制我们发布的那个? 号的显示与隐藏的。

这个?号有下面三种情况需要考虑

• 1，没有添加任何图片时，只显示?号

• 2，有图片，但是不满8条时，我们需要展示图片和加号。

• 3，有8张图片了，加号就要隐藏了。
  仔细看下上面的wxml代码，代码里都有体现。

三，实现图片选择和显示功能

图片选择很简单，就用官方的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减去已选择的个数，就是下次最多能选择的了。

上面代码在选择成功后，会生成一个临时的图片链接。如下图所示，这个链接既可以用来展示我们已经选择的图片，后面的图片上传也要用到。

四，实现图片删除功能

我们每张图片的右上角有个删除按钮，点击删除按钮可以实现图片的删除。

//删除图片
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
})
}
}
})
},

五，发布功能

• 1，发布之前我们需要先校验下内容和图片是否为空
  

  

• 2，由于我们发布的时候要保证所有的图片都要上传成功，所以这里我们这么处理。

constpromiseArr=[]
//只能一张张上传遍历临时的图片数组
for(leti=0;i<this.data.imgList.length;i++){
letfilePath=this.data.imgList[i]
letsuffix=/\.[^\.]+$/.exec(filePath)[0];//正则表达式，获取文件扩展名
//在每次上传的时候，就往promiseArr里存一个promise，只有当所有的都返回结果时，才可以继续往下执行
promiseArr.push(newPromise((reslove,reject)=>{
wx.cloud.uploadFile({
cloudPath:newDate().getTime()+suffix,
filePath:filePath,//文件路径
}).then(res=>{
//getresourceID
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来确保所有的图片都上传成功了，才执行后面的操作。

把完整的发布代码贴给大家吧

/**
*编程小石头
* wehchat：2501902696
*/
letapp=getApp();
Page({
data:{
imgList:[],
fileIDs:[],
desc:''
},

//获取输入内容
getInput(event){
console.log("输入的内容",event.detail.value)
this.setData({
desc:event.detail.value
})
},


//选择图片
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
})
}
}
});
},
//删除图片
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
})
}
}
})
},

//上传数据
publish(){
letdesc=this.data.desc
letimgList=this.data.imgList
if(!desc||desc.length<6){
wx.showToast({
icon:"none",
title:'内容大于6个字'
})
return
}
if(!imgList||imgList.length<1){
wx.showToast({
icon:"none",
title:'请选择图片'
})
return
}
wx.showLoading({
title:'发布中...',
})

constpromiseArr=[]
//只能一张张上传遍历临时的图片数组
for(leti=0;i<this.data.imgList.length;i++){
letfilePath=this.data.imgList[i]
letsuffix=/\.[^\.]+$/.exec(filePath)[0];//正则表达式，获取文件扩展名
//在每次上传的时候，就往promiseArr里存一个promise，只有当所有的都返回结果时，才可以继续往下执行
promiseArr.push(newPromise((reslove,reject)=>{
wx.cloud.uploadFile({
cloudPath:newDate().getTime()+suffix,
filePath:filePath,//文件路径
}).then(res=>{
//getresourceID
console.log("上传结果",res.fileID)
this.setData({
fileIDs:this.data.fileIDs.concat(res.fileID)
})
reslove()
}).catch(error=>{
console.log("上传失败",error)
})
}))
}
//保证所有图片都上传成功
Promise.all(promiseArr).then(res=>{
wx.cloud.database().collection('timeline').add({
data:{
fileIDs:this.data.fileIDs,
date:app.getNowFormatDate(),
createTime:db.serverDate(),
desc:this.data.desc,
images:this.data.imgList
},
success:res=>{
wx.hideLoading()
wx.showToast({
title:'发布成功',
})
console.log('发布成功',res)
wx.navigateTo({
url:'../pengyouquan/pengyouquan',
})
},
fail:err=>{
wx.hideLoading()
wx.showToast({
icon:'none',
title:'网络不给力....'
})
console.error('发布失败',err)
}
})
})
},
})

到这里我们发布的功能就实现了，发布功能就如下面这个流程图所示。

接下来讲朋友圈展示页。

• 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)
}
})

云数据库的读取也比较简单，有不会的同学，或者没有听说过小程序云开发的同学，可以去翻看下我之前发的文章，也可以看下我录的《10小时零基础入门小程序云开发》

2，朋友圈列表的展示

这里也比较简单，直接把布局代码贴给大家。dataList就是我们第一步请求到的数据。

<blockwx:for="{{dataList}}"wx:key="index">
<viewclass="itemRoot">
<view>
<textclass="desc">{{item.desc}}</text>
</view>
<viewclass="imgRoot">
<blockclass="imgList"wx:for="{{item.fileIDs}}"wx:for-item="itemImg"wx:key="index">
<imageclass="img"src='{{itemImg}}'mode='aspectFill'data-img='{{[itemImg,item.fileIDs]}}'bindtap="previewImg"></image>
</block>
</view>
</view>
</block>

3，这里还有一个图片预览的功能

功能实现很简单就下面几行代码，但是我们从wxml获取组件上的数据时比较麻烦。

//预览图片
previewImg:function(e){
letimgData=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]}}' 来传递数据了。如下代码

<blockwx:for="{{item.fileIDs}}"wx:key="item2"wx:for-item="item2">
<imagesrc='{{item2}}'data-img='{{[item2,item.fileIDs]}}'mode='aspectFill'bindtap="previewImg"></image>
</block>

//我们再js里可以接收两个数据
previewImg:function(e){
letimgData=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里。

到这里我们就完整的实现了，朋友圈的发布与展示了

源码我已经上传到网盘，需要的同学可以加我微信2501902696获取

也可以到我公号里回复关键字 “朋友圈”获取源码

后面我也会录制一套视频来专门讲解。敬请关注。