【一步步开发AI运动小程序】二、引入插件
2023/5/19 1:22:18
本文主要是介绍【一步步开发AI运动小程序】二、引入插件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
随着人工智能技术的不断发展,阿里体育等IT大厂,推出的“乐动力”、“天天跳绳”AI运动APP,让云上运动会、线上运动会、健身打卡、AI体育指导等概念空前火热。那么,能否将这些在APP成功应用的场景搬上小程序,分享这些概念的红利呢?本系列文章就带您一步一步从零开始开发一个AI运动小程序,本系列文章将使用“云智AI运动识别小程序插件”,请先行在微信服务市场或官网了解详情。
一、新建uni-app项目
新一个空的uni-app
项目。
二、配置项目引用插件。
编辑mmanifest.json
文件(在HBuilderX编辑器无法编译此文件内容,请使用计事本、VSCode等其它编辑器编辑),在mp-weixin
节中增加下面的下面插件引用内容:
"mp-weixin": { "appid": "xxxx", ... "plugins": { "aiSport": { "version": "1.0.12", "provider": "wx6130e578c4a26a1a" } } }
三、部署模型
插件会提供一个深度学习模型,将解压的文件夹上传至一个可访问Web站点,并保证目录下的所有文件可访问下载。
四、安装npm依赖包
# 若未初始化npm包,请先执行npm init npm install fetch-wechat --save
五、插件全局初始
在小程序的入口App.vue
执行全局初始化:
<script> import * as fetchWechat from "fetch-wechat"; export default { onLaunch: function() { const plugin = requirePlugin('aiSport'); plugin.initialize({ modelUrl: 'http://xx.xx.xx.xx/model.json', //刚刚部署的模型下载地址 fetchFunc: fetchWechat.fetchFunc(), humanPointThreshold: 0.45, debugEnabled: true }); }, onShow: function() { }, onHide: function() { } } </script> <style> /*每个页面公共css */ </style>
六、调用插件内对象
const AiSports = requirePlugin("aiSport");//获取插件对象 const PoseGraphs = AiSports.PoseGraphs; //获取人体骨骼图绘制器 const humanDetection = AiSports.humanDetection; //获取人体识别对象 //实例化一个人体绘制对象 const graphs = new PoseGraphs();
这篇关于【一步步开发AI运动小程序】二、引入插件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-13微信小程序如何封装接口域名?-icode9专业技术文章分享
- 2024-11-13如何在微信小程序中实现直传功能?-icode9专业技术文章分享
- 2024-11-13如何在小程序的地图组件中添加标记和文字?-icode9专业技术文章分享
- 2024-11-13在微信小程序的地图组件中如何实现自定义标记和气泡?-icode9专业技术文章分享
- 2024-11-01微信小程序教程:零基础入门到实战
- 2024-11-01微信小程序全栈教程:从入门到实践
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view,支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度?-icode9专业技术文章分享