小程序模板網(wǎng)

百度發(fā)布智能小程序開發(fā)方案

發(fā)布時(shí)間:2018-12-19 09:34 所屬欄目:小程序開發(fā)教程

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

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

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

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

原生開發(fā)

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

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

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

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

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

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

下面重點(diǎn)講一下三個(gè)框架的特點(diǎn)。

WePY

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

WePY 默認(rèn)支持的是 ESNext 標(biāo)準(zhǔn),包括 setData 性能優(yōu)化(臟檢測)、事件傳參、編譯器(Babel、Ts、Less、Sass)、Mixin,同時(shí),它還支持 NPM 資源,能夠處理 NPM 資源的依賴。

Mpvue

Mpvue 和 WePY 非常類似,它使用 Vue.js runtime 支持了小程序,實(shí)現(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ū)嵗?,大家可以打開百度 APP 掃碼體驗(yàn)一下。

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

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

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

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

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

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

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

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

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

## 開發(fā)工具鏈

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

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

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

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

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

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

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

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

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

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

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

還有遠(yuǎn)程調(diào)試,在 PC 上開發(fā)好之后先用遠(yuǎn)程調(diào)試,因?yàn)槭桥茉谡鏅C(jī)上的,PC 上有調(diào)試面板,真機(jī)上做運(yùn)行,和真機(jī)運(yùn)行的效果一樣。開發(fā)者工具里模擬開發(fā)沒有問題之后再去遠(yuǎn)程調(diào)試?yán)镎{(diào)試,調(diào)試之后再使用預(yù)覽,再看一遍,沒有問題就可以上傳了。

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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25034.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