网站建设设计模板,企业地址管理系统,dw做一个小网站教程,内蒙古呼和浩特网站建设创意来源于生活#xff0c;之所以开发这个校园约拍小程序#xff0c;是因为在摄影选修课上常听老师抱怨外出写生老找不到模特#xff0c;许多大学生都想拥有一套专属自己记忆的摄影作品#xff0c;记录下不会磨灭的美好回忆#xff0c;可如何找到让自己满意的摄影师是他们… 创意来源于生活之所以开发这个校园约拍小程序是因为在摄影选修课上常听老师抱怨外出写生老找不到模特许多大学生都想拥有一套专属自己记忆的摄影作品记录下不会磨灭的美好回忆可如何找到让自己满意的摄影师是他们的难题。悦拍屋是一个校园摄影o2o的约拍平台提供全方位的约拍服务同时提供一个自我展示学习交流互动娱乐的平台。接下来我将结合项目的讲解给大家分享一些实用技术和对于云开发的一些经验希望对正在学习小程序的你有帮助。 前言 在开发一个项目之前首先要进行技术选型从而降低产品开发的技术风险和提高开发效率技术选型必须得紧紧围绕着业务场景来选择。 产品原型设计墨刀UI组件库 1.微信原生样式库WeUI,让用户使用感知更加统一 2.注重视觉交互体验的ColorUI组件库在感知统一的基础上视觉元素多样化前端 1.小程序原生语法以及API 2.Promise实现异步调用 3.ES6编写页面交互逻辑后端 1.云函数无需自建服务器在云端运行的代码微信私有协议天然鉴权开发者只需编写自身业务逻辑代码 2.云数据库无需自建数据库一个既可在小程序前端操作也能在云函数中读写的 JSON 数据库 3.云存储实现小程序前端直接上传/下载云端文件在云开发控制台可视化管理 4.云调用由原生微信服务集成基于云函数免鉴权使用小程序开放接口的能力包括服务端调用、获取开放数据等能力其他 1.使用微信提供的云测试对未上线的小程序进行缺陷测试、性能数据分析、机型覆盖测试确保小程序上线后正常运营 2.使用基于云开发的AI视觉能力-身份证识别实现实名认证智能鉴黄结合人工完成发布信息的审核 3.开发工具:微信开发者工具、VScode 4.部分图标使用自阿里巴巴矢量图标库总体设计 功能结构图 大家可以通过此图了解整个项目的主要功能点 产品原型图 此处给出一张主页原型图示例墨刀还是挺好用的 色彩设计图 悦拍屋的整体色调为浅蓝色各位小伙伴在开发自己项目的时候可以根据色彩标准搭配来设计项目所采用的色彩合适的色彩搭配可以给用户良好的视觉体验 功能模块详解 接下来我会对部分功能模块以图文结合的形式详细描述将其中涉及的技术、知识分享给大家 约拍邀请 用户可在首页查看约拍需求并点击查看需求详情用户在了解需求后若自己符合条件即可提交约拍信息等待发布者的回复可将此需求收藏方便查看 技术分享自定义顶部导航栏 官方默认的导航栏只能对背景颜色进行更改对于想要在导航栏添加一些比较酷炫的效果则需要通过自定义导航栏实现 实现原理通过设置app.json中页面配置的navigationStyle(导航栏样式)配置项的值为custom,即可实现自定义导航 window:{navigationStyle:custom
} 本项目的部分页面自定义导航栏实现使用了ColorUI的导航栏组件在完成上一步属性设置后再引入导航栏组件即可 usingComponents:{cu-custom:/colorui/components/cu-custom //该路径替换为自己项目内ColorUI组件所在位置
} 主页自定义导航栏通过设置背景图片加上GIF波浪效果 view classpage__bdview classbg-img padding-tb-xl stylebackground-image:url(http://wx4.sinaimg.cn/mw690/006UdlVNgy1g2v2t1ih8jj31hc0p0qej.jpg);background-size:cover;view classcu-barview classcontent text-bold text-white悦拍屋/view/view/viewview classshadow-blurimage srchttps://image.weilanwl.com/gif/wave.gif modescaleToFill classgif-black response styleheight:100rpx;margin-top:-100rpx;/image/view/view 效果图 使用组件定义的导航栏 cu-custom bgImagehttps://s2.ax1x.com/2019/05/02/Etiyng.jpg isBack{{true}}view slotbackText返回/viewview slotcontent认证信息说明/view
/cu-custom 效果图 特别提醒1使用自定义导航后页面的返回需要在自定义导航栏中自行设置 特别提醒2导航栏组件需要自行引入ColorUI组件库后才能使用具体引入教程地址在附录中给出 发布约拍 选择发布约拍功能填写约拍需求提交审核通过后可在首页实时查看发布结果 技术分享入场动画 额。。录制可能略微有点卡顿实际效果挺流畅的各位大佬有什么好的录制工具推荐可以在评论中回复 实现原理通过toggleDelay的布尔值为真动态添加动画类名在生命周期函数onReady中控制toggleDelay的值从而控制整个动画过程(原理与Vue的动态类名相似) data:{toggleDelayfalse
},
onReady:function(){let that this//toggleDelay的值为真动画开始that.setData({toggleDelay: true})//控制整个动画的时长setTimeout(function() {that.setData({toggleDelay: false})}, 2000)
} view classpadding-xs {{toggleDelay?animation-slide-bottom:}} styleanimation-delay: {{item.time}}s; wx:for{{list}} wx:key{{index}}image classimg idimg{{index}} src{{item.src}} modewidthFix /
/view //所有动画的定义
[class*animation-] {animation-duration: .5s;animation-timing-function: ease-out;animation-fill-mode: both
}
//animatioon-slide-bottom所定义的动画
.animation-slide-bottom {animation-name: slide-bottom
}
//动画效果
keyframes slide-bottom {0% {opacity: 0;transform: translateY(100%)}100% {opacity: 1;transform: translateY(0)}
} animation-slide-bottom是动画类名animation-delay是每一个卡片动画执行的延迟时间每一个动画的执行时长为0.5s,所以延迟时间是以0.5s递增的三个卡片的动画总时长就为2s,即2s后就执行onReady中的settimeout事件结束动画 特别提醒动画的延迟时间执行时间可以自行设计动画效果过渡自然即可 特别提醒由于触发动画的钩子函数定义在页面初次渲染的生命周期函数中故只有在页面初次渲染时才执行避免每次显示页面时加载动画造成用户的视觉疲劳 智能推荐约拍对象 系统会根据约拍需求自动推荐约拍对象(个人开发精力有限推荐算法后续推出。。。) 技术分享CSS3实现酷炫搜索动画 在模态框内放置两个view标签以下是标签定义 view idpreloader //外围的圆形框定义view idloader/view //内部的线条定义
/view #preloader {width: 150px;height: 150px;border-radius: 50%;border: 1px solid #97b2ff;
}
#loader { //中间线条定义display: block;position: relative;left: 50%;top: 50%;width: 150px;height: 150px;margin: -75px 0 0 -75px;border-radius: 50%;border: 3px solid transparent;border-top-color: #97b2ff;-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite;
}
#loader:before { //通过伪类元素定义外围线条content: ;position: absolute;top: 5px;left: 5px;right: 5px;bottom: 5px;border-radius: 50%;border: 3px solid transparent;border-top-color: #97b2ff;-webkit-animation: spin 3s linear infinite;animation: spin 3s linear infinite;
}
#loader:after { //通过伪类元素定义最内部线条content: ;position: absolute;top: 15px;left: 15px;right: 15px;bottom: 15px;border-radius: 50%;border: 3px solid transparent;border-top-color: #97b2ff;-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite;
} 实名认证 嘿嘿由于懒得给个人信息打码就暂时不给大家演示认证过程了。。 技术分享Ai视觉能力 很多小伙伴都有过在自己项目中使用AI技术的想法但又因为入门AI的难度比较大并且需要的时间较长就放弃了现在给大家安利一个可以直接使用的AI服务让AI不再具有神秘感(AI大佬可以忽略此部分。。) 方案一 在腾讯云中搜索身份证识别上面会有详细的API文档以及测试工具帮助你快速使用 点击查看腾讯云-身份证识别 方案二 方案一是以提供API接口的形式提供身份证识别服务而接下来要介绍的方案真的就比较简单了在腾讯云中搜索智能图像,其中的增值服务AI智能图像能力你可以通过云函数和云存储实现相应功能基于小程序云开发的 AI DEMO中开发好了部分功能你只需通过教程将云函数和组件引入你的项目即可使用 点击查看腾讯云-智能图像 点击查看基于小程序云开发的 AI DEMO 特别提醒当然使用这些服务也并非是完整的解决方案对于身份证信息的加密、存储方案、安全协议等还是需要各位小伙伴自行设计解决方案哦。 云开发 云开发为开发者提供完整的原生云端支持和微信服务支持弱化后端和运维概念无需搭建服务器使用平台提供的 API 进行核心业务开发即可实现快速上线和迭代同时这一能力同开发者已经使用的云服务相互兼容并不互斥。 官方文档中API被分为了小程序端和服务端一开始看过两端的API之后感觉好像没有什么不同啊在查阅相关资料以及实际开发中某些业务的处理总结出一些经验后才明白了两者的不同下面给各位具体说说两者的不同之处应该能帮助大家在使用云开发实战时少踩一点坑 初始化的不同 小程序端 全局声明一次 if (!wx.cloud) {console.error(请使用 2.2.3 或以上的基础库以使用云能力)} else {wx.cloud.init({env:xxx,traceUser: true,})} 服务端 每个云函数中声明一次 const cloud require(wx-server-sdk)
cloud.init() 权限不同 小程序端 在小程序端可以选择直接操作数据库但由于是前端操作数据库存在一些安全问题有较多的权限限制在云控制中可对每个集合进行权限设置这也就是为什么有小伙伴在小程序端对某些数据进行更新显示更新成功但并未更新数据就是因为小程序端默认只能更新当前用户写入的数据 特别提醒在小程序端使用创建者的权限对数据进行修改时一定要确保该集合中有_openid字段否则系统在权限判断时是没有办法识别当前操作为创建者的数据修改无法执行 服务端 服务端拥有管理员的权限对所有数据拥有读写权限 语法支持不同 小程序端 在微信开发者工具里以及Android端手机浏览器内核是QQ浏览器的X5async/await是天然支持的但 iOS 端手机在较低版本则不支持因此需要引入额外的polyfill。可以在有使用async/await 的文件当中引入polyfill文件。 const runtime require(相对路径/lib/runtime) 服务端 在云函数里由于 Node 版本最低是 8.9因此是天然支持 async/await 语法的 示例获取约拍需求列表 //云函数入口文件
const cloud require(wx-server-sdk)
//初始化
cloud.init()
//连接数据库
const db cloud.database()
async function getAll(){const result await db.collection(ypList).orderBy(cameraInfo.launchTime,desc).where({}).get()return result
}
// 云函数入口函数
exports.main async (event, context) {//此处的action是用来判断该调用哪一个方法if(event.action getAll){return getAll()}
} 结语 一个人手撸个全栈项目确实很辛苦但收获也很多。至少对于小程序的实战开发更为熟练了对MVVM的思想的理解也更加深刻了。技术发展得很快学习一项技术如果不深入其本质那么技术是学不完的。深入学习就是个解决问题的过程或是帮助别人解决问题或是借助他人的力量解决问题。目前在正在学习Vue、React、TypeScript等技术后续会推出相关技术的项目解析文章希望对于同样在学习的你有帮助。 特别说明本项目已参加2019届中国高校计算机-微信应用开发赛完开源至github感兴趣的小伙伴可以看看 附录 在此提供一些本项目涉及到的技术、工具等链接供大家学习使用 产品原型设计工具墨刀色彩搭配设计配色网在线作图ProcessOnUI样式库WeUIUI样式库ColorUI图标库Iconfont阿里巴巴矢量图标库开发工具微信开发者工具开发者工具Vscode腾讯云服务身份证识别腾讯云服务智能图像API文档微信官方文档.小程序技术文档ES6源码链接 https://github.com/TencentCloudBase/Good-practice-tutorial-recommended 如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享欢迎留言联系我们哦~比心 转载于:https://www.cnblogs.com/CloudBase/p/11303986.html
