您的位置: 主页 > 新闻中心 > 行业动态

全国服务热线

020-88888888

微信小程序之看图识物

作者:佚名时间:2024-11-04 14:47 次浏览

信息摘要:

在这样春暖花开的时间,是不是想要和男神女神一起出门踏青赏花啦?看到一款好看的花花草草,不认识岂不是很丢人。不如动手撸个看图识物的小程序吧,还能一展咱程序媛[猿]的魅力。ok,带着这样的目的,记录下我的这次开...

在这样春暖花开的时间,是不是想要和男神女神一起出门踏青赏花啦?看到一款好看的花花草草,不认识岂不是很丢人。不如动手撸个看图识物的小程序吧,还能一展咱程序媛[猿]的魅力。ok,带着这样的目的,记录下我的这次开发。此次开发用到了微信小程序的云服务开发,毕竟咱也没有服务器,还有用到了百度AI的api。


5e7326fd35210_5e7326fd66182.gif

首先,如何进行小程序的云服务开发呢?一直都在听我老大说这个概念,这次终于动手操作啦,对于小程序,之前只做过一个商品购物的小程序,所以稍微有点基础吧。
第一步: 首先在创建的时候勾选云开发,这里AppID一定要用真实的AppID,在微信公众平台开发设置可以找到:


image.png

此时会让你创建个环境,这里创建的环境id后续需要写到全局app.js里,注意:这里是环境id,不是环境名称哦(在云开发控制台设置中查找环境id)


(5738HP.png

创建之后会有两个文件夹,第一个文件夹就是用来写云函数,第二个文件夹是页面代码。


image.png

cloudfunctions云函数文件里每次创建都只写一种方法,因为后面页面调用接口名称就是你创建的文件夹名字,如我这里是: baiduAi,同时创建完需要鼠标点击文件夹右击=》上传并部署:云端安装依赖,这时,在云开发控制台云函数可以看到创建的云函数


image.png

这里点击左上方的云开发,可以看到里面有数据库,存储,云函数等,这里用到了存储和云函数功能
第二步:写好页面后,写拍照,本地相册上传功能,这里微信小程序提供了相应的api为:wx.chooseImage,


image.png

第三步:图片上传后,会生成一个临时url,我们需要做的就是把临时url放到云服务的存储中,使用云开发api中wx.cloud.uploadFile,同时,我们需要给图片命名,因为这里会传多张图片,所以使用时间戳来命名,同时跳转到上传图片成功的页面,这里需要向下一个页面传页面的临时路径以便显示,同时还要传fileID,也就是图片在云服务存储里的图片id,这里ID是为了后面百度AI接口调用的时候使用


第四步:在上传成功页面里,首先是显示出图片,同时需要调用百度AI的接口,这里百度AI接口的处理我是在云函数中处理,使用的是node。对于百度AI,需要去百度AI官网登录注册一个账号,我是搜索植物识别,使用免费使用功能,毕竟咱自己玩,一天也玩不了多少次,哈哈。打开后创建应用,会生成我们需要的APP_ID, API_KEY,SECRET_KEY,对照着百度AI提供的文档进行开发。注意:这里需要安装baidu-aip-sdk,可以在控制台进入相应文件后直接npm安装
附百度ai开发文档(我选择的是NodeSDK文档): https://ai.baidu.com/ai-doc/IMAGERECOGNITION/Fk3bcxjx7

image.png

一切就绪后,就开始处理图片和百度AI之间的关系,将云服务中的图片id传入百度Ai接口中,返回的就是对应图片内容的信息


处理好百度AI接口后,在显示图片的那个页面调用该接口


这个时候,一个看图实物的小程序就完成啦,这里不只是可以辨别植物,百度Ai接口对于其他类型图片也可以识别。

关注我,一起努力,共同进步!!后续会将代码传入github。

返回列表 本文标签: 这里 图片

平台注册入口