《智能前端技术与实践》——第1章 开发环境配置——1.7 使用微信开发者工具——1.7.2 使用微信小程序插件（上）

1.7.2 使用微信小程序插件

完成 TensorFlowJS 插件的添加后，我们即可在“插件管理”界面中看到所添加的插件， 如图 1-54 所示。

接下来，在图 1-54 所示界面中，单击“详情”超链接，进入 TensorFlowJS 插件的详情页 并查看 TensorFlowJS 的开发文档，如图 1-55 所示。

最后，我们将完整演示从微信小程序项目的创建到成功在项目中使用TensorFlowJS插件的全过程。

1）新建一个微信小程序项目

启动微信开发者工具，并填入该项目的相关信息，新建微信小程序项目，如图1-56所示。

2）安装相关包

我们通过终端工具进入该项目，并通过代码清单1-30所示命令进行项目的初始化。初始化过程中，系统会提示我们输入一些关于该项目的信息，如果没有特殊需求，一般选择默认选项即可，如图1-57所示。

代码清单 1-30

npminit

接下来，通过代码清单 1-31 所示命令安装基础包。

代码清单1-31

npminstall@tensorflow/tfjs-core

通过代码清单1-32所示命令安装tfjs-converter包。

代码清单1-32

npminstall@tensorflow/tfjs-converter

在本书后续相关案例中，我们需要使用tf.loadGraphModel或tf.loadLayersModel API来载入模型，因此还需要通过npm安装fetch-wechat包，如代码清单1-33所示。

代码清单1-33

npminstallfetch-wechat

最后，安装tfjs-backend-webgl包，如代码清单1-34所示。

代码清单1-34

npminstall@tensorflow/tfjs-backend-webgl

安装完成后，我们切换到微信开发者工具的界面，选择“工具”→“构建npm”选项，开始构建我们刚刚安装的所有npm包，如图1-58所示。

注意，每当安装新的npm包后，都要重新做一遍“构建npm”的过程，否则所安装的 npm 包就不能正常调用。构建完成后，若我们可以看到图 1-59 所示信息，就表示构建成功。

《智能前端技术与实践》——第1章 开发环境配置——1.7 使用微信开发者工具——1.7.2 使用微信小程序插件（下） https://developer.aliyun.com/article/1228394?groupCode=tech_library