相册小程序实现，结合云开发，实现多张上传和分页加载照片，删除照片无需重新加载

最新推荐文章于 2024-01-16 11:15:22 发布

cyyJames

最新推荐文章于 2024-01-16 11:15:22 发布

阅读量2.5k

点赞数 5

分类专栏：微信小程序文章标签：相册小程序微信云开发多张图片上传滚动分页加载数据删除图片策略

本文链接：https://blog.csdn.net/weixin_40562161/article/details/94355682

版权

本文介绍了如何使用微信小程序和云开发实现一个相册应用，包括多张图片上传、滚动分页加载照片、删除照片功能。通过云函数获取用户openId并存储照片，利用onShow生命周期更新照片列表，下拉刷新和上拉分页加载数据。删除照片时，无需重新加载整个列表，而是动态更新。提供了GitHub项目链接和详细实现步骤。

摘要由CSDN通过智能技术生成

最近折腾了一下微信小程序，发现小程序开发起来有它自己独特的魅力。很多常用的功能，如加载提示（wx.showLoading），都可以用一句代码实现。配合上云开发，整个开发速度得到了有力的提升。本文章，介绍如何开发一个相册小程序。

以下是小程序的GitHub链接：

https://github.com/CQJames/PhotoAlbumProgram

先看一下效果图：

上传照片效果展示，最多支持9张照片上传。
查看我的照片墙效果展示，下拉刷新重载，上拉分页加载，一次5条：
删除某张照片，无需重新加载照片列表，即删除一张，再加载一张新的（如果有的话）。

最下面的标签实现：

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "上传照片",
        "iconPath": "assets/pics1.png",
        "selectedIconPath": "assets/pics2.png"
      },
      {
        "pagePath": "pages/album/album",
        "text": "我的照片墙",
        "iconPath": "assets/self1.png",
        "selectedIconPath": "assets/self2.png"
      }
    ],
    "selectedColor": "#3399FF"
  }

app.js，初始化云，并获取用户基本信息与openId（为了之后标识是该用户的照片）。

//app.js
App({
  onLaunch: function () {
    //初始化云
    wx.cloud.init({
      env: "***",
      traceUser: true
    });
    //获取openId
    this.getOpenId();
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
      success: function (res) {
      }
    });
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  getOpenId() {
    // 获取用户openid
    let that = this;
    wx.cloud.callFunction({
      name: 'getOpenId',
      complete: res => {
        console.