初步认识“作为WXML和WXSS桥梁”的选择器，以及颜色与字体。 名片初始代码，点此领取：https://share.weiyun.com/5ASBOw3 [视频]

本课程将微信开发者工具调试器及常用调试面板，教会大家在各种场景下灵活使用 console 面板、Wxml 面板、source 面板等内容，高效开发。 [视频]

重磅打造的小程序学习路径课，从微信小程序到微信云开发体系化的学习，带来更加顺畅的学习体验。

[图片] 微信小程序已经成为一种新的应用形态，为众多开发者带来日趋完善的生态服务和不断丰富的开放能力，特别是小程序开放的云开发能力，可以帮助开发者快速构建微信小程序的后端服务。 本次微信小程序应用开发赛（以下简称“大赛”）的参赛作品应为具有适用场景和对应功能的原创性微信小程序，期望参赛队伍以微信小程序平台以及微信小程序云开发等技术和服务为基础，设计和开发具有实际需求或未来前景的创新应用。对于使用小程序云开发实现的大赛作品（以下简称“云开发小程序”），将独立保证入围赛区决赛名额，并在全国决赛中单独设立云开发奖项。 为了帮助更多在校学生理解小程序云开发相关知识，并更加规范、高效地打造云开发小程序应用，特开设小程序云开发训练营，通过体系化的课程内容，较为完整地介绍小程序云开发的系列知识，完整参与还可获得由腾讯云云开发提供的学习礼品。 *课程内容完全基于官方的开放文档和教程进行设置，无任何新增或特殊内容，不影响大赛的正常报名、参赛和作品提交等全部流程。 *建议收藏本页以便后续学习。 一、课程设置： 1、学习指引：小程序云开发知识分等级梳理（以文档为主，更多教程与视频可前往微信学堂或CloudBase社区官网） （1）小程序云开发基础能力（在微信小程序中可以基础使用） 【文档】 云数据库基本使用 云存储基本使用 云函数基本使用 云调用的认识和基本使用 【视频】 云开发基础等 （2）小程序云开发进阶能力（在小程序之外的延伸场景中使用） 使用CMS内容管理实现数据管理 使用静态网站托管制作微信公众号H5 未登录模式的使用（小程序分享朋友圈） 云函数进阶用法：灰度/版本管理，高级日志，定时触发器 数据库实时数据推送 （3）小程序云开发高阶能力（对云开发更加熟悉） 云托管的认识和使用 数据库安全规则的学习 跨账号环境共享的认识 深度理解云函数运行原理 云开发接入微信支付的学习 云开发HTTP API的学习 了解第三方服务商模式开发 更多学习资源：微信学堂、CloudBase社区官网 2、互动直播 4月7日 晚19:00 小程序云开发基础能力讲解 查看回放 4月14日 晚19:00 小程序云开发进阶能力讲解 查看回放 4月21日 晚19:00 小程序云开发高阶能力&案例讲解 查看回放 直播地址：腾讯云云开发 视频号 [图片] *回放视频将沉淀在微信学堂、腾讯云云开发同名B站账号。 二、参与方式 大赛进行期间，可随时自主学习。完成结课作业，还可获得额外奖励： 结课作业：基于课程内容和自身的学习成果，输出一份云开发学习报告，内容需与云开发相关，主题不限（学习心得/参赛经历感悟/建议反馈/实战案例分享等均可），形式不限（文章/视频等均可），提交至 CloudBase@tencent.com。 具体提交模板： 邮件名称：【云开发训练营】姓名 + 学校名称 + 题目 邮件正文需包含： 主题：学习心得/参赛经历感悟/建议反馈/实战案例分享/ 其他正文内容：如有视频可注明视频地址。参与大赛的小程序 AppID（用于验证是否参赛）队友信息（用于验证是否参赛）联系方式：微信号/QQ号收货信息（用于邮寄礼品）个人简历（建议以 PDF 附件形式发送）作业提交日期：2021年6月1日至2021年7月15日（非规定日期内发送无效） 提交的结课作品，要求不得出现： 违反相关法律、法规、政策规定以及微信相关规则的行为； 涉嫌抄袭或侵犯他人知识产权的行为； 涉及不健康、淫秽、色情或毁谤第三方的内容。 三、奖品设置 在大赛中提交云开发小程序作品，且在规定时间内提交结课作业的同学可获得如下奖品： 参与即送： 小程序云开发技术书《云开发：小程序开发原来如此简单》 优秀参与者可获得： 云开发布道师申请资格 云开发CloudBase实习面试机会（具体岗位视具体情况而定） 优秀参与者还可在如下奖品中任选一个，每种奖品数量有限送完即止（按照结课作业提交顺序进行选择）： [图片] *图片仅供参考，实际奖品选择与发放将视官方周边更新与存货情况进行适当调整

