【小程序云开发】30分钟搭建个人相册小程序
文章目录
- 前言
- 最终效果
- 准备工作
- 小程序架构
- 创建小程序云开发环境
- 创建数据库
- 搭建个人相册
- 写在最后
前言
图片存储，是所有应用开发里最常见的场景之一。
本文将通过实战“个人相册小程序”开发，教你如何借助小程序 ·云开发 能力，提升功能开发效率，提升数据隐私保护能力。
最终效果
废话不多说，先上图
准备工作
- 已申请小程序 ·云开发公测资格的微信小程序账号
- 公测版本的微信开发者工具
- 下载个人相册小程序 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 行：
保存文件后，页面会自动刷新。至此，我们已经完成了一个简单的小程序的搭建，并将最核 心的能力使用小程序 ·云开发完成，快使用微信开发者工具或者扫描开发二维码用手机体验吧！
下载完整源码
写在最后
✨原创不易，希望各位大佬多多支持。
【小程序云开发】30分钟搭建个人相册小程序相关推荐
- 微信小程序云开发 · 从0搭建商业级校园跑腿平台（已开源）
微信小程序云开发 · 从零搭建商业级校园跑腿平台 小秃僧 新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...
- 基于微信小程序云开发的医院体检预约小程序源码，医院体检预约小程序源码，实现体检预约管理、体检预约凭证、预约数据查看导出 版权申诉
功能介绍 对于医院体检科室和体检机构而言,每天的体检人数分布也不太均衡,若很多人集中在 某些天体检,会出现「医生强度大.体检人排队久」的问题.采用体检预约小程序进行体检预约数管理,体检人可预约到更广的 ...
- 用小程序·云开发两天搭建mini论坛丨实战
笔者最近涉猎了小程序相关的知识,于是利用周末时间开发了一款类似于同事的小程序,深度体验了小程序云开发模式提供的云函数.数据库.存储三大能力.关于云开发,可参考文档:小程序·云开发. 个人感觉云开发带来 ...
- 基于小程序·云开发构建高考查分小程序丨实战
2019高考报名人数达到了 1031 万的新高,作为一名三年前参考高考的准程序猿,赶在高考前,加班加点从零开始做了一款高考查分小程序,算是一名老学长送给学弟学妹们的高考礼.上线仅 1 个月,用户数就突 ...
- 小程序·云开发实战 - 校园约拍小程序
创意来源于生活,之所以开发这个校园约拍小程序,是因为在摄影选修课上常听老师抱怨外出写生老找不到模特,许多大学生都想拥有一套专属自己记忆的摄影作品,记录下不会磨灭的美好回忆,可如何找到让自己满意的摄影师 ...
- “小程序 · 云开发”重磅上线，让小程序开发更高效！
近日,"小程序 · 云开发"解决方案正式上线,该方案可以为小程序开发者提供完整的云端支持. 通过简化复杂的后端和运维操作,让即便不具备一定后端知识的开发者,也能高效开发出一款高质量 ...
- 基于微信小程序云开发实现考研题库小程序项目（完整版）
今天手把手的带大家实现一款答题类的题库小程序,如果着急的话,可以直接去看文末源码.下载与项目部署. 考研题库小程序云开发实战,完整版提供给大家学习.题库小程序,基于云开发的微信答题小程序,软件架构是微 ...
- 小程序云开发_借助小程序云开发制作校园导览小程序丨实战
导语 偌大校园,寻路犯难.没关系!本文教你借助云开发制作精美校园导览小程序,带你走遍校园的每个角落,发现不一样的风景. 背景 刚入学的新生要想不迷失在偌大的校园,除了依靠不怎么可靠的路边标识外,总会收 ...
- 小程序·云开发 - 仿瑞幸咖啡小程序（一） - 从入门到辞职
最近新开一个瑞幸咖啡小程序的项目.刚好看到小程序有新的功能 - 云开发,就开始边做边学了. 首先,开启一个新的项目的时候,勾选云开发. 新建完项目之后,小程序就可以进行云开发服务了. 需要注意的是,新 ...
最新文章
- 基于SSVEP-EOG的混合BCI用于机械臂控制
- 学习笔记（十三）——vim编辑与linux命令
- 数据库SQL面试题七则
- instanceof java list_Java：Instanceof和泛型
- php模块安装 pdo_mysql_关于php插件pdo_mysql的安装
- 程序员精美简历Top榜—面试必备
- Java知识点总结（Java容器-ArrayList）
- antd vue关闭模态对话框_Vue.extend 登录注册模态框
- 什么是hypernetworks? hypernetworks简单介绍
- 七月算法机器学习 9 推荐系统与应用 小案例
- 不解之缘———我与Linux系统
- Windows平板 区分当前是鼠标点击还是触摸
- python 问卷调查系统_GitHub - JukieChen/surveySystem-1: 问卷调查系统
- python随机分组的思路_一个关于随机分组需求的Python方案与思考
- 关于购买域名的一些建议
- 数电快速入门（三）（卡诺图化简法的介绍）
- java 反编译软件 推荐
- HTL5 JavaScript里的DOM节点简单思维导图（元素节点，文本节点，节点的增删改查） 高清可打印
- 如何把计算机组成原理、操作系统、数据结构和计算机网络融会贯通，相互联系起来？
- Linux学习（一）虚拟机安装linux资源，linux目录结构，购买阿里云服务器远程登陆linux，下载安装并使用Xshell与Xftp
热门文章