专栏首页小程序云开发入门借助云开发实现小程序朋友圈的发布与展示
原创

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

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

  • 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,发布之前我们需要先校验下内容和图片是否为空
    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来确保所有的图片都上传成功了,才执行后面的操作。把完整的发布代码贴给大家吧/** * 编程小石头 * 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.desc let imgList = 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: '发布中...', }) 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 => { 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) } }) }) }, })到这里我们发布的功能就实现了,发布功能就如下面这个流程图所示。
    我们最终的目的是要把文字和图片链接存到云数据库。把图片文件存到云存储。这就是云开发的方便之处,不用我们编写后台代码,就可以轻松实现后台功能。
  • 2,由于我们发布的时候要保证所有的图片都要上传成功,所以这里我们这么处理。

接下来讲朋友圈展示页。

这个页面主要做的就是

  • 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里。

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序地图学习之获取位置 获取经纬度 获取地名 获取地址

    我们在做小程序开发时,难免会遇到地图相关的开发,而小程序已经为我们提供的比较完善的地图组件。我们只需要调用相关的api就可以实现大致的功能。如:获取经纬度,获取...

    编程小石头
  • 微信小程序弹出用户授权弹窗,微信小程序引导用户授权,获取位置经纬度

    首先检验用户是否授权位置信息的权限“scope.userLocation”,如果有授权,我们就可以直接去获取用户的位置经纬度了。如果没有授权,我们就弹窗引导用户...

    编程小石头
  • 微信小程序里长按识别二维码

    可以看到,我们成功的在小程序里实现了长按识别二维码的功能。下面就教大家如何一步步实现吧。因为官方的规格还没有明确说支持这个功能,所以这个功能有可能随时被禁。这...

    编程小石头
  • 借助云开发实现小程序朋友圈的发布与展示丨实战

    这里就不多说了,注意:一定要用自己的appid,所以你需要注册一个小程序(个人的就行)

    腾讯云开发TCB
  • Spring5参考指南:组件扫描

    上一篇文章我们讲到了annotation-config配置,它主要用于bean内部的属性注入。而bean本身则需要通过配置的方式来定义。如果想使用配置的方式来定...

    程序那些事
  • 微信小程序处理pages的函数比app.js先执行

    我需要先执行app.js里wx.login获取到参数再赋值给页面接口, 问题 页面函数比app.js要先执行 使用promise app.js wxR...

    任我行RQ
  • springboot通过javaconfig配置jackson

    路过君
  • 微信小程序版本自动更新

    当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

    一觉睡到小时候
  • 小程序的页面生成图片分享朋友圈

    1.网络图片要下载到本地,就是getimginfo和promise,具体技术细节我也不晓得。然后就是本地图片的地址和网络图片的地址不同。本地的要加../../i...

    hotqin888
  • 小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

    hotqin888

扫码关注云+社区

领取腾讯云代金券