关于【积分获取】的说明关于【附件下载】的说明
查看: 476|回复: 0

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

[复制链接]

495

主题

600

帖子

33万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
332897
发表于 2019-11-10 13:18:55 | 显示全部楼层 |阅读模式

登录后查看更多内容,推荐微信扫码快速登录

您需要 登录 才可以下载或查看,没有帐号?【建议使用下方微信快捷登录注册】

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

知识技能点
  • 1,小程序云开发
  • 2,小程序云存储
  • 3,小程序云数据库
  • 4,图片大图预览
  • 5,图片选择与删除
先给大家画个发布的流程图

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


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


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

发布朋友圈一,首先要创建一个小程序项目
这里就不多说了,注意:一定要用自己的appid,所以你需要注册一个小程序(个人的就行)
二,创建发布页面
我们发布页布局比较简单,一个文字输入框,一个图片展示区域,一个发布按钮。

先把发布页布局wxml贴出来
  1. <textarea class="desc" placeholder="请输入内容" bindinput="getInput" />
  2. <view class="iamgeRootAll">
  3.   <view class="imgRoot" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
  4.     <view wx:if="{{imgList.length==(index+1)&& imgList.length<8}}" class="imgItem" bindtap="ChooseImage">
  5.       <image class="photo" src="../../images/photo.png"></image>
  6.     </view>
  7.     <view wx:else class="imgItem" data-index="{{index}}">
  8.       <image class="img" src='{{item}}' mode='aspectFill'></image>
  9.       <image class="closeImg" bindtap="DeleteImg" src="../../images/close.png" data-index="{{index}}"></image>
  10.     </view>
  11.   </view>
  12.   <!-- 一开始用来占位 -->
  13.   <view wx:if="{{imgList.length==0}}" class="imgItem" bindtap="ChooseImage">
  14.     <image class="photo" src="../../images/photo.png"></image>
  15.   </view>
  16. </view>

  17. <button type="primary" bindtap="publish">发布朋友圈</button>
复制代码
这里唯一的难点,就是下面的图片分布,因为我们每次用户选择的图片个数不固定,这就要去分情况考虑了。 wx:if="{{imgList.length==(index+1)&& imgList.length<8}}"这段代码是用来控制我们发布的那个➕ 号的显示与隐藏的。
这个➕号有下面三种情况需要考虑
  • 1,没有添加任何图片时,只显示➕号
  • 2,有图片,但是不满8条时,我们需要展示图片和加号。
  • 3,有8张图片了,加号就要隐藏了。 仔细看下上面的wxml代码,代码里都有体现。
三,实现图片选择和显示功能
图片选择很简单,就用官方的api即可。实现代码如下
  1. //选择图片
  2.   ChooseImage() {
  3.     wx.chooseImage({
  4.       count: 8 - this.data.imgList.length, //默认9,我们这里最多选择8张
  5.       sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  6.       sourceType: ['album'], //从相册选择
  7.       success: (res) => {
  8.         console.log("选择图片成功", res)
  9.         if (this.data.imgList.length != 0) {
  10.           this.setData({
  11.             imgList: this.data.imgList.concat(res.tempFilePaths)
  12.           })
  13.         } else {
  14.           this.setData({
  15.             imgList: res.tempFilePaths
  16.           })
  17.         }
  18.       }
  19.     });
  20.   },
复制代码
这里单独说明下 8 - this.data.imgList.length。因为我这里规定最多只能上传8张图片。所以用了count8 ,至于后面为什么要减去this.data.imgList.length。主要是我们用户不一定一次选择8张图片,有可能第一次选择2张,第二次选择2张。。。 所以我们做选择时,每次传入的数量肯定不一样的。而这个imgList.length就是用户已经选择的图片个数。用8减去已选择的个数,就是下次最多能选择的了。
上面代码在选择成功后,会生成一个临时的图片链接。如下图所示,这个链接既可以用来展示我们已经选择的图片,后面的图片上传也要用到。
四,实现图片删除功能
我们每张图片的右上角有个删除按钮,点击删除按钮可以实现图片的删除。

这里比较简单,把代码贴给大家

  1. //删除图片
  2.   DeleteImg(e) {
  3.     wx.showModal({
  4.       title: '要删除这张照片吗?',
  5.       content: '',
  6.       cancelText: '取消',
  7.       confirmText: '确定',
  8.       success: res => {
  9.         if (res.confirm) {
  10.           this.data.imgList.splice(e.currentTarget.dataset.index, 1);
  11.           this.setData({
  12.             imgList: this.data.imgList
  13.           })
  14.         }
  15.       }
  16.     })
  17.   },
