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

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

创新互联专注于企业全网整合营销推广、网站重做改版、赤峰网站定制设计、自适应品牌网站建设、H5高端网站建设、商城开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为赤峰等各大城市提供网站开发制作服务。

知识技能点

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

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

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

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

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

发布朋友圈

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

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

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

二，创建发布页面

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

先把发布页布局wxml贴出来

<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></code></pre>
<p>这里唯一的难点，就是下面的图片分布，因为我们每次用户选择的图片个数不固定，这就要去分情况考虑了。<br> wx:if="{{imgList.length==(index+1)&& imgList.length<8}}"这段代码是用来控制我们发布的那个➕ 号的显示与隐藏的。<br> <img src="/upload/otherpica41/9162.jpg" data-ke-src="/upload/otherpica41/9162.jpg" alt="借助云开发实现小程序朋友圈的发布与展示"> </p><p>这个➕号有下面三种情况需要考虑</p><ul><li>1，没有添加任何图片时，只显示➕号</li><li>2，有图片，但是不满8条时，我们需要展示图片和加号。</li><li>3，有8张图片了，加号就要隐藏了。<br> 仔细看下上面的wxml代码，代码里都有体现。</li></ul><h2>三，实现图片选择和显示功能</h2><p>图片选择很简单，就用官方的api即可。实现代码如下</p>
<pre><code> //选择图片
  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
          })
        }
      }
    });
  },</code></pre>
<p>这里单独说明下 8 - this.data.imgList.length。因为我这里规定最多只能上传8张图片。所以用了count8 ,至于后面为什么要减去this.data.imgList.length。主要是我们用户不一定一次选择8张图片，有可能第一次选择2张，第二次选择2张。。。<br> 所以我们做选择时，每次传入的数量肯定不一样的。而这个imgList.length就是用户已经选择的图片个数。用8减去已选择的个数，就是下次最多能选择的了。</p><p>上面代码在选择成功后，会生成一个临时的图片链接。如下图所示，这个链接既可以用来展示我们已经选择的图片，后面的图片上传也要用到。<br> <img src="/upload/otherpica41/9166.jpg" data-ke-src="/upload/otherpica41/9166.jpg" alt="借助云开发实现小程序朋友圈的发布与展示"> </p><h2>四，实现图片删除功能</h2><p>我们每张图片的右上角有个删除按钮，点击删除按钮可以实现图片的删除。<br> <img src="/upload/otherpica41/9169.jpg" data-ke-src="/upload/otherpica41/9169.jpg" alt="借助云开发实现小程序朋友圈的发布与展示"><br> 这里比较简单，把代码贴给大家</p>
<pre><code> //删除图片
  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
          })
        }
      }
    })
  },</code></pre>
