百度釋出智慧小程式開發方案
13 日下午，2018 百度·智慧小程式學院首場線下公開課在北京舉行，百度官方資料顯示，自今年 7 月份百度 AI 開發者大會以來，百度智慧小程式月活已經過了 1.5 億，值得一提的是，智慧小程式已經在 GitHub/">GitHub 上開源，百度也即將成立開源聯盟，促進小程式生態的發展和建設。會上，百度資深前端工程師張自萌還詳解了智慧小程式的開發解決方案，以下是對其演講內容的整理報道。
智慧小程式開發流程
首先是智慧小程式的接入問題，但這要分為兩種情況，一是沒有小程式的開發經驗，從零開始的開發者，另一種是有過微信小程式開發經驗的開發者。
對於沒有開發過小程式的開發者，百度給出的解決方案是使用原生或使用應用層框架的方式進行開發。
原生開發
原生開發指的是依據百度智慧小程式的規範進行開發，它被分成了檢視層和邏輯層，在檢視層上，CSS 是標準的 CSS，與 H5 一樣有一個標記語言，標記是 SWAN 檔案，它提供了自己的容器，當然，開發者也可以自定義開發一些元件。
在邏輯層上，智慧小程式定義了一套自己的生命週期，主要是在頁面那一層，與 web 不同的是，在做頁面切換的時候，呼叫了頁面的生命週期，除了生命週期之外，還有資料管理、資料驅動的方式，通過資料驅動，模板的設計成本會變得非常低。
應用層框架接入
現如今，跨平臺開發成為開發者關注的焦點，當然百度智慧小程式也自然不會忽視開發者的需求。當開發者希望能夠以一套程式碼能夠同時執行在百度智慧小程式、微信小程式或 Web 端上時，跨平臺解決方案就派上了用場。
之前我們曾在 7 月份報道過智慧小程式 ofollow,noindex">多端執行的原理 ，即智慧小程式和 Web 是相似的，它使用的技術都是 Web 技術，可以在瀏覽器上執行，由於智慧小程式有邏輯層和檢視層，邏輯層最核心的一點是 JS 引擎，不管客戶端還是瀏覽器，都有 JS 引擎，在不同的平臺使用不同的渲染技術渲染，這就保證大家寫的程式碼一次開發在不同平臺得到執行。
但在真正使用時，你需要使用框架層接入的方式來實現，通過原始碼框架層開發，編譯之後跑在各自的平臺上，在這方面，業界出名的框架有 Taro、Mpvue、WePY，它們各自的團隊都仍在積極的維護和迭代中，在這方面，百度表示，它們願意擁抱第三方合作共建小程式框架的開發。
下面重點講一下三個框架的特點。
WePY
WePY 是一個 MVVM 框架，它跟 Vue 語法非常類似，是一個類 Vue 的框架，開發的時候像 Vue，但是底層不是 Vue；它支援元件的開發，包括 Vue 所有的迴圈、巢狀、元件 Props 傳值、元件通訊、自定義事件、第三方元件。
WePY 預設支援的是 ESNext 標準，包括 setData 效能優化（髒檢測）、事件傳參、編譯器（Babel、Ts、Less、Sass）、Mixin，同時，它還支援 NPM 資源，能夠處理 NPM 資源的依賴。
Mpvue
Mpvue 和 WePY 非常類似，它使用 Vue.js runtime 支援了小程式，實現小程式和 H5 的元件複用，它可以使用 Vue 的資料管理，包括 Web 的支援等。
Taro
有了 Vue，當然不能缺少 React，比較出名應該就是 Taro 了，Taro 遵循的是 React 語法規範，由於 React 受眾廣，它能降低小程式開發的學習成本。
Taro 在上面做了一些 JSX 處理，採用 JSX 作為模板，相比字串模板，更自由、自然、更具表現力，不依賴字串模板語法糖，也能完成複雜處理。
Taro 還有跨端解決方案，可以給 Taro 後期多端開發帶來很大的便利。
下圖中，左邊是基於 Taro 的京東好物街智慧小程式，右邊是基於 Mpvue 的官方小程式例項，大家可以開啟百度 APP 掃碼體驗一下。
最後，這是原生開發和使用應用層框架開發的總結和比較，它們沒有優劣之分，只有適不適用，開發者可以根據實際情況自行選用。
如果你開發過微信小程式
相信有不少開發者開發過微信小程式了，那麼，我們如何從微信小程式一鍵轉到百度智慧小程式上呢？大家可以看看下面的視訊：
左邊是微信小程式，是跑在微信開發者工具裡的，轉換之後先輸入微信小程式的原始碼，生成目錄，然後開始靜態編譯，靜態轉換，在百度開發者工具裡開啟產出目錄，沒動一行程式碼，遷移後，效果一模一樣，但是有一些登入支付的能力需要自己處理一下。
也就是說，開發者如果已有微信小程式，可以採用原生開發，使用遷移工具即可。百度的遷移工具有四大特點：
-
程式碼搬遷。相同程式碼，會原樣搬遷，保持程式碼行數、列數一致，方便開發者直接二次開發。
-
轉換 log。做一系列的程式碼轉換，最終都會輸出 log 給開發者，輔助開發者進行二次開發。
-
檢視轉換。Wx 指令轉換成 s- 指令，轉換非標準標籤語法，import 和 include 引用資源的轉換。
-
語法轉換。邏輯表示式中的 API 轉換，一元運算子中 API 轉換，刪除不支援的 API。
## 開發工具鏈
選擇解決方案之後，我們就需要開發小程式了，開發的時候就要用到開發工具鏈，這是小程式開發裡必不可少的流程，在這方面，百度智慧小程式提供了開發者工具，裡面囊括了編輯器、模擬器、偵錯程式、引擎除錯、編譯預覽等。
由於小程式是用在手機上，但在手機上開發除錯體驗不好，為了方便大家開發，智慧小程式支援在 PC 端開發，所以在 PC 上有一個模擬器，模擬效果和手機端的執行效果幾乎沒有什麼區別，而且百度智慧小程式支援多平臺切換，可以切換成安卓、蘋果，而且還可以模擬 wifi2G、3G 和無網路等不同的網路環境。
百度智慧小程式的編輯器是根據小程式的程式碼深度定製的，主要是程式碼提示，如果你在使用這個編輯器開發過程中使用一些 API，它都幫你自動補全，它還能支援 css,js,swan 等多檔案格式的高亮。
開發之後離不開除錯，除錯作為一個 web 開發者最常用的功能，智慧小程式自然也不會少，主要包括：
-
Swan 節點樣式除錯
-
Console 輸入輸出除錯
-
Sources 程式碼斷點除錯
-
Network 網路抓包除錯
-
Storages 編輯展現除錯
-
AppData 編輯展現除錯
-
Sensors 羅盤，重力感應除錯
還有遠端除錯，在 PC 上開發好之後先用遠端除錯，因為是跑在真機上的，PC 上有除錯面板，真機上做執行，和真機執行的效果一樣。開發者工具裡模擬開發沒有問題之後再去遠端除錯裡除錯，除錯之後再使用預覽，再看一遍，沒有問題就可以上傳了。
百度智慧小程式還有編譯工具，它支援 CMD 模式的編譯、AMD 模式的編譯、自定義編譯條件、熱編譯和增量編譯等。
更多有關百度智慧小程式的內容可以檢視以下文章：
蘇寧：我們開發百度小程式遇到的那些“坑”