随着人工智能技术的不断发展,阿里体育等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. 手把手在STM32F103C8T6上构建可扩展可移植的DHT11驱动

    前言 如何驱动一个你陌生的传感器呢?别看我,也别在网上死马当活马医!你需要做的,首先是明确你的传感器的名称,在这里,我们想要使用的是DHT11温湿度传感器 可能需要的前置知识 简单的OLED驱动原理 ...

  2. 报错解决:partially initialized module 'charset_normalizer' has no attribute 'md__mypyc' (most likely due to a circular import)

    在运行jupyter 时候报错'partially initialized module 'charset_normalizer' has no attribute 'md__mypyc' (most ...

  3. 使用 nuxi info 查看 Nuxt 项目详细信息

    title: 使用 nuxi info 查看 Nuxt 项目详细信息 date: 2024/9/5 updated: 2024/9/5 author: cmdragon excerpt: 摘要:文章介 ...

  4. web前端使用mcg-helper代码生成工具学习笔记

    学习资料介绍 github地址:mcg-helper代码生成工具 什么是 FreeMarker? - FreeMarker 中文官方参考手册 视频学习地址: 第一节.视频教程内容介绍   探讨研发工作 ...

  5. FB 汉化版恢复慢速更新

    汉化版将恢复慢速更新 -------------------------[Q群]------------------------ 1 群: 11675361 2 群: 47642719 ------- ...

  6. BC1.2和PD 充电的区别

    USB Battery Charging Specification 1.2(BC1.2)和 USB Power Delivery(USB PD)是两个不同的充电标准,它们在应用场景.充电能力.充电协 ...

  7. 批量解压zip文件到指定位置

    话不多说,直接上代码. # coding:utf-8 import zipfile import utils_file n = 21 # 我事先知道我有多少个文件,所以确定为21 for i in r ...

  8. 65.说下vue3的使用感想(说些vue3对比vue3的方便之处)

    vue3 使用了组合式API,setup 替换了选项式api ,不需要在多个api里面写代码了,而且使用了setup的语法糖,可以更加方便写代码 : vue3使用proxy替代了Object.defi ...

  9. 62. get和post请求的区别

    与 post 相比 get请求 更简单也更快 : get 请求的数据会暴漏在地址栏中,post 请求不会,所以post 请求比get请求要安全一些 :

  10. KubeSphere 社区双周报 | Java functions framework 支持 SkyWalking | 2023.8.4-8.17

    KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...