在不久前結束的 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。一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：

一個小程序頁面由四個文件組成，分別是：

因為本人之前一直從事的是 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 的方式傳遞給后臺服務器，然后后臺服務器經過機器學習的處理后，將預測的結構返回回來，如下圖所示

通過返回的 Response 可以明白，Auto Draw 將用戶涂鴉后的圖像經過機器學習處理后，是轉化為了圖像可能所對應的英語單詞，而不是直接畫出推測的圖像。這不禁讓我聯想到了 Google 實驗室更早些的時候推出的 Quick Draw, 就是根據用戶的涂鴉，機器學習以英語單詞的形式來推算你畫的是什么。我接著對 Quick Draw 用相同的方法進行了調試，果然后臺調用的 API 是一模一樣的。原來 Auto Draw 是基于 Quick Draw 進行的開發。

已經知道了機器學習是先將用戶的涂鴉轉化為推測的英語單詞，那么接下來的問題則需要搞清楚 Auto Draw 是如何將這些英語單詞轉變成圖像的。

繼續調試不難發現，Auto Draw 在第一次加載的時候還會調用一個 GET 的請求，如下圖所示

Auto Draw 在第一次加載的時候會發送向 https://www.autodraw.com/assets/stencils.json 發送一個 GET 請求。那這個請求又返回了什么呢?

啊哈！查看請求的 Response 的就會發現這是一個英語單詞及單詞所對應存放在 Google storage 上圖像的 JSON 集合。原來Auto Draw 是通過這個 JSON 集合，實現了英語單詞到圖像的轉化。通過調試，Auto Draw 整體的一個核心 API 調用流程就很清楚了。

以上就是根據調試，得到的 Auto Draw 的時序圖。開發中的坑

通過上面的調試已經摸清楚了 Auto Draw 的調用流程。那下面就可以進入到實戰的開發階段了。但是沒想到高興的太早了，實際在開發當中遇到了很多的坑，下面就來講講遇到了哪些坑，又是如何把坑給填平的。小程序開發文檔簡陋

目前微信小程序的開發文檔還是過于的簡陋，好多在實際開發中很重要的點，文檔都沒有涉及到。

例如，在 SKetch 里要給小程序做設計的時候，應該基于什么樣的分辨率的畫板下，文檔中并沒有很好的涉及到。

還有我在開發當中想自定義 button 的邊框，于是在 WXSS 當中為 button 添加了如下的屬性

border:1px solid rgba(0, 0, 0, 0.2);

但實際效果會邊框出現兩條線，自定義的邊框只是在默認邊框上進行了繪制，默認邊框并沒有消失，很是難看，button 的自定義問題在開發文檔中一點都沒有提及到。

幸虧騰訊前端工程師在知乎上的《有用！關于微信小程序，那些開發文檔沒有告訴你的》這篇文章拯救了我。強烈推薦想開發小程序的小伙伴再看了開發文檔之后，一定要閱讀這篇文章。

微信小程序的坑還不止這些，但是相信隨著微信團隊的不斷維護，微信小程序會越來越趨向成熟穩定。服務器域名

文中最開始已經提到了，想將 Auto Draw 移植到小程序，是因為國內訪問 Auto Draw 會收到各種的限制。最初的想法是將小程序的網絡請求先經過我在國外的 VPS，然后轉發給 Google 的服務器，變相的繞過了攔截。可是在看了小程序的開發文檔后，發現微信對小程序可以訪問的網絡請求擁有很嚴格的限制，必須是 HTTPS 和備案過的域名才可以。

支持 HTTPS 還好說現在有好多免費辦法證書的機構，但是必須是備案過的域名確實難搞。備案需要準備相應文件和差不多一周的審核時間，而且我這還涉及到了訪問 Google 的服務。看到微信小程序的這些限制后，讓我一度有了這項目做不了的想法。

幸虧天無絕人之路，我突然想到之前開發手機 App 經常用到 BaaS 提供商 LeanCloud。LeanCloud 不光有支持 HTTPS 和備案過的域名，而且它們還有一個云引擎服務。

云引擎是 LeanCloud 推出的服務端托管平臺。提供了多種運行環境（Node.js, Python 等）來運行服務端程序。需要提供服務端的業務邏輯（網站或云函數等），而服務端的多實例負載均衡，不中斷服務的平滑升級等都由云引擎提供支持。

簡單的講，你可以把你寫的腳本或者后臺程序放在 LeanCloud 提供的云平臺。更重要的是 LeanCloud 有國內和美國兩個節點，美國的節點可以暢通無阻的直接訪問 Google 服務。這完全符合我的需求，簡直就是量身定做。哈哈哈

在 LeanCloud 的開發文檔中果然發現了支持微信小程序的文檔。文檔比較詳細，反正比微信小程序的官方文檔是要好很多，哈哈。

根據開發文檔我講微信小程序的服務器域名配置如下

request合法域名

https://api.bmob.cn
https://api.leancloud.cn
https://app-router.leancloud.cn
https://router-g0-push.leancloud.cn
https://vcn64yge.api.lncld.net
https://vcn64yge.engine.lncld.net
https://us-api.leancloud.cn
https://router-a0-push.leancloud.cn
https://storage.googleapis.com

socket合法域名

wss://api.bmob.cn
wss://cn-n1-cell1.leancloud.cn
wss://cn-n1-cell2.leancloud.cn
wss://cn-n1-cell5.leancloud.cn
wss://cn-n1-cell7.leancloud.cn

uploadFile合法域名

https://api.bmob.cn
https://up.qbox.me

downloadFile合法域名

https://api.bmob.cn
https://dn-vCn64yGe.qbox.me

以上是 LeanCloud 國內和美國站點的服務器域名，因為微信對小程序修改服務器域名每個月有次數限制，故建議一次性都寫進去，不管是否會用的著。

關于如何使用 LeanCloud 的云引擎，官方文檔已經介紹的很詳細，這里就不再重復。關于 Auto Draw 小程序 LeanCloud 云引擎的腳本，可以在這里查看。

解決了域名和 HTTPS 的問題，剩下的就是愉快寫代碼了~開源相關

• Auto Draw 小程序代碼
• LeanCloud 云引擎腳本參考

• Google Auto Draw
• 關于微信小程序，那些開發文檔沒有告訴你的
• 微信小程序開發資源匯總
• 小程序官方 Demo小程序二維碼

最后附上 Auto Draw 移植到小程序上的二維碼，感興趣的小伙伴可以掃描玩玩~