复制代码
五,发布功能
  • 1,发布之前我们需要先校验下内容和图片是否为空
  • 2,由于我们发布的时候要保证所有的图片都要上传成功,所以这里我们这么处理。
  1. const promiseArr = []
  2.     //只能一张张上传 遍历临时的图片数组
  3.     for (let i = 0; i < this.data.imgList.length; i++) {
  4.       let filePath = this.data.imgList[i]
  5.       let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正则表达式,获取文件扩展名
  6.       //在每次上传的时候,就往promiseArr里存一个promise,只有当所有的都返回结果时,才可以继续往下执行
  7.       promiseArr.push(new Promise((reslove, reject) => {
  8.         wx.cloud.uploadFile({
  9.           cloudPath: new Date().getTime() + suffix,
  10.           filePath: filePath, // 文件路径
  11.         }).then(res => {
  12.           // get resource ID
  13.           console.log("上传结果", res.fileID)
  14.           this.setData({
  15.             fileIDs: this.data.fileIDs.concat(res.fileID)
  16.           })
  17.           reslove()
  18.         }).catch(error => {
  19.           console.log("上传失败", error)
  20.         })
  21.       }))
  22.     }
  23.     //保证所有图片都上传成功
  24.     Promise.all(promiseArr).then(res => {
  25.     //图片上传成功了,才会执行到这。。。
  26.     })
复制代码
我们这里用Promise来确保所有的图片都上传成功了,才执行后面的操作。
把完整的发布代码贴给大家吧


  1. /**
  2. * 编程小石头
  3. * wehchat:2501902696
  4. */
  5. let app = getApp();
  6. Page({
  7.   data: {
  8.     imgList: [],
  9.     fileIDs: [],
  10.     desc: ''
  11.   },

  12.   //获取输入内容
  13.   getInput(event) {
  14.     console.log("输入的内容", event.detail.value)
  15.     this.setData({
  16.       desc: event.detail.value
  17.     })
  18.   },


  19.   //选择图片
  20.   ChooseImage() {
  21.     wx.chooseImage({
  22.       count: 8 - this.data.imgList.length, //默认9,我们这里最多选择8张
  23.       sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  24.       sourceType: ['album'], //从相册选择
  25.       success: (res) => {
  26.         console.log("选择图片成功", res)
  27.         if (this.data.imgList.length != 0) {
  28.           this.setData({
  29.             imgList: this.data.imgList.concat(res.tempFilePaths)
  30.           })
  31.         } else {
  32.           this.setData({
  33.             imgList: res.tempFilePaths
  34.           })
  35.         }
  36.       }
  37.     });
  38.   },
  39.   //删除图片
  40.   DeleteImg(e) {
  41.     wx.showModal({
  42.       title: '要删除这张照片吗?',
  43.       content: '',
  44.       cancelText: '取消',
  45.       confirmText: '确定',
  46.       success: res => {
  47.         if (res.confirm) {
  48.           this.data.imgList.splice(e.currentTarget.dataset.index, 1);
  49.           this.setData({
  50.             imgList: this.data.imgList
  51.           })
  52.         }
  53.       }
  54.     })
  55.   },

  56.   //上传数据
  57.   publish() {
  58.     let desc = this.data.desc
  59.     let imgList = this.data.imgList
  60.     if (!desc || desc.length < 6) {
  61.       wx.showToast({
  62.         icon: "none",
  63.         title: '内容大于6个字'
  64.       })
  65.       return
  66.     }
  67.     if (!imgList || imgList.length < 1) {
  68.       wx.showToast({
  69.         icon: "none",
  70.         title: '请选择图片'
  71.       })
  72.       return
  73.     }
  74.     wx.showLoading({
  75.       title: '发布中...',
  76.     })

  77.     const promiseArr = []
  78.     //只能一张张上传 遍历临时的图片数组
  79.     for (let i = 0; i < this.data.imgList.length; i++) {
  80.       let filePath = this.data.imgList[i]
  81.       let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正则表达式,获取文件扩展名
  82.       //在每次上传的时候,就往promiseArr里存一个promise,只有当所有的都返回结果时,才可以继续往下执行
  83.       promiseArr.push(new Promise((reslove, reject) => {
  84.         wx.cloud.uploadFile({
  85.           cloudPath: new Date().getTime() + suffix,
  86.           filePath: filePath, // 文件路径
  87.         }).then(res => {
  88.           // get resource ID
  89.           console.log("上传结果", res.fileID)
  90.           this.setData({
  91.             fileIDs: this.data.fileIDs.concat(res.fileID)
  92.           })
  93.           reslove()
  94.         }).catch(error => {
  95.           console.log("上传失败", error)
  96.         })
  97.       }))
  98.     }
  99.     //保证所有图片都上传成功
  100.     Promise.all(promiseArr).then(res => {
  101.       wx.cloud.database().collection('timeline').add({
  102.         data: {
  103.           fileIDs: this.data.fileIDs,
  104.           date: app.getNowFormatDate(),
  105.           createTime: db.serverDate(),
  106.           desc: this.data.desc,
  107.           images: this.data.imgList
  108.         },
  109.         success: res => {
  110.           wx.hideLoading()
  111.           wx.showToast({
  112.             title: '发布成功',
  113.           })
  114.           console.log('发布成功', res)
  115.           wx.navigateTo({
  116.             url: '../pengyouquan/pengyouquan',
  117.           })
  118.         },
  119.         fail: err => {
  120.           wx.hideLoading()
  121.           wx.showToast({
  122.             icon: 'none',
  123.             title: '网络不给力....'
  124.           })
  125.           console.error('发布失败', err)
  126.         }
  127.       })
  128.     })
  129.   },
  130. })
