1. Toy模板网首页
  2. > Toy博客

微信小程序——个人相册（前端）

10月前 作者：小琪.... 分类：Toy博客 阅读(40) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序——个人相册（前端）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序——个人相册（前端）

项目效果图

微信小程序——个人相册（前端）,前端,微信小程序,javascript
微信小程序——个人相册（前端）,前端,微信小程序,javascript
微信小程序——个人相册（前端）,前端,微信小程序,javascript
微信小程序——个人相册（前端）,前端,微信小程序,javascript

1.项目功能

1）用户管理，信息包括：头像、昵称，功能包括：获取微信用户信息、验证用户是否存在、修改头像、修改昵称
2）上传相片：上传图片
3）照册列表：封面图（轮播图）、照片列表、照片选择、删除照片
4）照片信息：照片信息包括 显示照片、大小（字节）、上传时间

2.项目结构

微信小程序——个人相册（前端）,前端,微信小程序,javascript

3.数据库

此项目使用MySQL8.0，创建数据库myphoto，SQL文件我已放在文章顶部。
微信小程序——个人相册（前端）,前端,微信小程序,javascript
微信小程序——个人相册（前端）,前端,微信小程序,javascript
微信小程序——个人相册（前端）,前端,微信小程序,javascript

4.创建项目

  1. 小程序项目名：myphoto
  2. 使用2.30.0版本的基础库以及不启用远程校验
  3. 准备好appid和appsecret，后端需要用到
    微信小程序——个人相册（前端）,前端,微信小程序,javascript

5.代码

5.1 项目准备

  1. app.js

// app.js
App({
  async onLaunch(){
    let res=await wx.login();
    let code=res.code;

    wx.request({
      url: this.globalData.rootPath+'/account/getUserInfo',
      data:{code},
      success:(result)=>{
        let userInfo=result.data;
        if (userInfo) {
          this.globalData.userInfo = userInfo;
          wx.redirectTo({
            url: '/pages/index/index',
          })
        } else {
          wx.redirectTo({
            url: '/pages/mine/mine'
          });
        }
      }
    })
  },
  globalData: {
    rootPath:"http://localhost:8089/myhome_war_exploded",//请修改为自己的服务根路径
    userInfo: null,
  },
})

  1. app.json

