手把手教你开发人工智能微信小程序(1)：Hello WeChat！

每个开始学习编程的程序员，大约是从“Hello World！”开始的吧。就这样一个简简单单在屏幕上输出“Hello World！”字样的程序，帮助我们进入编程世界。这里我也以一个最简单的小程序开启人工智能微信小程序之旅。致敬经典，Hello WeChat！

在本文，您将掌握：

1. 如何申请微信小程序。

2. 新建支持tfjs的微信小程序工程。

3. 编写简单的tfjs代码。

申请微信小程序

在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。

然后按照向导一步步进行下去即可，如果中间遇到什么疑问，参考小程序注册流程：https://kf.qq.com/faq/170109iQBJ3Q170109JbQfiu.html

注册成功之后，登入微信公众平台。然后点击设置，记下小程序的ID，这个在后面新建小程序工程时需要：

新建微信小程序工程

1. 打开微信小程序开发者工具，新建项目，在AppID那一栏填入在上一步记下的小程序ID：

2. 点击新建按钮后，微信小程序开发者工具会自动生成小程序的基本框架代码，项目布局如下：

3. 添加tfjs微信小程序插件

   登录小程序管理后台,也就是前面步骤中的微信公众平台：设置 -> 第三方设置 -> 添加插件，搜索框中输入 wx6afed118d9e81df9，查找插件并添加。

配置微信小程序工程

1. 增加npm支持，修改基础库版本。

   点击 设置 -> 项目设置，打开项目详情界面。调试基础库请选择 2.7.0以上版本，勾选增强编译和使用 npm 模块。

2. 打开操作系统的命令行程序，进入项目的根目录，执行：

   $ npm init
   

3. 在后续的提示里，一直按回车键，使用默认值。

4. 经过第3步，在项目下会多出一个package.json文件，往该文件中添加：

   "devDependencies": {
     "miniprogram-api-typings": "^2.6.5-2"
   },
   "dependencies": {
     "@tensorflow/tfjs-core": "1.3.1",
     "fetch-wechat": "0.0.3"
   }
   

5. 再到操作系统的命令行，进入项目的根目录，接着执行：

   $ npm install
   

6. 点击微信开发者工具中的工具 -> 构建npm ，就可以继续下去。这时可能会弹出提示：

   忽略之。

7. 引入插件代码包，往项目文件的app.json文件中加入：

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

   tfjs插件的最新版本是0.07。

微信小程序中添加tfjs代码

1. 在app.js的onLaunch里调用插件configPlugin函数

   //app.js
   const fetchWechat = require('fetch-wechat');
   const tf = require('@tensorflow/tfjs-core');
   const plugin = requirePlugin('tfjsPlugin');
    
    
   App({
     onLaunch: function () {
       plugin.configPlugin({
         // polyfill fetch function
         fetchFunc: fetchWechat.fetchFunc(),
         // inject tfjs runtime
         tf,
         // provide webgl canvas
         canvas: wx.createOffscreenCanvas()
       });
    
    
       // 其它初始化代码
     }
   });
   

2. 组件设置完毕就可以开始使用 TensorFlow.js库的API了。比如加入如下简单的代码：

   tf.tensor("Hello WeChat!").print();
   

   这段代码将在微信开发者工具的调试控制台输出：

至此，一个非常非常简单的人工智能微信小程序就完成了，虽然它啥事也没干。别着急，在后面的文章将逐步带你深入人工智能小程序的开发。

小结

本章主要讲解了建立一个支持tfjs的微信小程序工程，包括申请微信小程序，配置微信小程序工程，以及添加一段简单的tjfs代码。在下一篇文章中，我将以一个线性回归的例子，说明微信小程序中的tfjs。如果你有什么建议，欢迎留言。

本系列文章的源码请访问：

https://github.com/mogotech/wechat-tfjs-examples