智慧小程式開發解決方案

百度智慧小程式學院發表於2018-12-17

智慧小程式開發解決方案

今天主要分析瞭解小程式開發生態解決的方案,尤其技術分級解決的方案,和開發工具鏈。

小程式開發流程總覽

智慧小程式開發解決方案

第一,如果有自己的小程式可以通過遷移工具一鍵轉換成智慧小程式。第二,使用第三方框架,應用層的架構上面,接入我們的三方框架。開發者在開發除錯之後,在開發工具上沒有問題,再在手機上進行預覽,測試沒有問題,就可以釋出到後臺,就可以被百度想換的陣列之類的進行調起下載,可以進行web、H5的瀏覽。今天重點講解接入。

技術分級解決方案

智慧小程式開發解決方案

當我們要接入百度開發小程式的時候,會面臨一個技術水平的問題。那麼會面臨兩者情況,從零開發,或者已有微信小程式。如果沒有開發過小程式,就從零開發,可以選擇使用原生開發,或者應用層框架開發。

沒有開發過小程式,從零開發

原生開發

原生開發,就是使用百度的這一套智慧小程式進行開發,分為檢視層和邏輯層。我們的檢視層類似H5語言,不是用的HTML,而是在SWAN檔案,還有標記語言和H5是不一樣的。如果開發原生的小程式,需要參照我們的標籤,原生工具上都有,也可以自定義標籤、繫結事件、控制流、屬性及表示式都有。邏輯層定義了一套自己的生命週期,主要是在頁面內層,如何轉場、切換,都會呼叫生命週期,這和WEB不一樣。這是我們自己的宣告週期和事件響應,基本的包括資料管理、資料驅動,很傳統的方式,上手成本很低。

應用層框架開發

智慧小程式開發解決方案

應用層框架接入,跨平臺永遠是軟體開發永恆的主題。而跨平臺的解決方案,想在百度小程式上跑,又想在微信小程式上跑,又想在WEB上面,或者其他平臺等,有沒有解決方案呢?可以使用框架層的原始碼,進行編譯之後,能跑在各自的平臺上面。現在出名的框架分別是Taro、Mpvue、WePY,非常活躍並不停迭代,也和這三方框架進行合作,不斷開發優化小程式。

智慧小程式開發解決方案

WePY框架五大特點是更符合現有的MVVM框架開發模式,類VUE,省去學習小程式語法的時間;元件化開發,支援元件的迴圈、巢狀、元件Props傳值、元件通訊、自定義事件、第三方元件;NPM包管理,支援NPM資源,處理NPM資源的依賴;支援ESNext規範,提升開發體驗,擁抱開發者;細節效能優化,setData效能優化(髒檢測),事件傳參、編譯器(babel、Ts、Less、Sass)、Mixin。

Mpvue框架的四大特點是徹底的元件化開發,使用Vup.js元件機制開發小程式,實現小程式和H5的元件複用;完整的Vue開發體驗,Vue的元件規範、Vuex的實現;基於Mpvue小程式,可以轉為H5 ,基於Vue開發的H5也可以轉為小程式;NPM包管理。

Taro框架的四大特點是React風格,降低小程式開發學習成本;JSX處理,採用JSX作為模板,相比字串模板,更自由、自然、更具表現力,不依賴字串模板語法糖,也能完成複雜處理;數去驅動思想的相似,小程式的資料模板更新思想和實現機制,與React相似;React的跨端解決方案,可以給Taro後期多端開發帶來很大的便利。

如果你開發過微信小程式

分級接入方案——遷移工具

智慧小程式開發解決方案

使用遷移工具進行分級接入,輸入微信小程式性的程式碼,輸入微信小程式的名字,可以達到80%的遷移量,但是比如登入需要處理下。遷移工具可以實現程式碼的搬遷,檢視轉換,轉換log,語法變換等,並可以進行二級開發,意味著是兩個版本。即從遷移的時間節點開始,有兩套版本進行修改和維護。

智慧小程式開發解決方案

百度智慧小程式原生開發+wx2swan遷移工具的原生開發、Taro框架、Mpvue框架、和WePY框架三種框架,從不同的維度進行對比,語法規範、樣式規範、元件化、跨小程式平臺、多端複用、自動構建、上手成本、資料流管理,沒有優劣之分,只有適不適用。所以根據自己的需要,比如技術棧、框架,進行選擇各自適合自己的架構。

從零開發有兩個選擇,就是原生開發和框架開發;已有微信小程式也有兩個選擇,原生微信開發和框架開發。

開發工具鏈

智慧小程式開發解決方案

開發工具有編輯器、模擬器、偵錯程式,還有遠端除錯、搬家工具、編譯工具、預覽。模擬器的作用是真機模擬、多平臺切換、忘了限制模擬、大小自調節。編輯器的作用是程式碼自動補全、程式碼高亮、多檔案型別支援。偵錯程式的作用是Swan節點樣式除錯,Console輸入輸出除錯,Sources程式碼斷點除錯,Network網路抓包除錯,Storages編輯展現除錯,AppData編輯展現除錯,Sensors羅盤重力感應除錯。遠端除錯的作用是真機執行,PC遠端除錯,快速定位問題。編譯工具的特點是支援CMD/AMD/自定義模式編譯,還有支援熱編譯。

最後,百度·智慧小程式,期待你的加入。

相關文章