- #小程序云开发挑战赛#-Hi头像-小雪溪
Hi头像 让头像有趣一点 核心亮点 特性 介绍 云开发 基于腾讯云云开发,易部署、扩展性很好 人工智能 基于腾讯云的人脸五官分析服务自动为头像戴皇冠、圣诞帽或口罩,支持多人识别 多端运行 基于 Taro 打造,有微信小程序端和 Web 端 用户体验好 UI设计精美,易于操作,交互动画友好且动感 部署文档详细 本项目的部署文档非常详细,详情请查看《DEPLOYMENT》文档 前端工程化 核心配置已抽取,基于 Cloudbase Framework 完成云函数、Web 端 和小程序端部署 技术小册 独家拥有技术小册《从0到1开发一个智能头像识别小程序》,详细说明 Hi 头像主要实现思路 功能体验 小程序二维码 [图片] Web 体验版:https://face.xiaoxili.com 愿景 使用场景&目标用户&背景 在节日的时候,我们可以使用符合节日七夕的头像,比如在国庆节使用含国旗的头像表达对祖国的祝福;在圣诞节的时候,我们能给亲朋送一个带圣诞帽的头像传递快乐。 需求分析 在一些特定节日里,很多人尤其是年轻人喜欢新潮的头像,比如近几年的圣诞节,会有“@官方微信,送我一顶圣诞帽“的需求,对此,我们做这个小程序,来解决特定时候头像的制作。 设计理念 标语:让头像有趣一点 「Hi头像」结合节日特点,微信头像进行智能化处理,让头像更加符合节日氛围。 1、紧跟节日热点 国庆节头戴国旗、圣诞节智能戴帽子,增加节日乐趣 2、简单易操作 不同于各类app的繁琐,小程序更简洁易操作 3、乐于分享 借助微信社交机制,头像处理后可以分享给好友或分享到朋友圈,展示头像成果 用户画像 20-35喜欢分享的年轻人 作品效果图 [图片] 产品展示视频 #小程序云开发挑战赛# Hi头像小程序介绍视频-完整版 主创人员 小溪里,技术研发 个人网站:https://www.xiaoxili.com 公众号:小溪里 不二雪,UI设计 公众号:不二诗旅 部署文档 本项目的部署文档非常详细,详情请查看《DEPLOYMENT》文档。 RoadMap 🚀 表示已经实现的功能,👷 表示进行中的功能,⏳ 表示规划中的功能,🏹 表示技术方案设计中的功能。 功能 状态 发布版本 UI 重构、页面流程优化 🚀 已实现 V2.0 云函数合并,使用 [代码]tcb-router[代码] 进行路由匹配 🚀 已实现 V2.0 使用 [代码]cloudbase-framework[代码] 来发布 Web 端、云函数 🚀 已实现 V2.0 使用 [代码]cloudbase-framework[代码] 来部署小程序的预览、体验版 👷 进行中 V2.0 Cloudbase CMS v1 版数据模型快速生成集合字段 🚀 已实现 V2.0 Cloudbase CMS v2 版数据模型快速生成集合字段及提供默认数据 ⏳ 规划中 V3.0 贴纸编辑器调研 🏹 设计中 V3.0 海报换为 [代码]canvas 2d[代码] 版 🏹 设计中 V3.0 Web 版云开发登录鉴权设计 🏹 设计中 V3.0 云环境共享调研 🏹 设计中 V3.0 更多的腾讯云人工智能服务 🏹 设计中 V3.0 学习资源 《从0到1开发一个智能头像识别小程序》 本技术小册基于Hi 头像 v1版本编写,v2 版本正在撰写中。 从产品功能规划、技术选型到实战开发,全方位介绍基于小程序云开发来实现智能人像识别小程序,不仅能完成跨端开发,更能学习到当今炙手可热的 ServerLess 开发实战(即小程序与 Web 云开发),更能将高深的人工智能技术落地到真实项目中,甚至,我们还将探索如何将小程序与Web端完成前端工程化实践。 你会学到什么? 小程序云开发配置与开发技巧,亲历云开发的实战场景 基于 tcb-router 封装多功能的 API 服务 基于静态网站托管部署 Web 版 基于 CMS 内容管理系统来统一管理数据 基于 Cloudbase-Framework 来部署云函数、小程序和 Web 端 体验及实战腾讯云人工智能特色功能,如人脸识别、五官分析、人像转换等 Taro 跨端使用技巧,在实战中了解Canvas在小程序与web端的差异,以及图片裁剪、压缩、上传的各种技术细节 产品需求、项目规划的实战知识 项目综述 本项目在小程序和Web端使用 Taro 构建,功能服务基于腾讯云云开发及腾讯云人工智能服务,使用 CMS 内容管理系统来管理数据,基于Cloudbase Framework完成小程序端、Web端、云函数端构建。 整体关系图 [图片] 页面间调用关系图 在[代码]taro/src[代码]中,有以下文件 [代码]|-config.js 配置AppId、云环境Id及其它 |-components 全局组件 |-pages |-|- avatar-edit 头像编辑页 |-|- avatar-poster 头像分享页 |-|- theme-list 主题列表 |-|- self 我的,含个人头像列表 [代码] [图片] 头像编辑页流程图 头像编辑是Hi 头像的主逻辑,下面这个流程图充分展示了从加载主题数据、到头像编辑、再到头像生成的完整流程。 Hi 头像功能以小程序端为主,功能齐全,而在 web端能制作头像并保存图片,暂不提供头像保存和分享功能。 [图片] 五官分析时序图 v1版中使用图示“第五版”时序图来完成主逻辑,而v2版中使用“第六版”时序图,这两者差异点就是基于已有服务来完成功能,更容易初学者掌握。 [图片] 核心语法 1、云函数[代码]hiface-api[代码]基于[代码]tcb-router[代码]做路由跳转 主要功能有头像、主题、用户信息的获取与更新,还有创建小程序码的功能。 路径为[代码]cloud/functions/hiface-api[代码] 2、核心算法 基于五官分析为多个人脸戴上贴纸,具体可以查看《通过五官分析实现为人脸佩戴贴纸》
2020-09-20 - #小程序云开发挑战赛#-运动会管理系统-业余爱好队
[图片] 运动会管理系统适用于各级各类学校(单位)召开运动会进行在线报名管理查询,可以同时有多个单位使用。召开运动会是一件很繁琐的事情,团队上报名单后,工作人员需要对名单进行分组整理,工作量很大,且数据容易搞错,运动会召开期间,检录、上场、终点记录、发放奖品都需要比赛数据,传统的比赛,需要安排工作人员跑动传递纸质数据,应用本系统后,所有比赛数据可以在小程序里共享查阅,既准确又方便;面对当前疫情,同时也减少人员聚集。 基本思路是:单位注册后,管理员设置比赛分组、设置各组项目,设置各团队,设置裁判、给各裁判赋权,设置比赛日程等基础功能。然后各领队登录,可以添加运动员,同时可以给运动员报项目。运动员也可自己登录后填报项目。比赛期间,裁判登录后,可以依据管理员赋予的权限,对各个比赛项目进行运动员检录、安排运动员上场、记录运动员成绩、对比赛进行裁决(转下一赛程或确定名次)。管理员可以控制领队、运动员、裁判的登录权限,可以控制数据是否公开,如果设为数据公开,任何人可即时查阅报名、比赛的实时数据。管理员还可以下载报名后按项目分类运动员名单,可以下载比赛日程表等。 管理员、领队、裁判员可以使用密码登录,也可以使用“手机号+验证码”登录。管理员可以清理所有比赛数据。领队可以初始化运动员登录密码。各类人员登录后都可以修改基本信息、登录密码。 打开首页下“关于”页面中,选择不同身份,可以查阅详细的使用说明。 所有人员打开本系统后,在征得用户同意的情况下,读取地址确定当前所在省市县(区),注册时即切换到相应的区县进行信息填写。 开发本系统运用到如下技术:微信组件开发、云数据库开发、云文件存储、阿里云验证短信,百度位置获取。 程序架构图 [图片] 项目文件说明: 本软件常用变量、对象、数组名说明: 对象、变量、数组: dw、danwei-单位对象,与数据集合danwei对应,dwid-单位id,dwmc-单位名称,diqu-地区,ydhmc-运动会名称; fz、fenzu-分组,指的是运动会分组,与数据集合fenzu对应,fzid-分组id,zm-组名; xiangmu、xm-项目,比赛项目,与数据集合xiangmu对应,xmid-项目id,xmm-项目名; td、tuandui-团队,与数据集合tuandui对应,tdid-团队id,tdmc-团队名称,ldsj-领队手机; caipan、cp-裁判,与数据集合caipan对应,cpid-裁判id,cpsj-手机,cpxm-裁判姓名; yundongyuan、ydy-运动员,与数据集合yundongyuan对应,bh-编号,xm-姓名; 其他数据集合: baoming-报名数据集合,运动员报名数据,下次运动会报名覆盖,建议每次报名前先清空; bisaishuju-比赛数据集合,比赛过程中记录数据,下次比赛覆盖,建议正式比赛前先清空; chengji-成绩数据集合,比赛结束,获奖者数据,长久保存,便于查阅; 方法名: hqsj-获取数据,hqfz-获取分组,hqxm-获取项目,hqcp-获取裁判,hqydy-获取运动员,一般是页面(组件)加载时读取数据,需要重新获取时也会调用此方法,返回对象数组的第一个数据对象 xzfz-选中分组,xzxm-选中项目,xzcp-选中裁判,一般是下拉框选中时触发的方法,返回选中的对象; ip??-一般是input组件触发,对绑定变量进行赋值; 文件夹说明: pages-页面文件夹,这里的每个页面都含有tab面板 pages/caipan-裁判页面 pages/default-首页 pages/guanliyuan-管理员页面 pages/lingdui-领队页面 pages/yundongyuan-运动员页面 component-组件文件夹 component/caipan-“裁判”页面所用的组件 component/caipan/caipan-裁判页面裁判面板所用组件 component/caipan/caipan/caijue-裁决组件 component/caipan/caipan/jianlu-检录组件 component/caipan/caipan/jilu-记录组件 component/caipan/caipan/shangchang-上场组件 component/caipan/shezhi-裁判页面设置面板所用组件 component/default/about-“关于”页面组件 component/default/about/gly-管理员使用说明 component/default/about/cp-裁判使用说明 component/default/about/ld-领队、运动员使用说明 component/default/chakan-“查看”页面组件 component/default/chakan/bisaijindu-比赛情况 component/default/chakan/bisaixiangmu-比赛项目 component/default/chakan/bmtj-报名统计 component/default/chakan/mcb-名次榜 component/default/chakan/tdcj-团队成绩 component/default/chakan/tdjf-团队积分 component/default/chakan/tdtj-团队统计 component/default/denglu-“登录”页面组件 component/default/denglu/caipan-裁判登录 component/default/denglu/guanliyuan-管理员登录 component/default/denglu/lingdui-领队登录 component/default/denglu/yundongyuan-运动员登录 component/default/zhuce-“注册”页面组件 component/guanliyuan-管理员组件 component/guanliyuan/caipan-“裁判”面板 component/guanliyuan/caipan/tianjiacaipan-添加裁判 component/guanliyuan/caipan/caipanfuquan-裁判赋权 component/guanliyuan/shezhi-管理员设置面板 component/guanliyuan/shezhi/jibenshezhi-基本设置 component/guanliyuan/shezhi/richengshezhi-日程设置 component/guanliyuan/tuandui-团队管理 component/guanliyuan/xiangmu-项目管理 component/guanliyuan/xiangmu/fenzu-分级管理 component/guanliyuan/xiangmu/xiangmu-项目管理 component/lingdui-领队组件 component/lingdui/baoxiangmu-报项目 component/lingdui/shezhi-设置 component/lingdui/yundongyuan-运动员管理 component/yundongyuan-运动员组件 component/yundongyuan/baoxiangmu-报项目 component/yundongyuan/shezhi-设置 compoent/tongyong-通用组件 biaoti-标题;bmlb-报名列表;bslb-比赛数据列表;button-按钮;caipan-裁判下拉框; cjlb-比赛成绩列表;danwei-单位选择组件;fenzu-分组下拉框;richeng-日程列表; saicheng-赛程下拉框;tuandui-团队下拉框;xiangmu-分组项目组合下拉框; xiugaimima-修改密码;yanzheng-验证码;ydybh-运动员编号下拉框;ydylb-运动员列表。 效果图展示: 首页: [图片][图片][图片][图片] 查看: [图片][图片][图片][图片][图片][图片][图片][图片][图片] 管理员: [图片][图片][图片][图片][图片][图片][图片][图片] 领队: [图片][图片][图片][图片] 运动员: [图片][图片][图片] 裁判员: [图片][图片][图片][图片][图片][图片][图片] 部分功能代码: 收发阿里云短信云函数: // 云函数入口文件 const cloud = require('wx-server-sdk') const Core = require('@alicloud/pop-core'); const accessKeyId = '' // 你的appid const accessKeySecret = '' // 你的secret const SignName = '运动会管理微信小程序' // 你的签名 const TemplateCode = 'SMS_179130189' // 你的模版CODE var client = new Core({ accessKeyId, accessKeySecret, endpoint: 'https://dysmsapi.aliyuncs.com', apiVersion: '2017-05-25' }) let params = { SignNameJson: JSON.stringify([SignName]), TemplateCode: TemplateCode, } cloud.init({}) exports.main = async(event, context) => { return new Promise(async(resolve, reject) => { try { var xx={yzm:'xxxx',ts:''} if(!event.phone) xx={yzm:'xxxx',ts:'手机不能为空!'} if(!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(event.phone)) xx.ts='手机号码格式错误!' if(xx.ts==''){ let code = Math.floor(Math.random() * 9000) + 1000 //发送短信 let { Code } = await client.request('SendBatchSms', Object.assign({ PhoneNumberJson: JSON.stringify([event.phone]), TemplateParamJson: JSON.stringify([{code}]) },params), { method: 'POST' }) if(Code == 'OK') {xx.yzm=code;xx.ts='发送成功!'} } resolve(xx) } catch (error) { resolve({yzm:'xxxx',ts:'发送出错!'}) } }) } 批删除云函数: // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({env: '',}) const db = cloud.database() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() try { return await db.collection(event.jihe).where(event.tiaojian).remove() } catch(e) { console.error(e) } return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } } 自定义button组件: wxml文件: [图片] js文件: Component({ /** * 组件的属性列表 */ properties: { width:{ type:String, value:'160rpx' }, text:{ type:String, value:'确定' } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { bttap(){ this.triggerEvent("bttap",'') } } }) wxl文件: .zdybt{ display: flex; flex-direction: column; align-items:center; margin: 5rpx; border-width: 1rpx; border-color: black; border-style: solid; background-color: gold; } .zdybt2{ display: flex; flex-direction: column; align-items:center; background-color: goldenrod; } 作品二维码: [图片] 团队介绍:张建明,男,1988年中师毕业,从事中小学教学工作三十余年,曾教过中小学数学、物理、计算机等课程,现在浙江省杭州市淳安县教育局招生考试服务中心工作。中师读书时接触计算机以来,一直是计算机编程爱好者,自学了BASIC语言、C语言、C#语言、SQL数据库查询语言、JS语言等,用VB6.0编写过中小学排课软件、自2003年起一直用Visual Studio+SQLserver系列软件做过一些学校报名、信息管理类桌面软件或web网站,其中淳安县中考报名录取管理系统已平稳使用七年。 2019年下半年初步接触微信小程序编程,做了高考体检数据录入小程序,疫情和暑假期间自学了VUE前端编程,对小程序编程有了进一步的理解,于是8月份开始,试着编写了的运动会管理小程序,本意是开学后给各中小学开运动会使用,刚好赶上“小程序云开发挑战赛”,于是就报名参加了这一比赛,希望我的作品能获奖。 ”
2020-09-17