基于人脸识别的智能服饰搭配小程序

基于人脸识别的智能服饰搭配小程序

(一) 技术方案
开发工具:微信小程序开发者工具
美术风格定位:白色和红色为主要颜色搭配界面,美观,调理清晰,完美兼容ios系统和安卓系统。设计元素上强调抽象、极简、符 化,去除冗余的装饰效果突显小程序的文字图片等信息内容。
所用技术:
前端:框架语言wxml,逻辑语言JavaScript,wxss样式;
数据交换格式:json;
服务器:小程序云服务器;
云开发:小程序云——云开发,云数据库,云函数,云储存;(.node格式)
所用Api:微信小程序原生api,百度人脸识别api
样式库:vant(轻量,可靠的移动端vue组件库)
开发框架:mpvue

(二) 效果展示

1.第一次进入小程序会有授权登录页面,在授权登录页面会对该小程序主要的功能和人脸识别实现原理进行介绍;获取用户信息授权登录使用:bindgetuserinfo

  • 选择了完自己喜欢的服饰之后点击进入衣柜可查看之前加入衣柜的服饰,“我的衣柜”页面里有删除服饰和进入淘宝购买页面的功能。
    由于调用数据库信息后,数据存储结构类型是数组类型,用户点击“加入衣柜”按钮时,获取e.currentTarget.dataset.id的值取得当前遍历数组下标,再通过wx.setStorageSync将当前服饰信息存储到微信缓存中,进入“我的衣柜”时会通过:wx.getStorageSync取得服饰信息缓存,调用数组中相关下标取得服饰图片,名称,价格,购买链接,将图片名称,价格显示再页面中,点击“前往购买”会调用该服饰的购买链接进入淘宝页面。点击删除按钮会删除该服饰的全部信息并刷新页面,实现删除的功能。具体实现是把该数组下标元素之后的全部元素向前移动一个单位,实现删除信息。缓存数组如下图:

  • 云存储截图:

    文章知识点与官方知识档案匹配,可进一步学习相关知识小程序技能树首页概览3750 人正在系统学习中

    声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

    上一篇 2021年1月12日
    下一篇 2021年1月12日

    相关推荐