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

本文涉及的产品
注册配置 MSE Nacos/ZooKeeper,118元/月
应用实时监控服务-可观测链路OpenTelemetry版,每月50GB免费额度
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
简介: 本文将通过实战“个人相册小程序”开发,教你如何借助小程序 ·云开发 能力,提升功能开发效率,提升数据隐私保护能力。

前言

image.png

图片存储,是所有应用开发里最常见的场景之一。

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

最终效果

废话不多说,先上图
image.png
image.png
image.png
image.png

准备工作

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

    小程序架构

    image.png

创建小程序云开发环境

打开微信开发者工具,创建一个新的小程序项目,项目目录选择个人相册 Demo 的目录, AppID 填写已经申请公测资格的小程序对应的 AppID。
image.png

1 ) 点击开发者工具上的【云开发】按钮
image.png

2 ) 点击【同意】
image.png

3 ) 填写环境名称和环境 ID,点击【确定】创建环境,即可进入云开发控制台。
image.png

创建数据库

相册小程序会使用到云开发提供的数据库能力,数据库使用的是 MongoDB,需要优先创建 一个集合,方便之后使用。
1 ) 打开云开发控制台,点击菜单栏中的【数据库】,然后点击左侧边栏的【添加集合】按钮
image.png

2 ) 输入集合名称“user”,然后点击确定即可创建集合。
image.png

搭建个人相册

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

打开项目目录下的app.js文件,修改初始化云函数中的env参数为上一任务中创建的环境ID,并保存。
image.png

打开 pages/user/user.js 文件,里面是用户登录所相关的 js 逻辑,我们需要在文件中的 addUser 函数里添加保存用户信息到数据库的逻辑,代码如下:

// 获取数据库实例

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

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

复制粘贴在文件的 70 行:
image.png

保存文件后,就实现了用户登录的能力。页面会自动刷新,点击页面上的登录按钮,即可在 页面上看到自己的昵称和头像。

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

照片选择和上传的相关代码在 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 行:
image.png

保存文件后,上传的能力就完成了。文件上传后,和登录一样,我们需要将上传好的文件信 息存储在数据库中,这个逻辑在 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 行:
image.png

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

下载完整源码


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

相关文章
|
小程序 JavaScript API
小程序云开发实战六:云数据库读取的数据显示在小程序端列表里
小程序云开发实战六:云数据库读取的数据显示在小程序端列表里
172 0
|
7月前
|
前端开发 小程序
微信小程序canvas画布绘制base64图片并保存图片到相册中
微信小程序canvas画布绘制base64图片并保存图片到相册中
220 0
|
4月前
|
存储 小程序 数据可视化
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
|
5月前
|
小程序 前端开发
【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册
【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册
371 3
|
5月前
|
小程序
企业相册名片管理小程序模板
微信小程序个人名片+公司信息,增添公司信息,增添企业信息,编辑个人信息,查看更多,名片通讯录。
48 0
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的网络相册附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的网络相册附带文章和源代码部署视频讲解等
32 0
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的电子相册系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的电子相册系统附带文章和源代码部署视频讲解等
47 0
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
42 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
378 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
61 0
微信小程序更新提醒uniapp