13 日下午，2018 百度·智能小程序學院首場線下公開課在北京舉行，百度官方數據顯示，自今年 7 月份百度 AI 開發者大會以來，百度智能小程序月活已經過了 1.5 億，值得一提的是，智能小程序已經在 GitHub 上開源，百度也即將成立開源聯盟，促進小程序生態的發展和建設。會上，百度資深前端工程師張自萌還詳解了智能小程序的開發解決方案，以下是對其演講內容的整理報道。

智能小程序開發流程

首先是智能小程序的接入問題，但這要分為兩種情況，一是沒有小程序的開發經驗，從零開始的開發者，另一種是有過微信小程序開發經驗的開發者。

對于沒有開發過小程序的開發者，百度給出的解決方案是使用原生或使用應用層框架的方式進行開發。

原生開發

原生開發指的是依據百度智能小程序的規范進行開發，它被分成了視圖層和邏輯層，在視圖層上，CSS 是標準的 CSS，與 H5 一樣有一個標記語言，標記是 SWAN 文件，它提供了自己的容器，當然，開發者也可以自定義開發一些組件。

在邏輯層上，智能小程序定義了一套自己的生命周期，主要是在頁面那一層，與 web 不同的是，在做頁面切換的時候，調用了頁面的生命周期，除了生命周期之外，還有數據管理、數據驅動的方式，通過數據驅動，模板的設計成本會變得非常低。

應用層框架接入

現如今，跨平臺開發成為開發者關注的焦點，當然百度智能小程序也自然不會忽視開發者的需求。當開發者希望能夠以一套代碼能夠同時運行在百度智能小程序、微信小程序或 Web 端上時，跨平臺解決方案就派上了用場。

之前我們曾在 7 月份報道過智能小程序 多端運行的原理 ，即智能小程序和 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 模式的編譯、自定義編譯條件、熱編譯和增量編譯等。