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

知识技能点

1，小程序云开发
2，小程序云存储
3，小程序云数据库
4，图片大图预览
5，图片选择与删除

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

下面是我们真正存到数据库里的数据。

然后我们在朋友圈页只需要请求数据库里的数据，然后展示到页面就如下图所示

所以我们接下来就来实现发布和展示的功能

发布朋友圈

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

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

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

二，创建发布页面

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

先把发布页布局wxml贴出来

<textarea class="desc" placeholder="请输入内容" bindinput="getInput" />
<view class="iamgeRootAll"><view class="imgRoot" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}"><view wx:if="{{imgList.length==(index+1)&& imgList.length<8}}" class="imgItem" bindtap="ChooseImage"><image class="photo" src="../../images/photo.png"></image></view><view wx:else class="imgItem" data-index="{{index}}"><image class="img" src='{{item}}' mode='aspectFill'></image><image class="closeImg" bindtap="DeleteImg" src="../../images/close.png" data-index="{{index}}"></image></view></view><!-- 一开始用来占位 --><view wx:if="{{imgList.length==0}}" class="imgItem" bindtap="ChooseImage"><image class="photo" src="../../images/photo.png"></image></view>
</view><button type="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，由于我们发布的时候要保证所有的图片都要上传成功，所以这里我们这么处理。

  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 IDconsole.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*/
let app = 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() {let desc = this.data.desclet imgList = this.data.imgListif (!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: '发布中...',})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 IDconsole.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就是我们第一步请求到的数据。

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

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]}}’ 来传递数据了。如下代码

<block wx:for="{{item.fileIDs}}" wx:key="item2" wx:for-item="item2"><image  src='{{item2}}' data-img='{{[item2,item.fileIDs]}}' mode='aspectFill' bindtap="previewImg"></image>
</block>//我们再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里。

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

朋友圈展示的比较简陋，后期再抽时间做美化吧。

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

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

借助云开发实现小程序朋友圈的发布与展示相关推荐

小程序云开发搜索功能的实现正则_码code | 如何借助小程序云开发实现小程序支付功能...
转载来源:编程小石头我们在做小程序支付相关的开发时,总会遇到这些难题.小程序调用微信支付时,必须要有自己的服务器,有自己的备案域名,有自己的后台开发.这就导致我们做小程序支付时的成本很大. 本节就来 ...
云开发实现小程序订阅消息推送功能
步骤一:获取模板 ID 在微信公众平台手动配置获取模板 ID: 登录 https://mp.weixin.qq.com 获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用. 步骤二:请 ...
前端的date类型后台接收_腾讯高级前端工程师支招，云开发实现小程序打赏和提现云开发实践...
导语微信打赏支付和红包提现,是日常高频功能,那么基于小程序云开发,如何实现小程序的打赏支付和红包提现呢?腾讯工程师给你支招. 如何实现小程序打赏支付 1.1 小程序打赏支付功能介绍这次的打赏功能, ...
小程序朋友圈，点赞 ,评论，发布动态，功能，上传图片 -----发布动态
小程序朋友圈,点赞 ,评论,发布动态,功能,上传图片 -----发布动态分析需要实现的功能一.点击弹出输入内容的弹出框: 1.弹出输入框 2.隐藏那个底部导航条二.上传图片 1.图片要在选择后 ...
云开发谁是卧底小程序源码
云开发谁是卧底线下小游戏源码,发牌助手微信小程序源码."谁是卧底OL"是一个非常有趣,风靡全国的比拼语言表述能力.知识面与想象力的游戏. 谁是卧底OL是一款由开发商北游科技倾力打造 ...
简化后端：一篇带你走进云开发及小程序云开发的世界
目录前言小程序是什么什么是小程序的云开发目前国内云开发相对较成熟的云计算技术 1.阿里云 2.腾讯云 3.百度云 4.天翼云 5.金山云 6.Ucloud 7.华为云等公司云开发与传统开发的 ...
10行代码实现微信小程序支付功能，使用小程序云开发实现小程序支付功能（含源码
前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付api实现小程序支付功能. 传送门借助小程序云开发实现小程 ...
使用牛刀云开发微信小程序（问题集锦）
前不久,起步科技正式推出牛刀云1.0,我想这也应该是许多WeX5的忠诚追随者(我也算是其中之一吧)期望的结果了.使用牛刀云开发微信小程序,能够实现使用类似于WeX5的所见即所得组件积木搭建方式构建前端 ...
月老办事处月云开发微信小程序源码
简介: 这是一套云开发的小程序源码,月老办事处月微信云开发小程序源码,云开发无需服务器与域名就能搭建. 网盘下载地址: http://kekewl.net/0tEowy2Kznz0 图片:

借助云开发实现小程序朋友圈的发布与展示