{
  "entryPagePath": "pages/index/index",
  "pages": [
    "pages/index/index",
    "pages/File/File",
    "pages/mine/mine",
    "pages/detail/datail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "selectedColor": "#33a3dc",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./pages/images/1.png",
        "selectedIconPath": "./pages/images/1-1.png"
      },
      {
        "pagePath": "pages/File/File",
        "text": "文件",
        "iconPath": "./pages/images/2.png",
        "selectedIconPath": "./pages/images/2-2.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "./pages/images/3.png",
        "selectedIconPath": "./pages/images/3-3.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

5.2 mine(用户登录界面)

页面需求：
①　打开小程序时，先从服务端根据用户的code获取用户信息，如果用户存在，打开index，不存在，跳转到mine
②　把从服务端获取的用户信息保存到全局对象中

获取用户信息
①　进入mine.js时判断全局对象中是否有用户信息的缓存，如果有，显示用户信息，如果没有，显示“获取用户信息”按钮。
②　点击按钮，获取微信用户信息，获取成功后隐藏“获取用户信息按钮”，并显示用户头像和昵称
③　保存用户信息到全局对象中
保存用户信息
①　如果是获取的微信用户信息，把用户信息保存到服务端
②　在服务端保存用户信息前需通过小程序传入的code来获取openId（用于唯一标识 每一个微信用户）。
③　数据库的主键使用UUID生成，长度为32位（去掉“-”字符）
服务端返回生成的用户ID，在小程序端，把返回的用户id添加到缓存的用户信息中
修改昵称
①　点击my视图中“修改昵称”按钮，昵称从显示状态切换为可编辑状态，同时按钮的文字修改为“确定修改”
②　修改昵称后，点击“确定修改”按钮，把修改后的昵称提交到服务端保存，并修改小程序中缓存用户信息的昵称
修改头像
①　点击头像，从本地相册中选择一张照片，确定后先替换本地头像
②　把新头像上传到服务端，并保存存放路径和访问路径保存
服务端返回访问路径到小程序，更新缓存中用户头像的路径和my中头像的路径

  1. mine.wxml

<!--pages/mine/mine.wxml-->
<view class="container">
<block wx:if="{{!hasUserInfo}}">
<button bindtap="getUserInfo">获取用户信息</button>
</block>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" style="border-radius: 50%; height:400rpx;width:400rpx;" bindtap="modifyAvatar"/>
<text style="padding-top: 100rpx; font-size: 50rpx;" hidden="{{isModify}}">{{userInfo.nickName}}</text>
<form bindsubmit="modifynickname">
  <input type="text" name="nickname" style="margin-top: 100rpx; padding: 10rpx;font-size: 50rpx; border:2rpx solid #ddd;" hidden="{{!isModify}}" value="{{userInfo.nickName}}"/>
<button form-type="submit" type="primary" style="margin-top: 100rpx;">
{{btnTitle}}
</button>
</form>
</block>
</view>

  1. mine.js

const app=getApp();
const {req} =require("../../utils/repuest")
Page({
  data:{
    hasUserInfo:false,
    isModify:false,
    btnTitle:'修改昵称',
     userInfo:{
      avatarUrl:'http://localhost:8089/myhome/photo/1.png',
      nickName:'当前用户昵称'
     }
  },
  onLoad(){
    let userInfo=app.globalData.userInfo;
    if(userInfo){
      if(!userInfo.avatarUrl.startsWith("http")){
        userInfo.avatarUrl=app.globalData.rootPath+userInfo.avatarUrl;
      }
      this.setData({
        userInfo:userInfo,
        hasUserInfo:true
      })
    }
  },
getUserInfo(){
   wx.getUserProfile({
     desc: 'desc',
     success:(res)=>{
       let userinfo=res.userInfo;
      //  userinfo.accId='';
       this.setData({
         userinfo:userinfo,
         hasUserInfo:true,
         nickName:this.data.nickName
       })
       this.saveUserInfo();
     }
   })
  },
  async saveUserInfo(){
    let userInfo=this.data.userinfo;
    let code=(await(await wx.login())).code;
    req({
      url:"/account/save",
      method:"POST",
      header:{'content-type':'application/x-www-form-urlencoded'},
      data:{...userInfo,code},
    }).then((res)=>{
      let accId=res.data;
      if(accId){
        userInfo.accId=accId;
        app.globalData.getUserInfo=userInfo;
        this.setData({userinfo:userInfo})
      }
    });
  },
  modifynickname(e){
    let isModify=this.data.isModify;
    if(!isModify){
      this.setData({
        isModify: true,
      inputPlaceholder: "请输入新昵称",
      btnTitle: "确定修改"
      })
    }else{
      this.setData({
        isModify: false,
      inputPlaceholder: "当前昵称",
      btnTitle: "修改昵称"
      })
      this.updateNickName;
    }
  },
  updateNickName(e){
    let userInfo=this.data.userInfo;
    let nickName = e.detail.value.nickName; // 假设昵称输入框的值为nickName
  let accId = userInfo.accId; // 假设用户的accid存在于userInfo中

  // 调用req方法访问服务器实现昵称修改
  req({
    url: 'http://localhost:8089/myhome/account/modifyNickName',//请修改为自己的实际端口号
    method: 'POST',
    data: {
      nickName: nickName,
      accId:accId
    },
    success: function(response) {
      // 根据服务器返回的结果进行相应的处理
      console.log('昵称修改成功', response);
      // 可以根据需要更新页面的数据或进行其他操作
    },
    fail: function(error) {
      console.log('昵称修改失败', error);
      // 可以根据需要进行错误处理或提示用户
    }
  });
  },
  uploadAvatar(filePath){
    wx.uploadFile({
      
      filePath: filePath,
      name: 'avatar',
      url:"http://localhost:8089/myhome/account/uploadAvatar",
      formData:{accId:this.data.userinfo.accId},
      success(res){
        let avatarUrl=res.data;
        if(avatarUrl){
          this.setData({
            "userinfo.avatarUrl":app.globalData.rootPath+avatarUrl
          })
        }
      }
    })
  },
  modifyAvatar(){
    wx.chooseMedia({
      count:1,
      mediaType:'image',
      sourceType:'album'
    }).then(res=>{
      let avatarUrl=res.tempFiles[0].tempFilePath;
      this.setData({
        'userinfo.avatarUrl':avatarUrl
      })
      this.uploadAvatar(avatarUrl);
    }).catch(res=>{})
  }
})

5.3 File(文件上传界面)

页面需求
①　在upload视图中“上传”按钮默认为禁用，点击按钮上方的大图标，可在本地相册中选择要上传的照片（一次只能选择一张）
②　确定后，用选中的照片替换大图标，“上传”按钮设为可用
③　点击“上传”，把照片上传到服务端
④　上传成功后，照片区恢复显示大图标，“上传”按钮为禁用

  1. File.wxml

<!--pages/File/File.wxml-->
<view style="padding:40rpx;box-sizing: border-box;display: block;">
<view style="text-align: center;color: #f00;">点击以下图片选择相片</view>

<image src="{{filePath}}" style="width: 100%;" mode="{{mode}}" bindtap="selectPhoto"></image>

<button bindtap="uploadPhoto" disabled="{{!isSelectImg}}" type="primary">上传</button>
</view>

  1. File.js

//获取应用实例  
var app = getApp();
Page({
  data: {
    filePath:"/pages/images/2-2.png",
    mode:"center",
    isSelectImg:false
  },
  selectPhoto(){
    wx.chooseMedia({
      count:1,
      mediaType:'image',
      sourceType:'album'
    }).then(res=>{
      let filePath = res.tempFiles[0].tempFilePath;
      this.setData({
        filePath:filePath,
        isSelectImg:true
      })
    }).catch(res=>{})
},
uploadPhoto(){
  let _this = this;
  wx.uploadFile({
    filePath: this.data.filePath,
    name: 'file',
    url: getApp().globalData.rootPath+'/photo/upload',
    formData:{accId: getApp().globalData.userInfo.accId},
    success:res=>{
      console.log(res);
      if(res.data.replaceAll("\"","") =="1"){
        wx.showToast({
          title: '上传成功',
        })
      }else{
        wx.showToast({
          title: '上传失败',
          icon:"error"
        })
      }
      this.setData({
        filePath:"/pages/images/2-2.png",
        mode:"center",
        isSelectImg:false
      })
    }
  })
},
});

5.4 index(首页)

页面需求：
①　在进入index页面时首先判断缓存中是否有用户信息
②　如果不没有，页面跳转到my，并每隔1秒轮询一次，直到用户信息存在后停止轮询
③　如果用户存在，从服务端此用户的照片（一次最多10张，最后上传的照片显示在最前面）
在页面中显示（一排显示两张）
触底分页
①　当照片滚动到视图最下方时，从服务端加载新的照片（和上一轮的照片数量相同）
②　新加载的照片追加到已显示照片的后方
开始加载前显示加载动画，加载完成后结束加载动画
下拉刷新
①　开启index页面的下拉刷新功能
在页面的下拉刷新事件回调中清空已显示的所有照片，重新从服务端加载照片
长按显示复选框和操作栏
①　在照片上长按，在每个照片的左上角显示复选框，并在视图的底部显示操作栏
②　复选框默认时都为未选中
③　操作栏中的操作包括“取消”、“全选”、“删除”三项
取消操作
①　点击操作栏中的“取消”完成以下操作
②　清空所有选中
③　隐藏复选框
④　隐藏操作栏
勾选和取消勾选、全选操作
①　点击照片上的复选框，如果勾选，记录选中的照片ID
②　如果是取消勾选，从记录中删除对应的照片ID
③ 点击“全选”，勾选所有复选框，并记录所有被选中的照片ID
删除
①　点击操作栏中“删除”，删除所有被勾选的照片
②　如果未选择要删除的照片，提示“请勾选要删除的照片”
③　删除前需询问“确定要删除选中的照片吗？”，确定后方能删除
删除成功后刷新照片

  1. index.wxml

<swiper indicator-dots="{{true}}" current="{{currentIndex}}" autoplay>
<swiper-item wx:for="{{covers}}" wx:key="*this">
<image src="{{item.accessUrl}}" style="width: 100%;" mode="widthFix"></image>
</swiper-item>
</swiper>
<scroll-view style="padding: 60rpx 40rpx;box-sizing: border-box;">
<view style="display: flex;flex-wrap: wrap;">
<view wx:for="{{photoList}}" wx:key="*this" wx:for-item="photo" style="flex:none;width:50%;height:300rpx;box-sizing:border-box;padding:6rpx;position:relative;">
<checkbox mark:photoId="{{photo.photoId}}" mark:index="{{index}}" style="position: absolute;" hidden="{{!delSelect}}" bindtap="checkedPhoto" checked="{{selectList[index]}}"/>
<image src="{{photo.photoAccessUrl}}" mode="" style="width: 100%;height: 100%;" bindlongpress="enabelDelSelect" bindtap="showImage" mark:index="{{index}}"/>
</view>
</view>
</scroll-view>

<button loading="{{loadding}}" style="background: #fff;"></button>
<view style="position: fixed;bottom: 0;width: 100%;display: flex;justify-content: space-between;box-sizing: border-box;padding: 10rpx 20rpx;" wx:if="{{delSelect}}">
<text bindtap="cancelSelect" style="color: #00f;text-decoration: underline;">取消</text>
<text bindtap="selectAll" style="color: #00f;text-decoration: underline;">全选</text>
<text bindtap="deletePhoto" style="color: #00f;text-decoration: underline;">删除</text>

</view>

  1. index.js

// index.js
// 获取应用实例
const app = getApp()
const {req}=require("../../utils/repuest")

Page({
  data: {
    covers:[],
    photoList:[],
    delSelect:false,
    selectList:[],
    pageNum:1,
    loadding:true,
    currentIndex:0
  },
  selectPhotoList(){
    this.setData({loadding:true});
    req({
      url:"/photo/list",
      data:{
        accId:app.globalData.userInfo.accId,
        pageNum:this.data.pageNum
      }
    }).then(res=>{
      let photoList = res.data;
      if(photoList.length > 0){
        for(let photo of photoList){
          photo.photoAccessUrl = app.globalData.rootPath+photo.photoAccessUrl;
        }
        this.setData({
          photoList:this.data.photoList.concat(photoList),
          pageNum:this.data.pageNum+1
        })
      }else{
        // wx.showToast({
        //   title: '图片以全部加载',
        // })
      }
      this.setData({
        loadding:false
      })
    })
  },

  onLoad() {
    let time = setInterval(()=>{
      let userInfo = app.globalData.userInfo;
      if(userInfo){
        clearInterval(time);
        this.selectCover();
        this.selectPhotoList();
      }
    },1000);
  },
  onPullDownRefresh(){
    this.setData({
      covers:[],
      photoList:[],
      pageNum:1,
      currentIndex:0
    });
    this.selectCover();
    this.selectPhotoList();
  },
  //在照片上长按，在每个照片的左上角显示复选框，并在视图的底部显示操作栏
  enabelDelSelect(){
    this.setData({
      delSelect:true
    });
  },
  /*
①　点击操作栏中的“取消”完成以下操作
②　清空所有选中
③　隐藏复选框
隐藏操作栏
*/
  cancelSelect(){
    this.setData({
      selectList:[],
      delSelect:false
    });
  },
  onReachBottom(){
    console.log(this.data.pageNum);
    this.setData({loadding:true});
    this.selectPhotoList();
  },
  checkedPhoto(e){
    let index = e.mark.index;
    let photoId = e.mark.photoId;
    let selectList = this.data.selectList;
    if(selectList[index]){
      selectList[index]=undefined;
    }else{
      selectList[index]=photoId;
    }
    this.setData({
      selectList:selectList
    })
  },
  selectAll(){
    let selectList = [];
    let photoList = this.data.photoList;
    for(let photo of photoList){
      selectList.push(photo.photoId);
    }
    this.setData({
      selectList:selectList
    });
  },
  deletePhoto(){
    let selectList = this.data.selectList;
    let deleteList = '';
    for(let id of selectList){
      if(id){
        deleteList+='&photoIds='+id;
      }
    }
    if(deleteList == ''){
      wx.showToast({
        title: '请勾选要删除的照片',
      })
    }else{
      wx.showModal({
        title: '确定要删除选中的照片吗？',
        content: '',
        complete: (res) => {
          if (res.cancel) {
              
          }
          if (res.confirm) {
            req({
              url:"/photo/delete?photoIds=''"+deleteList,
              method:"GET"
            }).then(res=>{
              this.setData({
                photoList:[],
                pageNum:1
              });
              this.cancelSelect();
              this.selectPhotoList();
            })
          }
        }
      })
    }
  },
  showImage(e){
    let index = e.mark.index;
    let photoList = this.data.photoList;
    wx.navigateTo({
      url: '/pages/detail/datail?photoList='+JSON.stringify(photoList)+"&index="+index+"&coverLength="+this.data.covers.length,
    })
  },
  selectCover(){
    req({
      url:'/cover/list?accId='+app.globalData.userInfo.accId,
      method:'GET',
    }).then(res=>{
      let cover = res.data;
      console.log(cover);
      this.setData({
        covers:cover,
        currentIndex:0
      })
    })
  },
  onShow(){
        // this.selectCover();
        // this.selectPhotoList();
  }
})

5.5 detail(照片详情界面)

页面需求：
①　在index中点击照片，跳转到照片详情页
②　显示点击的照片和照片的大小和上传时间
③　可通过在照片上左、右滑动切换照片（以及照片的信息），可切换的照片范围为index中所显示的所有照片
设置封面
①　在detail视图中，如果上方显示的照片是封面，默认勾选“设为封面”复选框；
②　取消复选框的勾选，把状态传递到服务端，删除对应的封面设置
③　点击复选框勾选，把状态传递到服务端，添加此照片为封面
④　最多只能添加四个封面，如果勾选后此照片为第五个封面，提示“最多只能设置四个封面”，自动取消选中
如果设置和取消成功提示“封面设置成功”
查询封面
①　进入index页面时查询此用户的封面（轮播图），并显示，封面最多四张，自动播放。
②　在detail页面中设置封面时，更新此页面的封面列表

  1. detail.wxml

<view class="container">
<image src="{{photo.photoAccessUrl}}" style="padding: 60rpx;width: 100%;height: 400rpx;" bindtouchstart="start" bindtouchmove="end"/>
</view>
<view style="text-align: left;padding-top: 10rpx;">
<checkbox bindtap="fm" checked="{{isFm}}">设置封面</checkbox>
<text style="text-align: left;">\n图片大小：{{photo.photoSize}}</text>
<text>\n上传时间：{{uploadTime}}</text>
</view>

  1. detail.js

const app = getApp()
const {req}=require("../../utils/repuest")
Page({
  /**
   * 页面的初始数据
   */
  data: {
      photoList:[],
      index:0,
      photo:{},
      isFm:false,
      uploadTime:'',
      startPoint:0,
      startFlag:false,
      cover:{},
      coverLength:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(res) {
      let photoList = JSON.parse(res.photoList);
      let index = res.index;
      let coverLength = res.coverLength;
      let photo = photoList[index];
      let uploadTime = new Date(Number.parseInt(photo.uploadTimestamp));
      let s = uploadTime.toLocaleString();
      this.setData({
        photoList:photoList,
        photo:photo,
        uploadTime:s,
        index:index,
        coverLength:coverLength
      });
      this.selectCover();
  },
  selectCover(){
    req({
      url:'/cover/getOne?accId='+app.globalData.userInfo.accId+"&photoId="+this.data.photo.photoId,
      method:'GET'
    }).then(res=>{
      if(res.data){
        this.setData({
          cover:res.data,
          isFm:true
        });
      }else{
        this.setData({
          isFm:false
        });
      }
    })
  },
  fm(){
    console.log(this.data.isFm);
    if(!this.data.isFm){
      console.log(this.data.coverLength);
      if(this.data.coverLength<4){
        req({
          url:'/cover/save',
          method:'POST',
          header:{
            "Content-Type":"application/x-www-form-urlencoded"
        },
          data:{accId:app.globalData.userInfo.accId,
                photoId:this.data.photo.photoId,
                accessUrl:this.data.photo.photoAccessUrl
          }
        }).then(res=>{
          this.setData({
            coverLength:Number.parseInt(this.data.coverLength)+1
          });
          this.selectCover();
        })
      }else{
        wx.showM({
          title: '封面只能设置四个',
        })
      }
    }else{
      req({
        url:'/cover/delete?coverId='+this.data.cover.coverId,
        method:'GET'
      }).then(res=>{
        this.setData({
          coverLength:Number.parseInt(this.data.coverLength)-1
        });
        this.selectCover();
      })
    }
  },
  start(e){
    this.setData({
      startPoint:e.touches[0].clientX,
      startFlag:true
    })
  },
  end(e){
    let point = this.data.startPoint;
    if(((point-e.touches[e.touches.length-1].clientX)>50) && this.data.startFlag){
      let index = this.data.index;
      console.log(index);
      if(index-1<0){
        index = this.data.photoList.length-1;
      }else{
        index = index-1;
      }
      let photo = this.data.photoList[index];
      let uploadTime = new Date(Number.parseInt(photo.uploadTimestamp));
      let s = uploadTime.toLocaleString();
      this.setData({
        photo:photo,
        index:index,
        uploadTime:s,
        startFlag:false,
        startPoint:0
      });
    }else if(((point-e.touches[e.touches.length-1].clientX)<-50) && this.data.startFlag) {
      let index = this.data.index;
      console.log(index);
      if(index+1>this.data.photoList.length-1){
        index = 0;
      }else{
        index = index+1;
      }
      let photo = this.data.photoList[index];
      let uploadTime = new Date(Number.parseInt(photo.uploadTimestamp));
      let s = uploadTime.toLocaleString();
      this.setData({
        photo:photo,
        index:index,
        uploadTime:s,
        startFlag:false,
        startPoint:0
      });
    }
    this.selectCover();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

总结

作为一个微信小程序个人相册的开发者，我对这个项目有一些自我总结和反思。

首先，我认为成功的部分在于我能够充分理解用户的需求，并且提供了一个简单易用的相册功能。用户可以方便地上传照片、创建相册、查看照片信息等等。

其次，我采用了适当的设计和布局，使得小程序界面美观而且用户友好。我尽量减少了复杂的操作流程，让用户能够轻松地浏览和管理他们的照片。同时，我也在界面上保持了一定的一致性，使得用户可以很快熟悉和掌握小程序的使用方式。

然而，也存在一些需要改进的地方。首先，我认识到在小程序的功能方面还有一些局限性。例如，目前我只实现了基本的照片管理功能，但是还有很多其他可能的功能可以加入，比如照片编辑、滤镜效果、批量操作、分享照片、下载照片等等。这些功能可以提升用户的体验，并增加小程序的吸引力。

其次，我需要进一步改进小程序的性能和加载速度。尽管我尽力优化了代码和资源，但是随着用户上传的照片数量增加，小程序的加载速度可能会变慢。我需要继续寻找更好的方法来提高性能，以确保用户能够流畅地使用小程序。

最后，用户反馈对于改进小程序也非常重要。我会积极收集用户的意见和建议，并根据他们的反馈来改进小程序的功能和界面设计。通过不断改进和迭代，我相信我可以打造出一个更好的微信小程序个人相册。

总而言之，开发微信小程序个人相册是一次很有意义的经历。我学到了很多关于用户需求、设计和性能优化的知识，并且锻炼了我的开发技能。通过不断改进和学习，我希望能够为用户提供更好的相册体验，并且不断完善和扩展这个小程序。

后端介绍
最后献上整体项目源码：个人相册（前端）文章来源地址https://www.toymoban.com/news/detail-774292.html

到了这里，关于微信小程序——个人相册（前端）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包