笔者最近涉猎了小程序相关的知识，于是利用周末时间开发了一款类似于同事的小程序，深度体验了小程序云开发模式提供的云函数、数据库、存储三大能力。关于云开发，可参考文档：小程序·云开发。 个人感觉云开发带来的最大好处是鉴权流程的简化和对后端的弱化，所以像笔者这种从未接触过小程序开发的人也能够在周末两天时间内开发出一个功能完备、体验闭环的勉强能用的产品。 最后，本文并不是搬运官方文档，也不会详细介绍开发工具和云开发后台的使用，所以建议结合上面给出文档链接一起消化本文。 功能分析 [图片] 该小程序功能目前较为简单（发布帖子、浏览帖子、发布评论），可用下图表示，无需赘述： [图片] 由架构图可知，云开发的数据库（存帖子、存评论）、存储（图片）、云函数（读、写、更新数据库等）都将涉及，很好地达到了练手的目的。 发布帖子 如果帖子不带图片，直接写数据库即可，如果带图片则需要先存入图片到云开发提供的存储中，拿到返回的fileId（可理解为图片的url）再一并写入数据库，核心代码： [代码] for (let i = 0; i < img_url.length; i++) { var str = img_url[i]; var obj = str.lastIndexOf("/"); var fileName = str.substr(obj + 1) console.log(fileName) wx.cloud.uploadFile({ cloudPath: 'post_images/' + fileName,//必须指定文件名，否则返回的文件id不对 filePath: img_url[i], // 小程序临时文件路径 success: res => { // get resource ID: console.log(res) //把上传成功的图片的地址放入数组中 img_url_ok.push(res.fileID) //如果全部传完，则可以将图片路径保存到数据库 if (img_url_ok.length == img_url.length) { console.log(img_url_ok) that.publish(img_url_ok) } }, fail: err => { // handle error console.log('fail: ' + err.errMsg) } }) } [代码] 通过[代码]img_url_ok.length == img_url.length[代码]我们确定所有图片已经上传完成并返回了对应的id，然后执行写入数据库的操作： [代码] /** * 执行发布时图片已经上传完成，写入数据库的是图片的fileId */ publish: function(img_url_ok) { wx.cloud.init() wx.cloud.callFunction({ name: 'publish_post', data: { openid: app.globalData.openId,// 这个云端其实能直接拿到 author_name: app.globalData.userInfo.nickName, content: this.data.content, image_url: img_url_ok, publish_time: "", update_time: ""//目前让服务器自己生成这两个时间 }, success: function (res) { // 强制刷新，这个传参很粗暴 var pages = getCurrentPages(); // 获取页面栈 var prevPage = pages[pages.length - 2]; // 上一个页面 prevPage.setData({ update: true }) wx.hideLoading() wx.navigateBack({ delta: 1 }) }, fail: console.error }) }, [代码] 通过[代码]wx.cloud.callFunction[代码]我们调用了一个云函数（通过[代码]name[代码]指定函数名），并将帖子内容[代码]content[代码]和图片[代码]image_url[代码]以及其他信息（发布者昵称、id等）一并传到云端。然后再看看这个云函数： [代码]exports.main = async (event, context) => { try { return await db.collection('post_collection').add({ // data 字段表示需新增的 JSON 数据 data: { // 发布时小程序传入 //author_id: event.openid,不要自己传，用sdk自带的 author_id: event.userInfo.openId, author_name: event.author_name, content: event.content, image_url: event.image_url, // 服务器时间和本地时间会造成什么影响，需要评估 publish_time: new Date(), // update_time: event.update_time,// 最近一次更新时间，发布或者评论触发更新,目前用服务器端时间 update_time: new Date(), // 默认值，一些目前还没开发，所以没设置 // comment_count: 0,//评论数，直接读数据库，避免两个数据表示同一含义 watch_count: 3,//浏览数 // star_count: 0,//TODO：收藏人数 } }) } catch (e) { console.error(e) } } [代码] 可以看到，云函数写入了一条数据库记录，我们的参数通过[代码]event[代码]这个变量带了进来。 获取帖子列表 所谓获取帖子列表其实就是读上一节写入的数据库，但是我们并不需要全部信息（例如图片url），并且要求按照时间排序，如果熟悉数据库的话，会发现这又是一条查询语句罢了： [代码]exports.main = async (event, context) => { return { postlist: await db.collection('post_collection').field({// 指定需要返回的字段 _id: true, author_name: true, content: true, title: true, watch_count: true }).orderBy('update_time', 'desc').get(),//指定排序依据 } } [代码] 浏览帖子内容 浏览帖子内容及给定一个帖子的id，由帖子列表点击时带入： [代码] onItemClick: function (e) { console.log(e.currentTarget.dataset.postid) wx.navigateTo({ url: '../postdetail/postdetail?postid=' + e.currentTarget.dataset.postid, }) }, [代码] 然后在云函数中根据这个id拿到全部数据： [代码]exports.main = async (event, context) => { return { postdetail: await db.collection('post_collection').where({ _id: event.postid }).get(), } } [代码] 拿到全部数据后，再根据图片id去加载贴子的图片： [代码] // 获取内容 wx.cloud.callFunction({ // 云函数名称 name: 'get_post_detail', data: { postid: options.postid }, success: function (res) { var postdetail = res.result.postdetail.data[0]; that.setData({ detail: postdetail, contentLoaded: true }) that.downloadImages(postdetail.image_url) }, fail: console.error }) [代码] 这里[代码]that.downloadImages(postdetail.image_url)[代码]即加载图片： [代码] /** * 从数据库获取图片的fileId，然后去云存储下载，最后加载出来 */ downloadImages: function(image_urls){ var that = this if(image_urls.length == 0){ return } else { var urls = [] for(let i = 0; i < image_urls.length; i++) { wx.cloud.downloadFile({ fileID: image_urls[i], success: res => { // get temp file path console.log(res.tempFilePath) urls.push(res.tempFilePath) if (urls.length == image_urls.length) { console.log(urls) that.setData({ imageUrls: urls, imagesLoaded: true }) } }, fail: err => { // handle error } }) } } }, [代码] 发表评论 发表评论和发布帖子逻辑类似，只是写入的数据不同，不做赘述。 总结 前面说过，云开发弱化了后端（简化鉴权本质也是弱化后端），这样带来的好处就是提高了开发效率，因为前后端联调向来都是一件耗时间的事情，而且小程序本身主打的就 是小型应用，实在没有必要引入过多的开发人员。但云开发也不是万能的，例如我一开始想做RSS阅读器，那么后端就需要聚合信息，目前云开发还做不了。 个人感觉只要是信息类的小程序，如新闻类、视频类，云开发目前都很乏力，因为数据库的支持还过于简陋（也可能是我太菜，没发现很好的解决办法，欢迎拍砖）。但如果是本文提及的这种用户自己也会产生信息的小程序，那么云开发则会有开发效率上的优势。 最后就是云开发目前提供的2G数据库和5G存储，对于一些用户量较多的小程序是否足够也是个问题，目前也没见有付费版。</br> 总的类说，初次接触小程序开发，还是发现有不少值得借鉴学习之处。 源码链接 https://github.com/TencentCloudBase/Good-practice-tutorial-recommended 如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享，欢迎留言联系我们哦~比心！ [图片]