在不久前結束的 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 中的 <activty></activty> 標籤，關於此頁面的一些屬性在這裡進行配置。
不知道這樣的解釋是否可以讓熟悉 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 移植到小程式上的二維碼，感興趣的小夥伴可以掃描玩玩~
