随着人工智能技术的不断发展,阿里体育等IT大厂,推出的“乐动力”、“天天跳绳”AI运动APP,让云上运动会、线上运动会、健身打卡、AI体育指导等概念空前火热。那么,能否将这些在APP成功应用的场景搬上小程序,分享这些概念的红利呢?本系列文章就带您一步一步从零开始开发一个AI运动小程序,本系列文章将使用“云智AI运动识别小程序插件”,请先行在微信服务市场官网了解详情。

一、小程序的程序包限制

引用插件后,导致程序包超出2M的限制的问题,是我们插件广大调用者,拿到插件后最常咨询的问题,插件由于识别引擎代码量较大,所以占用的空间确实偏大,但我们可以通过分包的方案来轻松解决这个问题。下面我们就来看如何实现分包,要使用分包之前,请先阅读官方分包文档https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

二、插件分包建议方案

我们建议各开发者,将插件及运动识别相关组件、页面放置到一个独立的分包中,如module-sport,并做适当的分包预加载配置,这样便可以让运动相关功能代码包,既不占用主包和其它子包的代码空间,又兼顾加载性能。特别是已有应用集成,就不会影响任何现有功能了。

三、在uni-app中实现分包

3.1、划立运动分包

在项目的中新建一个名module-sport的文件夹,做为分包文件夹,将所有AI运动相关的组件、页面、JS文件、静态资源全部放入其中。

3.2、在mainifest.json文件中配置分包优化

用记事本或其它编辑器(HBuilderX不能编辑mainifest.json)编辑项目的mainifest.json文件,找到mp-weixin节,添加分包优化选项,如下图所示:

"mp-weixin" : {
"appid" : "wx6130e578c4a26a1a",
"setting" : {
"urlCheck" : false,
"minified" : true,
"postcss" : false
},
"usingComponents" : true,
"optimization" : {
"subPackages" : true //开启分包优化
}
}

3.3、在pages.json文件中注册分包

"subPackages": [{
"root": "module-sport",
"pages": [{
"path": "pages/sport",
"style": {
"navigationBarTitleText": "运动检测演示",
"enablePullDownRefresh": false
}
}...],
"plugins": {
//将插件放在子包中引用,则插件将占用子包空间
"aiSport": {
"version": "1.0.16",
"provider": "wx6130e578c4a26a1a"
}
}
}]

3.4 在pages.json加入运动分包预加载,加速包下载

"preloadRule": {
"pages/welcome": {
"network": "all",
"packages": ["module-sport"]
}
},

到此便实现了将运动功能分包及加载优化,我们为您准备了完整的分包Demo参考项目,插件调用用户请联系我们索取。

四、在原生小程序中实现分包

由于原生的分包配置相对更简便,操作也大同小异,按照官方文档操作即可,就不在此赘述了,插件调用用户也可直接向我们索引取原生版的分包Demo参考项目。

五、分包效果

接下来我们看看分包前与分包后的代码大小对比,如下两图所示:

好了分包就为您介绍到,下篇我们将为您介绍,运动识别时如何判断人体远近问题,敬请期待...

【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?的更多相关文章

  1. 开发一个微信小程序教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序 ...

  2. 开发一个微信小程序项目教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  3. 如何快速地开发一个微信小程序

    如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...

  4. Java可视化日历(Date类、DATe Format类、Calendar类综合运用),开发可视化日历小程序

    Java时间日期类综合运用,开发可视化日历小程序 由键盘输入指定格式的日期,打印这个月的日历 1.代码 import java.text.DateFormat; import java.text.Pa ...

  5. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  6. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  7. 全栈开发工程师微信小程序-中

    全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...

  8. 全栈开发工程师微信小程序-上(下)

    全栈开发工程师微信小程序-上(下) icon 图标 success, success_no_circle, info, warn, waiting, cancel, download, search, ...

  9. 全栈开发工程师微信小程序-上(中)

    全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...

  10. 全栈开发工程师微信小程序 - 上

    全栈开发工程师微信小程序-上 实现swiper组件 swiper 滑块视图容器. indicator-dots 是否显示面板指示点 false indicator-color 指示点颜色 indica ...

随机推荐

  1. 关于phpstudy小坑 经典数据库报错 1044

    经典数据库报错  1044   权限问题 一个很经典的问题 使用的集成环境的phpstudy ,  一直都挺好的  但是每次删除后不能创建同名的数据库   最后发现原来默认的只有一个库  在这个库下面 ...

  2. 带你了解 WebAssembly 的发展、应用与开发

    一.WebAssembly 是什么? "WebAssembly(缩写为 Wasm)是一种基于堆栈式虚拟机的二进制指令集.Wasm 被设计成为一种编程语言的可移植编译目标,并且可以通过将其部署 ...

  3. R 语言使用

    安装 brew install r --formulae 使用 CLI /opt/homebrew/bin/r # 进入 R 交互式编程界面 GUI GUI 有官方的 R Studio,不过界面我不是 ...

  4. mysql 存储结构介绍及执行过程分析

    MySQL体系结构介绍 1 mysql 的体系结构 MySQL整体的逻辑结构可以分为4层,客户层.服务层.存储引擎层.数据层 客户层 客户层:进行相关的连接处理.权限控制.安全处理等操作 服务层 服务 ...

  5. 为什么MySQL 默认隔离级别是RR,又被阿里设置为RC

    我们知道,我们可以通过这个命令查看数据库当前的隔离级别,MySQL 默认隔离级别是RR. select @@tx_isolation; ANSI/ISO SQL定义的标准隔离级别有四种,从高到底依次为 ...

  6. LeetCode题集-3 - 无重复字符的最长子串

    题目:给定一个字符串 s ,请你找出其中不含有重复字符的最长子串的长度. 我们先来好好理解题目,示例1中怎么得到长度为3的? 如果以第一个字符a为起始,不含重复的最长子串是abc:则我们这样表示(a) ...

  7. C# HttpClient 基本使用方式(一)

    .NetCore主要提供了HttpWebRequest,WebClient,HttpClient这三种访问web的方式,其中HttpWebRequest,WebClient都在官方被标注为已过时,如果 ...

  8. @RequestBody注意事项

    使用@RequestBody注解时,是用于接收Content-Type为application/json类型的请求,数据类型是JSON:{"aaa":"111" ...

  9. [TK] 矩阵取数游戏<简单版> hzoi-tg-906-2

    本题是一个坐标DP问题 状态转移 首先我们注意到,一个状态只能由两种前置状态得到:取左边的数和取右边的数,因此我们以状态为阶段定义如下: \(f[a][b][c]\) 为状态转移数组,其中 \(a\) ...

  10. 《华为云DTSE》期刊免费下载:10个案例读懂云上架构升级策略

    本文分享自华为云社区<<华为云DTSE>期刊第四期赋能云专刊,赋能云场景下DTSE服务各类开发者的案例分享>,作者:HuaweiCloudDeveloper. 把公司的开发者平 ...