uniapp使用tensorflow.js（微信端01）

uniapp使用tensorflow.js（微信端-01）

该文章作为记录使用，因本人技术很差所以很多语句我也不懂，只是会使用，我也是跟着视频来学，只作为记录，比较感兴趣，大神直接到官方文档就行，我是根据视频教程来做的下面我也会发视频的教程链接

官方文档地址：tensorflow.js中国文档

视频教程地址：bilibili的教程

在微信小程序中使用tensorflow.js的话其实和微信中写是一样的不过我习惯用uniapp写

1.配置插件

第一种：需要在配置文件中设置微信插件的使用manifest.json中改为源码试图，在里面找到mp-weixin添加以下代码

第二种：这种是分包处理方式，我这边因为是就其中一个模块用到所以我就以分包的模式添加的，在pages.json中，写到分包的那一模块下与root平级

写这一块的时候可以看一下微信官方tensorflow.js文档里面有详细的教程，注意文档的更新记录（最开始我使用的时0.1.0版本，一直在报错 ）文档内容不是最新的，文档中有坑，0.1.0版本的只支持TensorFlow.js 2.x，0.2.0版本的才支持TensorFlow.js 3.x

"plugins": {
    "tfjsPlugin": {  
    "version": "0.2.0",  
    "provider": "wx6afed118d9e81df9"  
    }  
}

2.引入TensorFlow.js npm

无论是小程序还是uniapp都需要使用npm加载TensorFlow.js

TensorFlow.js v2.0 有一个联合包 - @tensorflow/tfjs，包含了六个分npm包：

• tfjs-core: 基础包
• tfjs-converter: GraphModel 导入和执行包
• tfjs-layers: LayersModel 创建，导入和执行包
• tfjs-backend-webgl: webgl 后端
• tfjs-backend-cpu: cpu 后端
• tfjs-data：数据流

对于小程序而言，由于有2M的app大小限制，不建议直接使用联合包，而是按照需求加载分包。

需要加载4个包，视频里只加载了三个包 现在这个版本会报错，所以我引入了四个包分别如下

npm i @tensorflow/tfjs-core
npm i @tensorflow/tfjs-backend-webgl
npm i @tensorflow/tfjs-converter
npm i fetch-wechat

加载完需要引入下载的包，在使用的地方引入就好 或者在全局js中引入

var fetchWechat = require('fetch-wechat');
var tf = require('@tensorflow/tfjs-core');
var webgl = require('@tensorflow/tfjs-backend-webgl');
var plugin = requirePlugin('tfjsPlugin');

3.onLaunch里调用插件configPlugin函数

可在全局的app.vue中添加，也可以在使用的页面中添加configPlugin函数，按照自己的需求，我是添加在页面当中的

plugin.configPlugin({
    // polyfill fetch function
    fetchFunc: fetchWechat.fetchFunc(),
    // inject tfjs runtime
    tf,
    // inject webgl backend
    webgl,
    // provide webgl canvas
    canvas: wx.createOffscreenCanvas()
});
tf.tensor([1,2,3,4]).print() //这是测试语句 运行微信小程序后输出这句话就证明已经加载成功了