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

本文涉及的产品
Serverless 应用引擎 SAE,800核*时 1600GiB*时
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
函数计算FC,每月免费额度15元,12个月
简介: 本文将通过实战“个人相册小程序”开发,教你如何借助小程序 ·云开发 能力,提升功能开发效率,提升数据隐私保护能力。

前言

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

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

下载完整源码


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

相关文章
|
9月前
|
存储 JSON 小程序
小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码)
小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码)
202 1
|
9月前
|
小程序 JavaScript API
小程序云开发实战六:云数据库读取的数据显示在小程序端列表里
小程序云开发实战六:云数据库读取的数据显示在小程序端列表里
127 0
|
3月前
|
前端开发 小程序
微信小程序canvas画布绘制base64图片并保存图片到相册中
微信小程序canvas画布绘制base64图片并保存图片到相册中
148 0
|
9月前
|
小程序 JavaScript 前端开发
小程序云开发实战二:小程序云开发云函数安装依赖步骤
小程序云开发实战二:小程序云开发云函数安装依赖步骤
138 0
|
1月前
|
小程序 前端开发
【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册
【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册
106 3
|
1月前
|
小程序
企业相册名片管理小程序模板
微信小程序个人名片+公司信息,增添公司信息,增添企业信息,编辑个人信息,查看更多,名片通讯录。
24 0
|
2月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的网络相册附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的网络相册附带文章和源代码部署视频讲解等
21 0
|
2月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的电子相册系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的电子相册系统附带文章和源代码部署视频讲解等
17 0
|
6天前
|
存储 小程序 JavaScript
|
6天前
|
小程序 前端开发 安全