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

智能小程序開發流程

首(shou)先是(shi)智能小程序的(de)(de)接入(ru)問題，但這要(yao)分(fen)為兩種情況，一是(shi)沒有小程序的(de)(de)開(kai)(kai)發(fa)(fa)經驗(yan)，從零開(kai)(kai)始的(de)(de)開(kai)(kai)發(fa)(fa)者，另(ling)一種是(shi)有過(guo)微信小程序開(kai)(kai)發(fa)(fa)經驗(yan)的(de)(de)開(kai)(kai)發(fa)(fa)者。

對于沒有開(kai)發(fa)過小程序(xu)的開(kai)發(fa)者，百度(du)給(gei)出的解(jie)決方案是(shi)使用(yong)原生或(huo)使用(yong)應用(yong)層框(kuang)架的方式(shi)進(jin)行開(kai)發(fa)。

原生開發

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

在(zai)邏輯層(ceng)上，智能(neng)小程序定義了一套自己的(de)(de)生(sheng)命周(zhou)期(qi)，主要是在(zai)頁(ye)面那一層(ceng)，與(yu) web 不(bu)同的(de)(de)是，在(zai)做頁(ye)面切換(huan)的(de)(de)時候，調用(yong)了頁(ye)面的(de)(de)生(sheng)命周(zhou)期(qi)，除了生(sheng)命周(zhou)期(qi)之外，還有數(shu)據(ju)(ju)管(guan)理(li)、數(shu)據(ju)(ju)驅(qu)動(dong)的(de)(de)方式，通過數(shu)據(ju)(ju)驅(qu)動(dong)，模板的(de)(de)設計成本會變得非常(chang)低。

應用層框架接入

現如今，跨平(ping)臺(tai)開(kai)發(fa)(fa)(fa)成為開(kai)發(fa)(fa)(fa)者(zhe)(zhe)(zhe)關注的焦點，當然百度(du)智能(neng)小程序(xu)也(ye)自然不會(hui)忽視開(kai)發(fa)(fa)(fa)者(zhe)(zhe)(zhe)的需(xu)求(qiu)。當開(kai)發(fa)(fa)(fa)者(zhe)(zhe)(zhe)希(xi)望能(neng)夠(gou)以一套代碼能(neng)夠(gou)同時運行在(zai)百度(du)智能(neng)小程序(xu)、微信小程序(xu)或 Web 端上(shang)時，跨平(ping)臺(tai)解決方案就派上(shang)了用場。

之前我們(men)曾在 7 月份報道過智(zhi)(zhi)能(neng)小程序(xu)(xu) 多端(duan)運行的(de)原(yuan)理 ，即(ji)智(zhi)(zhi)能(neng)小程序(xu)(xu)和 Web 是相似的(de)，它使用的(de)技(ji)術(shu)都(dou)是 Web 技(ji)術(shu)，可以在瀏覽器上運行，由于智(zhi)(zhi)能(neng)小程序(xu)(xu)有(you)邏輯(ji)層(ceng)和視圖層(ceng)，邏輯(ji)層(ceng)最核心的(de)一(yi)點是 JS 引擎，不管客戶端(duan)還(huan)是瀏覽器，都(dou)有(you) JS 引擎，在不同的(de)平臺使用不同的(de)渲(xuan)(xuan)染技(ji)術(shu)渲(xuan)(xuan)染，這(zhe)就保證大家寫(xie)的(de)代(dai)碼一(yi)次開發在不同平臺得(de)到運行。

但在(zai)真正使(shi)用時，你(ni)需要使(shi)用框架層接入(ru)的(de)(de)(de)方(fang)式來實現，通(tong)過源(yuan)碼框架層開發，編譯之(zhi)后跑在(zai)各(ge)自的(de)(de)(de)平臺上，在(zai)這方(fang)面(mian)，業界出名的(de)(de)(de)框架有 Taro、Mpvue、WePY，它們各(ge)自的(de)(de)(de)團隊都仍(reng)在(zai)積極的(de)(de)(de)維護(hu)和(he)迭代中(zhong)，在(zai)這方(fang)面(mian)，百度(du)表示(shi)，它們愿意擁抱(bao)第三方(fang)合作共建(jian)小程序框架的(de)(de)(de)開發。

