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

智能小程序開發(fā)流程

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

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

原生開發(fā)

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

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

應(yīng)用層框架接入

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

之前我們曾在7月份報道過智能小程序多端運行的原理，即智能小程序和 Web 是相似的，它使用的技術(shù)都是 Web 技術(shù)，可以在瀏覽器上運行，由于智能小程序有邏輯層和視圖層，邏輯層最核心的一點是 JS 引擎，不管客戶端還是瀏覽器，都有 JS 引擎，在不同的平臺使用不同的渲染技術(shù)渲染，這就保證大家寫的代碼一次開發(fā)在不同平臺得到運行。

但在真正使用時，你需要使用框架層接入的方式來實現(xiàn)，通過源碼框架層開發(fā)，編譯之后跑在各自的平臺上，在這方面，業(yè)界出名的框架有Taro、Mpvue、WePY，它們各自的團隊都仍在積極的維護和迭代中，在這方面，百度表示，它們愿意擁抱第三方合作共建小程序框架的開發(fā)。

下面重點講一下三個框架的特點。

WePY

WePY是一個MVVM框架，它跟Vue語法非常類似，是一個類Vue的框架，開發(fā)的時候像Vue，但是底層不是Vue；它支持組件的開發(fā)，包括Vue所有的循環(huán)、嵌套、組件Props傳值、組件通信、自定義事件、第三方組件。

WePY默認支持的是ESNext標準，包括setData性能優(yōu)化（臟檢測）、事件傳參、編譯器（Babel、Ts、Less、Sass）、Mixin，同時，它還支持NPM資源，能夠處理NPM資源的依賴。

Mpvue

Mpvue和WePY非常類似，它使用Vue.js runtime支持了小程序，實現(xiàn)小程序和H5的組件復(fù)用，它可以使用Vue的數(shù)據(jù)管理，包括Web的支持等。

Taro

有了Vue，當(dāng)然不能缺少React，比較出名應(yīng)該就是Taro了，Taro遵循的是React 語法規(guī)范，由于React受眾廣，它能降低小程序開發(fā)的學(xué)習(xí)成本。

Taro在上面做了一些JSX處理，采用JSX作為模板，相比字符串模板，更自由、自然、更具表現(xiàn)力，不依賴字符串模板語法糖，也能完成復(fù)雜處理。

Taro還有跨端解決方案，可以給Taro后期多端開發(fā)帶來很大的便利。

下圖中，左邊是基于Taro的京東好物街智能小程序，右邊是基于Mpvue的官方小程序?qū)嵗?#xff0c;大家可以打開百度APP掃碼體驗一下。

最后，這是原生開發(fā)和使用應(yīng)用層框架開發(fā)的總結(jié)和比較，它們沒有優(yōu)劣之分，只有適不適用，開發(fā)者可以根據(jù)實際情況自行選用。

如果你開發(fā)過微信小程序

相信有不少開發(fā)者開發(fā)過微信小程序了，那么，我們?nèi)绾螐奈⑿判〕绦蛞绘I轉(zhuǎn)到百度智能小程序上呢？大家可以看看下面的視頻：

左邊是微信小程序，是跑在微信開發(fā)者工具里的，轉(zhuǎn)換之后先輸入微信小程序的原代碼，生成目錄，然后開始靜態(tài)編譯，靜態(tài)轉(zhuǎn)換，在百度開發(fā)者工具里打開產(chǎn)出目錄，沒動一行代碼，遷移后，效果一模一樣，但是有一些登錄支付的能力需要自己處理一下。

也就是說，開發(fā)者如果已有微信小程序，可以采用原生開發(fā)，使用遷移工具即可。百度的遷移工具有四大特點：

• 代碼搬遷。相同代碼，會原樣搬遷，保持代碼行數(shù)、列數(shù)一致，方便開發(fā)者直接二次開發(fā)。

• 轉(zhuǎn)換log。做一系列的代碼轉(zhuǎn)換，最終都會輸出log給開發(fā)者，輔助開發(fā)者進行二次開發(fā)。

• 視圖轉(zhuǎn)換。Wx指令轉(zhuǎn)換成s-指令，轉(zhuǎn)換非標準標簽語法，import和include引用資源的轉(zhuǎn)換。

• 語法轉(zhuǎn)換。邏輯表達式中的API轉(zhuǎn)換，一元運算符中API轉(zhuǎn)換，刪除不支持的API。

##開發(fā)工具鏈

選擇解決方案之后，我們就需要開發(fā)小程序了，開發(fā)的時候就要用到開發(fā)工具鏈，這是小程序開發(fā)里必不可少的流程，在這方面，百度智能小程序提供了開發(fā)者工具，里面囊括了編輯器、模擬器、調(diào)試器、引擎調(diào)試、編譯預(yù)覽等。

由于小程序是用在手機上，但在手機上開發(fā)調(diào)試體驗不好，為了方便大家開發(fā)，智能小程序支持在PC端開發(fā)，所以在PC上有一個模擬器，仿真效果和手機端的運行效果幾乎沒有什么區(qū)別，而且百度智能小程序支持多平臺切換，可以切換成安卓、蘋果，而且還可以模擬wifi2G、3G和無網(wǎng)絡(luò)等不同的網(wǎng)絡(luò)環(huán)境。

百度智能小程序的編輯器是根據(jù)小程序的代碼深度定制的，主要是代碼提示，如果你在使用這個編輯器開發(fā)過程中使用一些API，它都幫你自動補全，它還能支持css,js,swan等多文件格式的高亮。

開發(fā)之后離不開調(diào)試，調(diào)試作為一個web開發(fā)者最常用的功能，智能小程序自然也不會少，主要包括：

• Swan 節(jié)點樣式調(diào)試

• Console 輸入輸出調(diào)試

• Sources 代碼斷點調(diào)試

• Network 網(wǎng)絡(luò)抓包調(diào)試

• Storages 編輯展現(xiàn)調(diào)試

• AppData 編輯展現(xiàn)調(diào)試

• Sensors 羅盤，重力感應(yīng)調(diào)試

還有遠程調(diào)試，在PC上開發(fā)好之后先用遠程調(diào)試，因為是跑在真機上的，PC上有調(diào)試面板，真機上做運行，和真機運行的效果一樣。開發(fā)者工具里模擬開發(fā)沒有問題之后再去遠程調(diào)試里調(diào)試，調(diào)試之后再使用預(yù)覽，再看一遍，沒有問題就可以上傳了。

百度智能小程序還有編譯工具，它支持CMD模式的編譯、AMD模式的編譯、自定義編譯條件、熱編譯和增量編譯等。

更多有關(guān)百度智能小程序的內(nèi)容可以查看以下文章：

百度新發(fā)布的智能小程序是什么？

蘇寧：我們開發(fā)百度小程序遇到的那些“坑”

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的百度智能小程序正式开源，开发方案详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。