<h2>五，发布功能</h2><ul><li>1，发布之前我们需要先校验下内容和图片是否为空<br> <img src="/upload/otherpica41/9170.jpg" data-ke-src="/upload/otherpica41/9170.jpg" alt="借助云开发实现小程序朋友圈的发布与展示"> </li><li><p>2，由于我们发布的时候要保证所有的图片都要上传成功，所以这里我们这么处理。</p>
<pre><code>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 => {
//图片上传成功了，才会执行到这。。。
})</code></pre>
<p>我们这里用Promise来确保所有的图片都上传成功了，才执行后面的操作。</p><h4>把完整的发布代码贴给大家吧</h4>
<pre><code>/**
* 编程小石头
* 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)
    }
  })
})
},
})</code></pre>
<p>到这里我们发布的功能就实现了，发布功能就如下面这个流程图所示。<br> <img src="/upload/otherpica41/9173.jpg" data-ke-src="/upload/otherpica41/9173.jpg" alt="借助云开发实现小程序朋友圈的发布与展示"><br> 我们最终的目的是要把文字和图片链接存到云数据库。把图片文件存到云存储。这就是云开发的方便之处，不用我们编写后台代码，就可以轻松实现后台功能。</p></li></ul><h2>接下来讲朋友圈展示页。</h2><p><img src="/upload/otherpica41/9174.jpg" data-ke-src="/upload/otherpica41/9174.jpg" alt="借助云开发实现小程序朋友圈的发布与展示"><br> 这个页面主要做的就是</p><ul><li>1，从云数据库读取数据</li><li>2，展示列表数据</li></ul><h2>1，读取数据</h2><p>这里读取数据挺简单，就是从云数据库读数据，这里我们做了一个排序，就是最新发布的数据在最上面。代码如下</p>
<pre><code>wx.cloud.database().collection('timeline')
      .orderBy('createTime', 'desc') //按发布视频排序
      .get({
        success(res) {
          console.log("请求成功", res)
          that.setData({
            dataList: res.data
          })
        },
        fail(res) {
          console.log("请求失败", res)
        }
      })</code></pre>
<p>云数据库的读取也比较简单，有不会的同学，或者没有听说过小程序云开发的同学，可以去翻看下我之前发的文章，也可以看下我录的《10小时零基础入门小程序云开发》</p><h2>2，朋友圈列表的展示</h2><p>这里也比较简单，直接把布局代码贴给大家。dataList就是我们第一步请求到的数据。</p>
<pre><code><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></code></pre>
<h2>3，这里还有一个图片预览的功能</h2><p>功能实现很简单就下面几行代码，但是我们从wxml获取组件上的数据时比较麻烦。</p>
<pre><code> // 预览图片
  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]
    })
  },</code></pre>
<h2>4,点击图片时通过 data- 获取图片列表和当前图片数据</h2><p>我们点击组件时，可以通过data- 传递数据，但是一个点击如果像传多条数据呢。这时候可以用 data-xxx='{{[xxx,xxx]}}' 来传递数据了。如下代码</p>
<pre><code><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]
    })
},</code></pre>
<p>上面代码就可以实现，一次点击，通过data- 传递多个数据到js里。</p><h3>到这里我们就完整的实现了，朋友圈的发布与展示了</h3><p><img src="/upload/otherpica41/9176.jpg" data-ke-src="/upload/otherpica41/9176.jpg" alt="借助云开发实现小程序朋友圈的发布与展示"><br> 朋友圈展示的比较简陋，后期再抽时间做美化吧。</p><p>源码我已经上传到网盘，需要的同学可以加我微信2501902696获取<br> <img src="/upload/otherpica41/9181(1).jpg" data-ke-src="/upload/otherpica41/9181(1).jpg" alt="借助云开发实现小程序朋友圈的发布与展示"> </p><p>后面我也会录制一套视频来专门讲解。敬请关注。</p>            
            
                        <br>
            分享文章：借助云开发实现小程序朋友圈的发布与展示            <br>
            本文网址：<a href="http://cqcxhl.cn/article/ishhsc.html">http://cqcxhl.cn/article/ishhsc.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/gooec.html">C++创建一棵哈夫曼树以及输出其哈夫曼编码-创新互联</a>
                </li><li>
                    <a href="/article/goojh.html">Ubuntu中重置MySQLRoot密码的具体步骤-创新互联</a>
                </li><li>
                    <a href="/article/googc.html">云计算的发展史是怎样的-创新互联</a>
                </li><li>
                    <a href="/article/goopg.html">gor引流测试中间件golang代码添加注释-创新互联</a>
                </li><li>
                    <a href="/article/ihhhs.html">如何使用php中html标签不显示的设置-创新互联</a>
                </li>        </ul>
    </div>
</div>
<div class="footer">
    <div class="footer_content">
        <div class="footer_content_top clear">
            <div class="content_top_share fl">
                <div><img src="/Public/Home/img/logo.png"></div>
                <div class="top_share_content">
                    <dd>分享至：</dd>
                    <dt class="bdsharebuttonbox clear" id="share">
                        <a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a>
                        <a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a>
                        <a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a>
                        <a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a>
                    </dt>
                    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
                </div>
            </div>
            <div class="content_top_left fl clear">
                <div class="top_left_list fl">
                    <dd><a href="/about/">关于我们</a></dd>
                    <dt>
                        <a href="/about/#gsjj">公司简介</a>
                        <a href="/about/#fzlc">发展历程</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/service/">服务项目</a></dd>
                    <dt>
                        <a href="/service/">高端网站建设</a>
                        <a href="/miniprogram/">小程序开发</a>
                        <a href="/service/app.html">APP开发</a>
                        <a href="/service/yingxiao.html">网络营销</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/jianzhan/">建站知识</a></dd>
                    <dt>
                        <a href="/jianzhan/2.html">网站建设</a>
                        <a href="/jianzhan/3.html">网站设计</a>
                        <a href="/jianzhan/4.html">网站制作</a>
                        <a href="/jianzhan/5.html">小程序</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/contact/">联系我们</a></dd>
                    <dt>
                        <a href="/contact/#lxwm">公司地址</a>
                        <a href="/contact/#rczp">人才招聘</a>
                    </dt>
                </div>
            </div>
            <div class="content_top_right addressR fr">
                <div class="top_right_title addressf_title">
                    <a href="javascript:;" class="on">成都</a>
                    <a href="javascript:;">重庆</a>
                </div>
                <div class="top_right_content addressf">
                    <div class="right_content_li on">
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">电话：028-86922220</dt>
                        </div>
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt>
                        </div>
                    </div>
                    <div class="right_content_li">
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">电话：028-86922220</dt>
                        </div>
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">地址：重庆市南岸区弹子石腾龙大道58号2栋21-6</dt>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer_content_copyright clear">版权所有：成都创新互联科技有限公司重庆分公司
        <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">渝ICP备2021005571号-4</a>
    </div>
</div>

<!--浮窗-->
<div class="FloatingWindow clear">
    <a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt><span>在线</span>咨询</dt>
        </div>
    </a>
    <a href="javascript:;" class="FloatingWindow_list fr">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt>服务热线</dt>
        </div>
        <div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div>
    </a>
    <a href="javascript:;" class="FloatingWindow_list fr STop">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt>TOP</dt>
        </div>
    </a>
</div>
<script src="/Public/Home/js/jquery-1.8.3.min.js"></script>
<script src="/Public/Home/js/comm.js"></script>
<script src="/Public/Home/js/wow.js"></script>
<script src="/Public/Home/js/common.js"></script>
</body>
</html>
<script>
    $(".con img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
</script>