微信小程序-仿微信朋友圈
作者：秋名
撰写时间：2020 年05 月05日
技术要点：使用微信云开发，实现模拟微信发布动态，上传多张图片，上拉刷新，下拉懒加载。


动态圈JS

// pages/list/list.js
const app = getApp()
const db = wx.cloud.database(); //初始化数据库
const _ = db.command
const productsCollection = db.collection('uesrs')
Page({data: {dataList: [],photoWidth: wx.getSystemInfoSync().windowWidth / 5,page: 0,},totalPages: 1,onLoad: function () {this.getImageList();this.Shuliang();},//下拉刷新onPullDownRefresh() {wx.showLoading({title: '加载中',mask: true,});this.getImageList()//调用加载方法就好wx.stopPullDownRefresh();//停止刷新setTimeout(function () {wx.hideLoading()}, 1000)},// 上拉加载onReachBottom() {wx.showLoading({title: '加载中',mask: true,});let page = this.data.page + 20;//当下拉数据，page+20if( this.data.page>=this.totalPages){wx.showToast({title: '没有下一页数据',});}//  wx.cloud.database().collection('imagelist').skip(page).get().then(res=>{productsCollection.skip(page).get().then(res => {let new_data = res.data//声明参数接收数据console.log(new_data);let old_data = this.data.dataList//声明参数接收第二次加载console.log(old_data);this.setData({dataList: old_data.concat(new_data),//显示的数据，让第二次请求的数据concat(加上新的数据)page: page}, res => {})})setTimeout(function () {wx.hideLoading()}, 1000)},// 封装查询数据getImageList() {let that = this;productsCollection.get().then(res=>{console.log(res)that.setData({dataList: res.data,})})},// 统计数量Shuliang(){productsCollection //可以where筛选数据，再统计数量.count().then(res => {console.log(res);this.setData({count: res.total})})},//去发布页qufabu() {wx.navigateTo({url: '/pages/pengyouquan/index',})},//删除图片delete2(event) {let that = this;let id = event.currentTarget.dataset.id;console.log("点击了删除按钮", id)wx.showModal({title: '警告！',content: '您确定要删除吗？',success(res) {if (res.confirm) {console.log("点击了确定按钮")wx.cloud.database().collection('uesrs') //操作那个表.doc(id) //对那条数据进行操作.remove({ //执行删除操作success(res) {console.log("删除成功", res)that.getImageList();}})} else {console.log("点击了取消按钮")}}})},LookPhoto: function (e) {console.log(e);const fileIDs = e.currentTarget.dataset.photurl.fileIDsconsole.log(fileIDs);wx.previewImage({current: fileIDs,urls: fileIDs})},})

发布动态JS

// pages/fb/fb.js
const app = getApp()
const db = wx.cloud.database(); //初始化数据库
Page({/*** 页面的初始数据*/data: {imgbox: [], //选择图片fileIDs: [], //上传云存储后的返回值desc: '',canIUse: wx.canIUse('button.open-type.getUserInfo')},onLoad(){console.log(app);},getInput(event) {console.log("输入的内容", event.detail.value)this.setData({desc: event.detail.value})},// 删除照片 &&imgDelete1: function (e) {let that = this;let index = e.currentTarget.dataset.deindex;let imgbox = this.data.imgbox;imgbox.splice(index, 1)that.setData({imgbox: imgbox});},// 选择图片 &&&addPic1: function (e) {var imgbox = this.data.imgbox;console.log(imgbox)var that = this;var n = 5;if (5 > imgbox.length > 0) {n = 5 - imgbox.length;} else if (imgbox.length == 5) {n = 1;}wx.chooseImage({count: n, // 默认9，设置图片张数sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// console.log(res.tempFilePaths)// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsif (imgbox.length == 0) {imgbox = tempFilePaths} else if (5 > imgbox.length) {imgbox = imgbox.concat(tempFilePaths);}that.setData({imgbox: imgbox});}})},//图片imgbox: function (e) {this.setData({imgbox: e.detail.value})},//发布按钮fb() {let desc = this.data.desclet imgbox = this.data.imgboxif (!desc || desc.length < 0) {wx.showToast({icon: "none",title: '请输入内容'})return}if (!imgbox || imgbox.length < 1) {wx.showToast({icon: "none",title: '请选择图片'})return}if (!app.globalData.userInfo) {wx.showToast({title: '请点击授权',icon: 'none',duration: 3000,mask: false,})wx.navigateTo({url: '/pages/shouquan/index'})return}wx.showLoading({title: '发布中...',})let promiseArr = [];for (let i = 0; i < this.data.imgbox.length; i++) {promiseArr.push(new Promise((reslove, reject) => {let item = this.data.imgbox[i];let suffix = /\.\w+$/.exec(item)[0]; //正则表达式返回文件的扩展名wx.cloud.uploadFile({cloudPath: new Date().getTime() + suffix, // 上传至云端的路径filePath: item, // 小程序临时文件路径}).then(res => {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('uesrs').add({data: {fileIDs: this.data.fileIDs,date: this.getNowFormatDate(),createTime: db.serverDate(),desc: this.data.desc,images: this.data.imgList,avatarUrl:app.globalData.userInfo.avatarUrl,//头像city:app.globalData.userInfo.city,//地址country:app.globalData.userInfo.country,//中国nickName:app.globalData.userInfo.nickName,//名称province:app.globalData.userInfo.province,//广东language:app.globalData.userInfo.language,//zh_cn},success: res => {wx.hideLoading()wx.showToast({title: '发布成功',})console.log('发布成功', res)wx.navigateTo({url: '/pages/pengyouquan/dongtai/index',})},fail: err => {wx.hideLoading()wx.showToast({icon: 'none',title: '网络不给力....'})console.error('发布失败', err)}})})Promise.all(promiseArr).then(res => {//等数组都做完后做then方法console.log("图片上传完成后再执行")this.setData({imgbox:[],})})},getNowFormatDate: function () {var date = new Date();var seperator1 = "-";var seperator2 = ":";var month = date.getMonth() + 1;var strDate = date.getDate();if (month >= 1 && month <= 9) {month = "0" + month;}if (strDate >= 0 && strDate <= 9) {strDate = "0" + strDate;}var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +" " + date.getHours() + seperator2 + date.getMinutes() +seperator2 + date.getSeconds();return currentdate;},
})