“云开发基础之相册小程序”的版本间的差异
2513177689(讨论 | 贡献) |
2513177689(讨论 | 贡献) |
||
第7行: | 第7行: | ||
<p><strong>特点</strong></p> | <p><strong>特点</strong></p> | ||
[[文件:https://i.loli.net/2020/09/20/RAiuc2gT4d9OJUL.png]] | [[文件:https://i.loli.net/2020/09/20/RAiuc2gT4d9OJUL.png]] | ||
− | + | ||
<h2>相册小程序</h2> | <h2>相册小程序</h2> | ||
<p><strong>介绍</strong></p> | <p><strong>介绍</strong></p> |
2020年9月20日 (日) 10:46的版本
相册小程序
什么是云开发
·云开发[CloudBase〕是云端一体化的后端云服务,采用serverless架构,免去了移动应用构建中繁琐的服务器搭建和运维。使用云开发可以快速蔺建完整的小程序/小游戏、Web、移动Hpp等应用。
特点
文件:Https://i.loli.net/2020/09/20/RAiuc2gT4d9OJUL.png
相册小程序
介绍
<img src="https://i.loli.net/2020/09/20/C7buJLpFBcGfYez.png" referrerpolicy="no-referrer" alt="image-20200920171421682">
进入github
<a href='https://github.com/TencentCloudBase/Cloudbase-Examples' target='_blank' class='url'>https://github.com/TencentCloudBase/Cloudbase-Examples</a>
找到
<img src="https://i.loli.net/2020/09/20/jyC5vuNPRkfBeG4.png" referrerpolicy="no-referrer" alt="image-20200920172929889">
下载
<img src="https://i.loli.net/2020/09/20/GCROJmIhrUa9tgV.png" referrerpolicy="no-referrer" alt="image-20200920172953258">
在微信开发者工具导入新项目
<img src="https://i.loli.net/2020/09/20/sPlSaWCpV8OKBvD.png" referrerpolicy="no-referrer" alt="image-20200920173513935">
开通云开发
<img src="https://i.loli.net/2020/09/20/c2SzIb1aOTrBLns.png" referrerpolicy="no-referrer" alt="image-20200920173600133">
创建数据库 testuser
<img src="https://i.loli.net/2020/09/20/2chIw1AezS5NlGk.png" referrerpolicy="no-referrer" alt="image-20200920173953848">
复制环境i d 到 app.js 中
<img src="https://i.loli.net/2020/09/20/BOmkYZ9foAg5jpd.png" referrerpolicy="no-referrer" alt="image-20200920174153602">
<img src="https://i.loli.net/2020/09/20/SwEgRBZTMFiXkhU.png" referrerpolicy="no-referrer" alt="image-20200920174303216">
然后在 pages/user 里 user.js 的 addUser函数里填写 代码
<img src="https://i.loli.net/2020/09/20/ZKSG8CXuQ16MJBz.png" referrerpolicy="no-referrer" alt="image-20200920175345892">
<code class='language-javascript' lang='javascript'>const db = wx.cloud.database(); let result = await db.collection('testuser').add({ data:{ nickName:user.nickName, albums:[] } }) </code>点击登录 实现登录
<img src="https://i.loli.net/2020/09/20/mHozByMdbG7hi1Y.png" referrerpolicy="no-referrer" alt="image-20200920175445032">
<img src="https://i.loli.net/2020/09/20/4Gw8WzxIE9tBJuN.png" referrerpolicy="no-referrer" alt="image-20200920175453757">
数据库查看 已存在
<img src="https://i.loli.net/2020/09/20/XDO3t4FA2USmfZB.png" referrerpolicy="no-referrer" alt="image-20200920175511018">
在 pages/photos/add.js里 添加
<code>uploadPhoto (filePath) { // 在此插入上传图片代码 return wx.cloud.uploadFile({ cloudPath:`${Date.now()}-${Math.floor(Math.random(0,1)*1000000)}.png`, filePath }) }, </code><code>db.collection('testuser').doc(app.globalData.id).update({ data:{ albums:db.command.set(app.globalData.allData.albums) } }).then(result => { console.log("写入成功"); wx.navigateBack({ }) }) </code>创建相册
<img src="https://i.loli.net/2020/09/20/K7XGobzF5Rw29xC.png" referrerpolicy="no-referrer" alt="image-20200920183139353">
创建成功
<img src="https://i.loli.net/2020/09/20/pzeIi87lvKtTWRk.png" referrerpolicy="no-referrer" alt="image-20200920183405463">
上传测试
<img src="https://i.loli.net/2020/09/20/Ea1vRftCL7zMwbl.png" referrerpolicy="no-referrer" alt="image-20200920183444828">
测试成功
<img src="https://i.loli.net/2020/09/20/vXtjUGHdq6PQfmh.png" referrerpolicy="no-referrer" alt="image-20200920183507114">