：
背景
TodoList应用程序是一款适合零基础的学生快速入门的应用程序。一行代码即可完成TodoList的本地化。如果你想通过网络同步你的Todo数据，并在多个设备之间实时共享，云开发搭建只需要100条线。
体验地址：https://acc.cloudbase.vip/todo/
本项目适合零基础的用户体验使用，通过一定的模块化手段整合整体编码。如果想了解更多，请掌握js、html、css等编程技术，并独立分析模块中的代码（均为入门级原生代码）
如果不想执行以下步骤看代码，可以直接点击一键部署：一键部署
：
一、构建本地化TodoList
在本地任意位置新建一个文本文件，在文件中填写以下内容：
script src='https://acc.cloudbase.vip/todo/src/todo.js' charset='utf-8'/script 复制保存，后缀改为html，命名为index.html 【注：mac用户建议使用无格式文本编辑器]
用浏览器打开这个html文件，浏览器显示如下，这是正常的。
这样，您就用一行代码完成了本地化Todo应用程序的构建。通过此应用程序，您可以按Enter 键添加新的待办事项，也可以查看已完成的项目、修改项目内容、删除项目；当页面关闭并再次加载时，待办事项仍将保留。
：
二、将本地TodoList发布，给其他人使用
我们只在本地建立了这个应用程序网站，如何与其他人共享这个应用程序？
我们需要将这个应用网站发布到云开发静态网站托管
打开云开发控制台，新建按量付费环境（如果已有按量付费环境，直接使用，跳过此步骤）
按量付费环境创建后，一般会自动激活静态网站托管服务。如果未激活，请点击激活。
单击“上传文件”并上传上一步中的index.html
上传后，点击上图配置信息中的【默认域名】即可在公网环境下访问Todo应用网站。
默认域名可以让您快速验证您的业务。如果您需要正式提供网站服务，请绑定您注册的自定义域名。
：
三、为Todo应用构建后台服务
上述行代码实现的单一应用网站只能在本地记录Todo，更换设备时无法同步。接下来我们构建一个后台服务来满足同步需求。
打开云开发控制台，找到上一步的环境，打开数据库，新建一个todo集合，如下图：
打开环境-登录授权，并启用邮箱登录，如下图：
打开后，点击右侧【配置发件人】，参考配置QQ邮箱进行配置。
然后点击右侧【应用配置】，填写应用名称，如下图
配置完成后，复制保存你的云环境ID，填写到下一步代码中
打开之前本地构建的index.html，填写内容如下
脚本src='https://acc.cloudbase.vip/todo/src/todo.js' charset='utf-8'/scriptscript src='https://acc.cloudbase.vip/todo/src/login\_util.js' charset='utf -8'/scriptscript src='https://imgcache.qq.com/qcloud/tcbjs/1.10.8/tcb.js'/scriptscript 让uid=null; const app=tcb.init({ env: '替换自己的云开发环境ID' }) const auth=app.auth({ persistence: 'local' }); const db=app.database(); window.onload=function () { LO.init(); TODO.init(); } LO.Done=function () { uid=app.auth().hasLoginState().user.uid; db.collection('todo').doc(uid).get().then(res={ if (res .data.length==0) { db.collection('todo').add({ \_id: uid, 列表： TODO.todo, 时间： new Date() }).then(res={ console.log( res); watchtodo(); }) } else { console.log(res); TODO.todo=res .data[0].list; TODO.todoinit(); watchtodo(); } }) app.callFunction({ name:'todo\_getNumber' }).then(res={ document.getElementById('model'). innerHTML+=`p class='bottom-des'共有${res.result}人使用云开发TODO/p` }) } TODO.itemChange=function (id, type, des) { if (type==='add') { if (des !=null) { app.uploadFile({ cloudPath: `todo/${uid}/${TODO.todo[id].file}`, filePath: des }).then(( result)={ console.log(result) TODO.todo[id].file=result.fileID updatetodo() }); } else { updatetodo() } } else if (type==='delete') { if (TODO.todo[id].file !=null) { app.deleteFile({ fileList: [TODO.todo[id].文件] }).then((结果)={ 删除TODO.todo[id] console.log(结果) updatetodo() }); } else { 删除TODO.todo[id] updatetodo() } } else { updatetodo( ) } } TODO.downLoadfile=function (file) { app.downloadFile({ fileID: file }) } function updatetodo() { db.collection ('todo').doc(uid).update({ list: db.command .set(TODO.todo), time: new Date() }).then(res={ }).catch(e={ console .log(e); }) } function watchtodo() { db.collection(' todo').where({ \_id: uid }).watch({ onChange: (snapshot)={ if (snapshot.msgType !='INIT\_EVENT') { TODO.todo=snapshot.docs[0].list ; TODO.todoinit(); } }, onError: (error)={alert('远程数据库监控失败！'); } }) ; } /script 复制并保存文件，并重新上传到静态网站托管，这样就构建了一个有后台服务的Todo应用，并且仍然打开配置信息中的【默认域名】（如果有缓存） ，可以在链接后添加**？123**等随机数字），打开如下图：
应用中引入的登录模块自动显示登录框，输入邮箱地址和密码，如果未注册，则直接发送注册邮件。
此时进入邮箱查看注册邮件，如下图：
点击验证链接，跳转至云开发验证页面。验证成功后显示如下：
此时返回应用网站，10秒后按钮变为可点击状态，直接点击登录即可登录成功，登录框消失。
之后，您可以使用您的电子邮件地址和密码登录。
如果想显示有多少人使用TODO应用，可以将项目目录functions中的todo_getNumber文件夹上传为云函数
：
写在最后
本实用项目采用模块化方式构建，直接突出云开发的开发步骤，更加直观。如果你想探索Todo模块的内容，可以自行解压并阅读代码。
login_util模块是作者搭建的一个简单的登录插件，可以实现简单的登录操作，并提供自定义方法。默认为云端开发的邮箱登录方式，因此请确保邮箱登录配置正确并在没有自定义时打开。
todo.js 公开接口：
TODO. 待办事项； //Todo内容json，可以直接根据规则更改TODO.todoinit(); //刷新并显示待办事项TODO.itemChange(id,type,des); //监控todo列表变化[id , type, description] TODO.downLoadfile(file) //下载文件触发，上传时可以修改todo列表文件的值复制login_util简单登录窗口插件，默认邮箱登录，泄漏接口：
LO.custom //是否自定义登录方式，邮箱登录默认为false LO.init() //初始化方法调用打开登录框，默认邮箱登录会自动判断，如果登录触发LO .done(), 登录框不会初始化LO.done() //登录完成时触发，默认登录可用，自定义无效LO.close() //关闭登录框LO.onClose()//监听关闭LO.onLogin(obj ) //监听登录按钮，需要LO.custom=true才能生效LO.setBtn(text,disable) //设置登录按钮LO.setDes(text,style)//设置描述复制：
产品介绍
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生集成开发环境和工具平台。为开发者提供高可用、自动弹性伸缩的后端云服务，包括计算、存储、托管等Serverless能力，可在云端集成开发多端应用（小程序、公众号、Web应用、 Flutter客户端等），帮助开发者统一构建和管理后端服务和云资源，避免应用开发过程中繁琐的服务器搭建和运维，开发者可以专注于业务逻辑的实现，以较低的成本发展门槛更高，效率更高。
开放云开发：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档：https://cloud.tencent.com/product/tcb?from=12763
技术文档：https://cloudbase.net?from=10004
技术交流加Q群：601134960
关注微信公众号获取最新资讯【腾讯云开发】