利用小程序和小程序云开发模仿微信朋友圈，小程序发朋友圈效果

利用小程序和小程序云开发模仿微信朋友圈，小程序发朋友圈效果

timeline

利用小程序和小程序云开发模仿微信朋友圈，小程序发朋友圈效果

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

知识技能点

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

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

发布朋友圈

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

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

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

二，创建发布页面

<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"> </view> <view wx:else class="imgItem" data-index="{{index}}"> </view> </view> <!-- 一开始用来占位 --> <view wx:if="{{imgList.length==0}}" class="imgItem" bindtap="ChooseImage"> </view></view><button type="primary" bindtap="publish">发布朋友圈</button></p><p>这个 ➕ 号有下面三种情况需要考虑</p><p>1，没有添加任何图片时，只显示 ➕ 号2，有图片，但是不满8条时，我们需要展示图片和加号。3，有8张图片了，加号就要隐藏了。 仔细看下上面的wxml代码，代码里都有体现。</p><p>三，实现图片选择和显示功能</p><p>图片选择很简单，就用官方的api即可。实现代码如下</p><p>//选择图片 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 }) } } }); },</p><p>这里单独说明下 8 - this.data.imgList.length。因为我这里规定最多只能上传8张图片。所以用了count8 ,至于后面为什么要减去this.data.imgList.length。主要是我们用户不一定一次选择8张图片，有可能第一次选择2张，第二次选择2张。。。 所以我们做选择时，每次传入的数量肯定不一样的。而这个imgList.length就是用户已经选择的图片个数。用8减去已选择的个数，就是下次最多能选择的了。</p><p>四，实现图片删除功能</p><p>//删除图片 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 }) } } }) },</p><p>五，发布功能</p><p>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 => { //图片上传成功了，才会执行到这。。。 })</p><p>我们这里用Promise来确保所有的图片都上传成功了，才执行后面的操作。</p><p>把完整的发布代码贴给大家吧</p><p>/** * 编程小石头 * 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) } }) }) },})</p><p>接下来讲朋友圈展示页。</p><p>1，从云数据库读取数据2，展示列表数据</p><p>1，读取数据</p><p>这里读取数据挺简单，就是从云数据库读数据，这里我们做了一个排序，就是最新发布的数据在最上面。代码如下</p><p>wx.cloud.database().collection('timeline') .orderBy('createTime', 'desc') //按发布视频排序 .get({ success(res) { console.log("请求成功", res) that.setData({ dataList: res.data }) }, fail(res) { console.log("请求失败", res) } })</p><p>云数据库的读取也比较简单，有不会的同学，或者没有听说过小程序云开发的同学，可以去翻看下我之前发的文章，也可以看下我录的《10小时零基础入门小程序云开发》</p><p>2，朋友圈列表的展示</p><p>这里也比较简单，直接把布局代码贴给大家。dataList就是我们第一步请求到的数据。</p><p><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"> </block> </view> </view></block></p><p>3，这里还有一个图片预览的功能</p><p>功能实现很简单就下面几行代码，但是我们从wxml获取组件上的数据时比较麻烦。</p><p>// 预览图片 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] }) },</p><p><block wx:for="{{item.fileIDs}}" wx:key="item2" wx:for-item="item2"> </block>//我们再<a target="_blank" href="https://www.finclip.com/news/tags-85.html"style="font-weight:bold;color:#262626">js</a>里可以接收两个数据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] })},</p><p>到这里我们就完整的实现了，朋友圈的发布与展示了</p><p>后面我也会录制一套视频来专门讲解。敬请关注。</p><p> <strong>版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。</strong> </p></div> <div class="article_footer clear"> <div class="fr tag">标签：<a href="https://www.finclip.com/news/tags-85.html">js</a> <a href="https://www.finclip.com/news/tags-80.html">数据</a> </div> <div class="bdsharebuttonbox fl share"> <div class="share-widget fl"> <div class="social-share" data-sites="wechat,weibo, qq, qzone"></div> </div> </div> </div> <!-- 广告位ad4 --> <div class="post-navigation clear"> <div class="post-previous fl"> <span>上一篇:</span><a href="https://www.finclip.com/news/f/17864.html">混合移动开发实践：React Native +小程序</a> </div> <div class="post-next fr"> <span>下一篇:</span><a href="https://www.finclip.com/news/f/17866.html">Flutter vs ReactJS跨端方案哪家强？</a> </div> </div> </div> <div class="related_article"> <div class="box_title clear"> <span><i class="icon fa fa-paper-plane"></i>相关文章</span> </div> <div class="related_list clear"> <article class="fl"> <div class="related_img"><a href="https://www.finclip.com/news/f/87984.html"><img src="https://www.finclip.com/news/zb_users/cache/ly_autoimg/o/ODc5ODQ.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.finclip.com/news/f/87984.html" title="app开发者平台在数字化时代的重要性与发展趋势解析">app开发者平台在数字化时代的重要性与发展趋势解析</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>1334</span> <span><i class="fa fa-clock-o"></i>2022-10-08</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.finclip.com/news/f/87983.html"><img src="https://www.finclip.com/news/zb_users/cache/ly_autoimg/o/ODc5ODM.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.finclip.com/news/f/87983.html" title="uniapp开发app框架在提升开发效率中的独特优势与应用探索">uniapp开发app框架在提升开发效率中的独特优势与应用探索</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>1334</span> <span><i class="fa fa-clock-o"></i>2022-10-08</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.finclip.com/news/f/87980.html"><img src="https://www.finclip.com/news/zb_users/cache/ly_autoimg/o/ODc5ODA.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.finclip.com/news/f/87980.html" title="智慧屏第三方App安装如何提升用户体验与功能拓展">智慧屏第三方App安装如何提升用户体验与功能拓展</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>1334</span> <span><i class="fa fa-clock-o"></i>2022-10-08</span> </div> </div> </article> </div> </div> <div id="comment" class="post-comment clearfix sb br mt"> <p id="comments-title" class="c-title mb bn"><span><i class="fa fa-pencil"></i> 发表评论</span></p> <div class="compost"> <form id="frmSumbit" target="_self" method="post" action="https://www.finclip.com/news/zb_system/cmd.php?act=cmt&postid=17865&key=ab97676a6bef2e04d3303ee0d28a7649"> <input type="hidden" name="inpId" id="inpId" value="17865"/> <input type="hidden" name="inpRevID" id="inpRevID" value="0"/> <div class="com-name"> <a rel="nofollow" id="cancel-reply" href="#comments" style="display:none;">取消回复</a> </div> <div class="com-info"> <ul> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpName" id="inpName" value="" tabindex="2" placeholder="昵称(必填)"> </li> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpEmail" id="inpEmail" value="" tabindex="3" placeholder="邮箱"> </li> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpHomePage" id="inpHomePage" value="" tabindex="4" placeholder="网址"> </li> </ul> </div> <div class="com-box"> <textarea placeholder="来都来了，说点什么吧..." class="textarea" name="txaArticle" id="txaArticle" cols="5" rows="5" tabindex="1">