【小程序云开发】30分钟搭建个人相册小程序


在这里插入图片描述

✍创作者:全栈弄潮儿
🏡 个人主页: 全栈弄潮儿的个人主页
🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区
📙 专栏地址:小程序从入门到精通

人工智能福利文章

前言

在这里插入图片描述
图片存储,是所有应用开发里最常见的场景之一。

本文将通过实战“个人相册小程序”开发,教你如何借助小程序 ·云开发 能力,提升功能开发效率,提升数据隐私保护能力。

最终效果

废话不多说,先上图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

准备工作

  1. 已申请小程序 ·云开发公测资格的微信小程序账号
  2. 公测版本的微信开发者工具
  3. 下载个人相册小程序 Demo源码

小程序架构

在这里插入图片描述

创建小程序云开发环境

打开微信开发者工具,创建一个新的小程序项目,项目目录选择个人相册 Demo 的目录, AppID 填写已经申请公测资格的小程序对应的 AppID。
在这里插入图片描述

1 ) 点击开发者工具上的【云开发】按钮
在这里插入图片描述
2 ) 点击【同意】
在这里插入图片描述
3 ) 填写环境名称和环境 ID,点击【确定】创建环境,即可进入云开发控制台。
在这里插入图片描述

创建数据库

相册小程序会使用到云开发提供的数据库能力,数据库使用的是 MongoDB,需要优先创建 一个集合,方便之后使用。
1 ) 打开云开发控制台,点击菜单栏中的【数据库】,然后点击左侧边栏的【添加集合】按钮
在这里插入图片描述
2 ) 输入集合名称“user”,然后点击确定即可创建集合。
在这里插入图片描述

搭建个人相册

创建个人相册,实现照片的上传和存储

打开项目目录下的app.js文件,修改初始化云函数中的env参数为上一任务中创建的环境ID,并保存。
在这里插入图片描述
打开 pages/user/user.js 文件,里面是用户登录所相关的 js 逻辑,我们需要在文件中的 addUser 函数里添加保存用户信息到数据库的逻辑,代码如下:

// 获取数据库实例

const db = wx.cloud.database({})
// 插入用户信息

let result = await db.collection('user').add({
   data: {
      nickName: user.nickName,
      albums: []
   }
})

复制粘贴在文件的 70 行:
在这里插入图片描述
保存文件后,就实现了用户登录的能力。页面会自动刷新,点击页面上的登录按钮,即可在 页面上看到自己的昵称和头像。

实现了用户登录,接着来我们需要实现上传功能。

照片选择和上传的相关代码在 pages/photos/add.js 中,打开文件,找到 uploadPhoto 的 函数,即可看到函数接收了一个 filePath 的参数,他是用户选择照片时照片的本地临时路
径,我们需要使用云能力将图片上传到文件储存中,代码如下:

// 调用 wx.cloud.uploadFile 上传文件
return wx.cloud.uploadFile({
   cloudPath: `${Date.now()}-${Math.floor(Math.random(0, 1) * 10000000)}.png`, filePath
})

粘贴代码在文件的 66 行:
在这里插入图片描述
保存文件后,上传的能力就完成了。文件上传后,和登录一样,我们需要将上传好的文件信 息存储在数据库中,这个逻辑在 pages/photos/add.js 文件的 addPhotos 函数完成。相册 的数据存储在用户信息中,函数已经帮我们完成了对用户信息的更新,我们只需要完成用户
信息的更新即可,代码如下:

// 写入集合
db.collection('user').doc(app.globalData.id).update({
   data: {
      albums: db.command.set(app.globalData.allData.albums) 
   }
}).then(result => {
   console.log('写入成功', result)
   wx.navigateBack()
})

粘贴代码到文件的 102 行:
在这里插入图片描述
保存文件后,页面会自动刷新。至此,我们已经完成了一个简单的小程序的搭建,并将最核 心的能力使用小程序 ·云开发完成,快使用微信开发者工具或者扫描开发二维码用手机体验吧!

下载完整源码

脑筋急转弯小程序抢先体验

请添加图片描述

程序员专属工具箱

请添加图片描述

✍创作不易,求关注😄,点赞👍,收藏⭐️

评论 37
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈弄潮儿²⁰²⁵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值