小程序云开发实例（含云环境创建详解 图片 文件的上传 下载 预览 实时渲染 列表渲染 生命周期）

小程序云开发之云环境创建 图片和文件上传下载预览 生命周期 实时渲染 列表渲染（完整的项目）

Bilibili：https://www.bilibili.com/video/BV1Ue411s7vV（可以的话点赞加收藏哇 有币的投个币）

相比于国外的混乱和恐慌，国内对病毒的控制和治疗无疑好很多，但是即使是这样，对于国内绝大部分地区来讲，尤其是学生们，上学仍是遥遥无期，整天面对着铺天盖地的网课以及凌乱无章的通知，可以说是脑袋混乱的同时，效率及其低下，所以说，我们这个时候就要用到一个通知信息的整合以及文件整合的工具了。这样子不仅分类更加清晰，不会错漏通知，查阅起来也不会麻烦，效率就高了很多。

设计思路

不得不说以原生开发的方式要做这么一个东西确实不简单，因为涉及到与服务端的交互确实比较多，原生小程序的调用很容易就眼花缭乱了，但是经过这次的布道师活动后，云开发便成了我的首要想法了。云存储以及云函数的使用大大的加快了我的开发速度以及程序运行效率。

这个不仅仅是面向学生，同时也面向工作人员，学生可以看到通知以及下载文件，而同样的，只有持有运营者ID的管理人员才（已经设定好对应学院的ID，只要一发布便能在主页上看到该学院发布的通知文件，只有ID符合才可以发布，确保了数据的统一性）

技术架构

• 小程序架构

  主要就是类似原生vue的单页面开发，vue的开发方式尤其适合我这种技术小白，结构清晰，界面分明，交互简便。

• CSS框架

  由于之前不是做前端的，基本不会什么CSS的框架，所以这次主要就是用来微信原生的WEUI框架，不得不说，还是觉得原生的微信框架比较好看，简约是重点。

• 后端框架

  主要就是云函数加上触发器，这次让我感触最大的就是登录的全局验证，在多个页面都遇到了需要验证登录状态的情况该如何处理

功能展示：

• 主页的通知整合

• 通知里面的文件下载

• 以学院为单位的通知分类，适应每一个在校学生的使用，通知按时间降序排列

• 登录授权采用云函数加缓存法

• 通知发布，需要验证管理员ID（与学院对应），但是需要完整填写，发布后便能在主页上看到新的文件

部署教程

• 首先去微信公众平台注册小程序，获取小程序appid（小程序唯一标识） 网址：https://mp.weixin.qq.com/

  在设置里面可以查看：

• 然后下载开发者工具开发版，https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html

• 然后解压代码后，打开开发者工具–导入项目–填写appid–选择云开发即可打开、

  

• 点击微信开发者工具的“云开发”图标，在弹出框里点击“开通”，同意协议后，会弹出创建环境的对话框。这时会要求你输入环境名称和环境ID，以及当前云开发的基础环境配额（基础配额免费，而且足够你使用哦）。创建，会初始化环境，环境初始化成功后会自动弹出云开发控制台，这样我们的云开发服务就开通啦。

  建议你环境名称可以使用 xly、环境ID自动生成即可，当你的云开发环境出现问题的时候，你可以提供你的环境ID，云开发团队会有专人为你解答。

• 点击云开发控制台窗口里的设置图标，在环境变量的标签页找到环境名称和环境ID，

• 然后我们需要在小程序的app.js文件里填写自己的云开发环境ID：如 env: ‘xly-snoop’

• 下载Node.js：http://nodejs.cn/download/， 大家可以根据电脑的操作系统下载相应的NodeJS安装包并安装（安装时不要修改安装目录，啥也别管直接next安装即可）。打开电脑终端（Windows电脑为cmd命令提示符，Mac电脑为终端Terminal），然后逐行输入并按Enter执行下面的代码：

  node --version
  npm --version
  

  如果显示为v10.15.0以及6.11.3（可能你的版本号会有所不同），表示你的Nodejs环境已经安装成功。

• cloudfuntions文件夹图标里有朵小云，表示这就是云函数根目录，展开cloudfunctions，我们可以看到里面有login文件夹，这些就是云函数目录，使用鼠标右键其中的一个云函数目录比如login，在右键菜单中选择在终端中打开，打开后在终端中输入以下代码并按Enter回车执行：npm install

  如果显示“npm不是内部或外部命令”，你需要关闭微信开发者工具启动的终端，而是重新打开一个终端窗口，并在里面输入 cd /D 你的云函数目录进入云函数目录，比如 cd /D C:\download\tcb-project\cloudfunctions\login 进入login的云函数目录，然后再来执行npm install命令。

• 这时候会下载云函数的依赖模块，下载完成后，再右键login云函数目录，点击“创建并部署：所有文件”，这时会把本地的云函数上传到云端，上传成功后在login云函数目录图标会变成一朵小云。在开发者工具的工具栏上点击“云开发”图标会打开云开发控制台，在云开发控制台点击云函数图标，就能在云函数列表里看到我们上传好的“login”云函数啦。

  

• 然后在数据库中增加clouddisk以及tongzhi以及shoucang三个集合。打开云开发控制台，点击数据库，创建集合即可：

开源许可证标注

Apache License 2.0