复制代码
到这里我们发布的功能就实现了,发布功能就如下面这个流程图所示。


我们最终的目的是要把文字和图片链接存到云数据库。把图片文件存到云存储。这就是云开发的方便之处,不用我们编写后台代码,就可以轻松实现后台功能。
接下来讲朋友圈展示页。

这个页面主要做的就是
  • 1,从云数据库读取数据
  • 2,展示列表数据
1,读取数据
这里读取数据挺简单,就是从云数据库读数据,这里我们做了一个排序,就是最新发布的数据在最上面。代码如下
  1. wx.cloud.database().collection('timeline')
  2.       .orderBy('createTime', 'desc') //按发布视频排序
  3.       .get({
  4.         success(res) {
  5.           console.log("请求成功", res)
  6.           that.setData({
  7.             dataList: res.data
  8.           })
  9.         },
  10.         fail(res) {
  11.           console.log("请求失败", res)
  12.         }
  13.       })
复制代码
云数据库的读取也比较简单,有疑问的同学,可参见官方文档。
2,朋友圈列表的展示
这里也比较简单,直接把布局代码贴给大家。dataList就是我们第一步请求到的数据。
  1. <block wx:for="{{dataList}}" wx:key="index">
  2.   <view class="itemRoot">
  3.     <view>
  4.       <text class="desc">{{item.desc}}</text>
  5.     </view>
  6.     <view class="imgRoot">
  7.       <block class="imgList" wx:for="{{item.fileIDs}}" wx:for-item="itemImg" wx:key="index">
  8.         <image class="img" src='{{itemImg}}' mode='aspectFill' data-img='{{[itemImg,item.fileIDs]}}' bindtap="previewImg"></image>
  9.       </block>
  10.     </view>
  11.   </view>
  12. </block>
复制代码
3,这里还有一个图片预览的功能
功能实现很简单就下面几行代码,但是我们从wxml获取组件上的数据时比较麻烦。
  1. // 预览图片
  2.   previewImg: function(e) {
  3.     let imgData = e.currentTarget.dataset.img;
  4.     console.log("eeee", imgData[0])
  5.     console.log("图片s", imgData[1])
  6.     wx.previewImage({
  7.       //当前显示图片
  8.       current: imgData[0],
  9.       //所有图片
  10.       urls: imgData[1]
  11.     })
  12.   },
复制代码
4,点击图片时通过 data- 获取图片列表和当前图片数据
我们点击组件时,可以通过data- 传递数据,但是一个点击如果像传多条数据呢。这时候可以用 data-xxx='{{[xxx,xxx]}}' 来传递数据了。如下代码
  1. <block wx:for="{{item.fileIDs}}" wx:key="item2" wx:for-item="item2">
  2.      <image  src='{{item2}}' data-img='{{[item2,item.fileIDs]}}' mode='aspectFill' bindtap="previewImg"></image>
  3. </block>

  4. //我们再js里可以接收两个数据
  5. previewImg: function(e) {
  6.     let imgData = e.currentTarget.dataset.img;
  7.     console.log("item2", imgData[0])
  8.     console.log("item.fileIDs", imgData[1])
  9.     //大图预览
  10.     wx.previewImage({
  11.       //当前显示图片
  12.       current: imgData[0],
  13.       //所有图片
  14.       urls: imgData[1]
  15.     })
  16. },
复制代码
上面代码就可以实现,一次点击,通过data- 传递多个数据到js里。
到这里我们就完整的实现了,朋友圈的发布与展示了

朋友圈展示的比较简陋,后期再抽时间做美化吧。
源码下载
游客,如果您要查看本帖隐藏内容请回复



回复

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /1 下一条



QQ|Archiver|手机版|小黑屋|小程序大全|小程序开发者论坛-汇集最优质源码、开发者教程、小程序资源

GMT+8, 2019-12-8 10:26 , Processed in 0.486491 second(s), 12 queries , File On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表