下(xia)面重點(dian)講一(yi)下(xia)三個框架(jia)的特點(dian)。

WePY

WePY 是(shi)一個 MVVM 框(kuang)架，它跟 Vue 語法(fa)非常類似，是(shi)一個類 Vue 的(de)框(kuang)架，開發的(de)時候像(xiang) Vue，但是(shi)底層不是(shi) Vue；它支持組(zu)件(jian)(jian)(jian)(jian)的(de)開發，包括 Vue 所有的(de)循(xun)環、嵌套、組(zu)件(jian)(jian)(jian)(jian) Props 傳(chuan)值(zhi)、組(zu)件(jian)(jian)(jian)(jian)通信、自定義事件(jian)(jian)(jian)(jian)、第三方組(zu)件(jian)(jian)(jian)(jian)。

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

Mpvue

Mpvue 和(he) WePY 非常類似，它(ta)使用 Vue.js runtime 支(zhi)持(chi)了小(xiao)程(cheng)序(xu)，實現小(xiao)程(cheng)序(xu)和(he) H5 的(de)組件(jian)復用，它(ta)可以(yi)使用 Vue 的(de)數據管理，包(bao)括 Web 的(de)支(zhi)持(chi)等。

Taro

有了 Vue，當(dang)然不能(neng)缺少 React，比較出名應該就是(shi) Taro 了，Taro 遵(zun)循(xun)的是(shi) React 語法規范，由于 React 受眾廣，它能(neng)降低小程序開(kai)發(fa)的學習成本。

Taro 在上面做了一些 JSX 處(chu)理，采用 JSX 作為模板(ban)，相比字符(fu)(fu)串模板(ban)，更自由、自然、更具表現力，不(bu)依賴字符(fu)(fu)串模板(ban)語(yu)法糖，也(ye)能(neng)完成復(fu)雜處(chu)理。

Taro 還有跨端(duan)解決方案，可以給 Taro 后(hou)期(qi)多端(duan)開(kai)發帶(dai)來很大的便利(li)。

下(xia)圖(tu)中(zhong)，左(zuo)邊是基(ji)于 Taro 的京東好(hao)物街智能小程(cheng)序，右邊是基(ji)于 Mpvue 的官(guan)方(fang)小程(cheng)序實例，大家可以打開百度 APP 掃(sao)碼(ma)體驗一(yi)下(xia)。

最后，這是(shi)原生開(kai)發和使用應用層框架開(kai)發的總結和比較，它們(men)沒有優劣之(zhi)分(fen)，只有適不適用，開(kai)發者可以(yi)根據實際情況自(zi)行選(xuan)用。

如果你開發過微信小程序

 相(xiang)信有不少(shao)開發者開發過微信小程序了，那么，我們如何從微信小程序一鍵轉(zhuan)到百度智(zhi)能小程序上呢？大家可以(yi)看看下面的視(shi)頻：

左邊是(shi)微信(xin)小程序(xu)，是(shi)跑在微信(xin)開發者工具里的，轉(zhuan)換之后(hou)先(xian)輸入(ru)微信(xin)小程序(xu)的原代碼，生成目(mu)(mu)錄(lu)，然(ran)后(hou)開始(shi)靜態編(bian)譯，靜態轉(zhuan)換，在百度開發者工具里打開產出目(mu)(mu)錄(lu)，沒動一(yi)(yi)行代碼，遷移(yi)后(hou)，效(xiao)果一(yi)(yi)模一(yi)(yi)樣，但是(shi)有一(yi)(yi)些(xie)登錄(lu)支付的能力(li)需要自(zi)己處理一(yi)(yi)下。

也就是說，開發(fa)者如果已有微信小(xiao)程序(xu)，可(ke)以采用原(yuan)生開發(fa)，使(shi)用遷移工(gong)具(ju)即可(ke)。百度的遷移工(gong)具(ju)有四大(da)特(te)點(dian)：

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

