云开发基础之相册小程序

 

相册小程序

 

什么是云开发

·云开发[CloudBase〕是云端一体化的后端云服务，采用serverless架构，免去了移动应用构建中繁琐的服务器搭建和运维。使用云开发可以快速蔺建完整的小程序/小游戏、Web、移动Hpp等应用。

特点

600px

相册小程序

介绍

进入github

<a href='https://github.com/TencentCloudBase/Cloudbase-Examples' target='_blank' class='url'>https://github.com/TencentCloudBase/Cloudbase-Examples</a>

找到

<文件:Xiangce01.png \ 600px

下载

在微信开发者工具导入新项目

开通云开发

创建数据库 testuser

复制环境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">