创意源于生活。之所以开发这个校园约拍小程序，是因为摄影选修课经常有老师抱怨外出写生找不到模特。大学生都想拥有一套专属于自己记忆的摄影作品，记录下不可磨灭的记忆，但如何找到令自己满意的摄影师对他们来说是一个难题。约拍屋是一个校园摄影o2o预约平台，提供全方位的预约服务，也是一个自我展示、学习交流、互动娱乐的平台。接下来我会根据项目的讲解，给大家分享一些云开发的实用技术和一些经验。希望对学习小程序的你有所帮助。前言在开发项目之前，首先要进行技术选型，以降低产品开发的技术风险，提高开发效率。技术选择必须基于业务场景。产品原型设计：墨刀UI组件库1.WeUI原生微信风格库，让用户感受更统一2.专注于视觉交互体验的ColorUI组件库，在统一感知的基础上呈现多样化的视觉元素。前端1.原生小程序语法和API2.Promise实现异步调用3.ES6编写页面交互逻辑后??端1.云端功能：无需搭建服务器，代码运行在云端，微信私有协议自然认证，开发者只需要自己编写业务逻辑代码2.云数据库：无需自建数据库，可以在小程序前端操作的JSON数据库，也可以在云函数中读写平台可视化管理4.云调用：由微信原生服务集成，基于云函数，无需认证即可使用小程序开放接口的能力，包括调用服务端和获取开放数据的能力。其他1.使用微信提供的云测试对线下进行小程序缺陷测试、性能数据分析、模型覆盖测试，确保小程序上线后正常运行审计3.开发工具：微信开发者工具、VScode4.部分图标使用阿里巴巴矢量图标库。总体设计功能结构图。可以通过这张图了解整个项目的主要功能点。产品原型图这里有一个主页Prototype例子，墨刀还是很好用的。色彩设计图月牌屋的整体颜色是浅蓝色。当您开发自己的项目时，您可以根据颜色标准设计项目中使用的颜色。合适的配色可以给用户良好的视觉体验功能模块详解接下来我将以图文结合的形式对部分功能模块进行详细的描述，将涉及到的技术和知识分享给大家。邀请用户在首页查看预约要求。并点击查看需求详情。用户了解需求后，如果符合要求，就可以提交预约信息，等待发布者的回复。他们可以将此要求加入书签以便于查看。技术分享：自定义顶部导航栏官方默认的导航栏只有背景颜色可以改。如果你想给导航栏添加一些炫酷的效果，你需要自定义导航栏。实现原理：通过在app.json中设置页面配置的navigationStyle（导航栏样式）配置项的值可以实现自定义导航"window":{"navigationStyle":"custom"}的自定义导航栏实现本项目部分页面使用了ColorUI的导航栏组件，导航栏在上一步完成属性设置后引入bar组件可以是"usingComponents":{"cu-custom":"/colorui/components/cu-custom"//路径替换成自己项目中ColorUI组件的位置}首页通过设置背景图和自定义导航栏添加GIF波浪效果粤排楼渲染使用组件定义的导航栏返回认证信息说明效果图特别提示1：使用自定义导航后，需要在自定义导航栏设置特殊提醒才能返回页面2：导航栏组件需要导入到ColorUI组件库中才能使用。具体介绍教程地址见附件。发布预约拍摄选择发布预约拍摄功能，填写预约拍摄需求。提交审核后，可在首页实时查看发布结果。技术分享：进入现场量。录音可能有点卡，但实际效果还是挺流畅的。如果大家有什么好的录音工具推荐，可以在评论中回复。实现原理：通过toggleDelay的boolean值动态添加动画类名，使用生命周期函数onReady控制toggleDelay的值，从而控制整个动画过程（原理类似于Vue的动态类名）data:{toggleDelay;false},onReady:function(){letthat=this//toggleDelay的值为true，动画开始that。setData({toggleDelay:true})//控制整个动画的时长setTimeout(function(){that.setData({toggleDelay:false})},2000)}//所有动画的定义[class*=animation-]{animation-duration:.5s;动画计时功能：缓出；animation-fill-mode:both}//animation-slide-bottom定义的动画。animation-slide-bottom{animation-name:slide-bottom}//动画效果@keyframesslide-bottom{0%{opacity:0;转换：translateY(100%)}100%{不透明度：1；transform:translateY(0)}}animation-slide-bottom为动画类名，animation-delay为每张卡片动画执行的延迟时间，每张动画执行时间为0.5s，所以延迟时间为增量0.5s，三张卡片的动画总时长为2s，即2s后会执行onReady中的settimeout事件结束动画：由于在生命周期函数中定义了触发动画的钩子函数页面第一次渲染，只在第一次渲染页面时执行，避免每次显示页面加载动画造成视觉疲劳。拍摄需要自动推荐预约对象（个人开发精力有限，推荐算法稍后上线..)技术分享：CSS3实现炫酷的搜索动画。在模态框中放置两个视图标签。下面是标签定义//外圆框定义//内线定义#preloader{width:150px;高度：150px；边界半径：50%；border:1pxsolid#97b2ff;}#loader{//中线定义display:block;位置：相对；左：50%；顶部：50%；宽度：150px；高度：150px；边距：-75px00-75px；:#97b2ff;-webkit-animation:旋转2s线性无限；animation:spin2slinearinfinite;}#loader:before{//通过伪类元素定义外线content:"";位置：绝对；顶部：5px；左：5px；右：5px；底部：5px；边界半径：50%；边框：3px实心透明；边框顶部颜色：#97b2ff；-webkit-动画：旋转3s线性无限；动画：自旋3s线性无限；}#loader:after{//通过一个伪类元素定义最里面的一行content:"";位置：绝对；顶部：15px；左：15px；正确的：15px;底部：15px；边界半径：50%；边框：3px实心透明；边框顶部颜色：#97b2ff；-webkit-animation:旋转1.5s线性无限;动画：自旋1.5s线性无限；哎，因为懒得码个人信息，所以暂时不给大家演示认证过程。技术分享：AI可视化能力很多小伙伴都曾有过在自己的项目中使用AI技术的想法，但是因为AI入门难度大，时间长，所以放弃了。下面给大家安利一个可以直接使用的AI服务，让AI不再有神秘感（AI大佬可以忽略这部分。。）解决方法1在腾讯云搜索身份证识别，里面会有详细的API文档和测试工具助你快速上手点击查看腾讯云-身份证识别方案二方案一是以API接口的形式提供身份证识别服务，接下来要介绍的方案确实比较简单。在腾讯云搜索智能图片，增值服务AI智能图片能力，可以使用云函数和云存储实现相应的功能。基于小程序云开发的AIDEMO中已经开发了一些功能。您只需要通过教程将云功能和组件引入到您的项目中即可。点击查看腾讯云-智能形象点击查看基于小程序云开发的AIDEMO。特别提醒：当然，使用这些服务并不是一个完整的解决方案。对于身份证信息加密、存储方案、安全协议等，还是需要自己设计解决哦，方案。云开发云开发为开发者提供完整的原生云支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的API进行核心业务开发，可以实现快速上线和迭代。一种能力与开发人员已经使用的云服务兼容，并且并不相互排斥。在官方文档中，API分为小程序端和服务器端。一开始看了两端的API，好像没什么区别。查阅了相关资料，在某些业务的实际发展中总结了一些经验，明白了两者的区别已经很清楚了，下面我来详细说一下两者的区别，应该可以帮助大家少走弯路实战中使用云开发时console.error('请使用2.2.3以上基础库使用云能力')}else{wx.cloud.init({env:'xxx',traceUser:true,})}服务器上的每个云函数在云控件中声明constcloud=require('wx-server-sdk')cloud.init()一次可以为每个集合在云控件中设置权限限制，这就是为什么有些小伙伴会更新一些数据在小程序端，显示更新成功但是没有更新数据，因为小程序端默认是只更新当前用户写入的数据。特别提醒：在小程序端使用创建者权限修改数据时，必须保证集合中有_openid字段，否则系统无法识别当前操作为创建者，数据修改不能被执行。服务器具有管理员权限，对所有数据具有读写权限。语法在微信开发者工具中支持不同的小程序，安卓手机（浏览器内核为QQ浏览器X5），async/await自然是支持的，但是iOS端手机低版本不支持，所以需要额外的polyfill待介绍。您可以在使用async/await的文件中引入polyfill文件。construntime=require('相对路径/lib/runtime')服务器在云函数中。由于Node版本至少是8.9，是天然支持async/await语法的例子：获取预约请求列表//云函数入口文件constcloud=require('wx-server-sdk')//初始化云。init()//连接数据库constdb=cloud.database()asyncfunctiongetAll(){constresult=awaitdb.collection('ypList').orderBy('cameraInfo.launchTime','desc').where({}).get()returnresult}//云函数入口functionexports.main=async(event,context)=>{//这里的action用来判断调用哪个方法if(event.action==='getAll'){returngetAll()}}结论一个人做一个全栈项目真的很辛苦，但是收获也很多。至少我在小程序的实际开发中更加熟练了，对MVVM的思想有了更深的理解。技术发展很快，如果不深入学习一门技术，就学不完这门技术。深度学习是一个解决问题的过程，要么帮助别人解决问题，要么利用别人的力量解决问题。目前正在学习Vue、React、TypeScript等技术，后续会推出相关技术的项目分析文章。希望对同样在学习的你有所帮助。特别说明：本项目已参加2019年中国大学生计算机-微信应用开发大赛，已开源至github。有兴趣的小伙伴可以看看附录，提供一些本项目涉及的技术和工具的链接，供大家学习和使用。产品原型工具：墨刀配色设计：配色网在线绘图：ProcessOnUI样式库：WeUIUI样式库：ColorUI图标库：Iconfont阿里巴巴矢量图标库开发工具：微信开发者工具开发者工具：Vscode腾讯云服务：身份证识别腾讯云服务：SmartImageAPI文档：微信官方文档。小程序技术文档：ES6源码链接https://github.com/TencentClo...如果你有使用Cloud开发CloudBase的技术故事/如果你想和大家分享你的实际技术经验，欢迎留言至联系我们~比心！
