258资源分享网

在不久前结束的 Google I/O 大会上，Google 宣传公司将从以 "Mobile-first" 过渡到以 "AI-first" 为主旨的产品研发。并且在大会中还介绍了由 Google 实验室团队开发的一款基于机器学习的 Auto Draw 工具。该工具是基于用户的涂鸦经过机器学习处理后，推断出用户想要画的图像，是一款很好玩并且很使用的工具。只不过基于国内的网络环境是无法访问直接访问 Auto Draw 的网站的，必须借助于“梯子”才可以访问到。为了可以让国内更多的用户可以感受一下，Google 基于机器学习开发的 Auto Draw。故有了将其移植到小程序上的想法。下面将会详细的讲解，我是如何将 Google Auto Draw 移植到小程序上的。了解微信小程序

既然是要把 Auto Draw 移植到小程序上，那首要任务就是要了解小程序开发平台及相关的开发文档。在这里推荐一个小程序的官方 Demo,此 Demo 详细的讲解了微信小程序中各组件的使用方法，结合着开发文档再对照着此 Demo，就很容易掌握小程序整体的开发流程。

微信小程序有专门的官方开发工具，使用开发工具建立项目会就可以基于生成的模板进行相应的业务逻辑开发。文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件 必填 作用
app.js   是   小程序逻辑  
app.json   是   小程序公共设置  
app.wxss   否   小程序公共样式表  

一个小程序页面由四个文件组成，分别是：

文件 必填 作用
js   是   页面逻辑  
wxml   是   页面结构  
wxss   否   页面样式表  
json   否   页面配置  

因为本人之前一直从事的是 Android 开发，看到小程序的文件结构的时候，将其与 Android 的文件结构进行了对比，发现这两者的文件结构其实是很相似的。

熟悉 Android 开发的应该也能看得出来， app.js 类似于 Android 中的 Application，是一个默认启动的全局变量。app.json 则可以看作是 AndroidManifest 一些跟页面相关的配置需要在这里进行配置。而 app.wxss 可以看作是 Android Resource 中的 style，通用组件的属性可以放在这里。

小程序的页面文件组成中，js 可以看作 Android 中的 Activity 用于处理页面逻辑。wxml 则相当于 layout 用于对页面进行布局。wxss 同样可以看作是 style 只不过其作用范围只限于此页面。json 可以看作是 AndroidManifest 中的 标签，关于此页面的一些属性在这里进行配置。

不知道这样的解释是否可以让熟悉 Android 开发的小伙伴们，对理解小程序的文件结构更容易一些。调试 Google Auto Draw

在使用 Google Auto Draw 时, 就考虑既然是会将用户的涂鸦交由机器学习进行学习，那应该是通过调用 API 接口来实现的。通过使用 Chrome 的 Inspect 调试后，然后果然如猜测的一样找到了请求的 API，如下图所示

可以看到当用户在画板上结束绘画之后，就会向 https://inputtools.google.com/request?ime=handwriting&app=autodraw&dbg=1&cs=1&oe=UTF-8 发送一个 POST 请求，并将用户在画板上绘制的座标，即上图Request Payload 部分通过 application/json 的方式传递给后台服务器，然后后台服务器经过机器学习的处理后，将预测的结构返回回来，如下图所示