微信小程序-仿微信朋友圈

微信小程序-仿微信朋友圈
作者：邱名涛
撰写时间：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+20
    if( 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.fileIDs
    console.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.tempFilePaths

        if (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.desc
    let imgbox = this.data.imgbox
    if (!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;
  },
})