• 轉換(huan) log。做(zuo)一系列的(de)代碼轉換(huan)，最終(zhong)都會(hui)輸(shu)出 log 給開(kai)發(fa)者(zhe)，輔(fu)助開(kai)發(fa)者(zhe)進行二次開(kai)發(fa)。

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

• 語法(fa)轉(zhuan)換。邏輯表達(da)式中的 API 轉(zhuan)換，一元(yuan)運算符中 API 轉(zhuan)換，刪除不(bu)支持的 API。

## 開(kai)發(fa)工具鏈

選擇解決(jue)方案(an)之(zhi)后，我們就需要開(kai)(kai)(kai)發(fa)小程序(xu)(xu)了(le)，開(kai)(kai)(kai)發(fa)的(de)時候就要用(yong)到(dao)開(kai)(kai)(kai)發(fa)工(gong)具鏈，這是小程序(xu)(xu)開(kai)(kai)(kai)發(fa)里(li)必不可(ke)少的(de)流程，在這方面，百度智(zhi)能(neng)小程序(xu)(xu)提供了(le)開(kai)(kai)(kai)發(fa)者工(gong)具，里(li)面囊括了(le)編輯器、模擬器、調(diao)試(shi)器、引擎調(diao)試(shi)、編譯預(yu)覽(lan)等(deng)。

由(you)于(yu)小(xiao)程(cheng)(cheng)序是用在手機(ji)上(shang)(shang)，但(dan)在手機(ji)上(shang)(shang)開(kai)發(fa)調(diao)試體驗不(bu)好(hao)，為了方便大家開(kai)發(fa)，智能小(xiao)程(cheng)(cheng)序支持(chi)(chi)在 PC 端開(kai)發(fa)，所以(yi)在 PC 上(shang)(shang)有一(yi)個模(mo)擬(ni)器，仿真(zhen)效果(guo)和手機(ji)端的(de)運行效果(guo)幾乎沒有什么(me)區別，而且(qie)百(bai)度智能小(xiao)程(cheng)(cheng)序支持(chi)(chi)多平臺切換(huan)，可(ke)(ke)以(yi)切換(huan)成安(an)卓、蘋果(guo)，而且(qie)還可(ke)(ke)以(yi)模(mo)擬(ni) wifi2G、3G 和無網絡等不(bu)同(tong)的(de)網絡環境(jing)。

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

開發之后離不開調(diao)試(shi)，調(diao)試(shi)作(zuo)為一個 web 開發者(zhe)最常用的功(gong)能，智能小程(cheng)序自(zi)然也不會少(shao)，主要包括：

• Swan 節(jie)點樣式調試

• Console 輸入輸出(chu)調(diao)試(shi)

• Sources 代碼斷點調試

• Network 網(wang)絡抓包調(diao)試

• Storages 編(bian)輯展現調(diao)試(shi)

• AppData 編輯展現調(diao)試(shi)

• Sensors 羅盤，重力感應調試

還(huan)有(you)遠程(cheng)(cheng)調(diao)(diao)試，在(zai) PC 上開發好之(zhi)(zhi)后(hou)先用遠程(cheng)(cheng)調(diao)(diao)試，因為(wei)是跑在(zai)真(zhen)機上的，PC 上有(you)調(diao)(diao)試面板，真(zhen)機上做運行(xing)，和(he)真(zhen)機運行(xing)的效(xiao)果一樣。開發者工具里(li)模(mo)擬開發沒有(you)問(wen)題之(zhi)(zhi)后(hou)再(zai)去(qu)遠程(cheng)(cheng)調(diao)(diao)試里(li)調(diao)(diao)試，調(diao)(diao)試之(zhi)(zhi)后(hou)再(zai)使用預覽，再(zai)看一遍，沒有(you)問(wen)題就可以上傳了。

百度智能小程(cheng)序還(huan)有編譯(yi)工具，它(ta)支持 CMD 模式的(de)編譯(yi)、AMD 模式的(de)編譯(yi)、自定義編譯(yi)條(tiao)件、熱編譯(yi)和增量(liang)編譯(yi)等(deng)。