nativescript-vue 開發原生應用(1)

今天分享的是如何使用 NativeScript 和 vue.js 來創建原生應用,我們知道使用 javascript 來開發混合應用的方案很多,而且在不斷改進不斷逼近原生效果。我個人也是經歷各個階段從開始想自己寫一個 webview 容器來封裝應用,到後來用 cordova 開發混合應用,那時候使用 cordova 來開發 android 和 ios 應用不但用戶體驗不好,而且作爲開發者整個開發過程也是一種痛苦。然後接觸到了hbuilder 讓我們的 javascript 代碼更方便地和原生相互調用。通過請求方式來javascript 來調用原生的代碼,這樣就更安全,而且降低了 javascript 和原生代碼的耦合度。

那麼相比當下火熱 react-native nativescript 有什麼優勢呢?首先我們要清楚 javascript 在 web 上無論是單頁應用還是服務端渲染,react angularX 還是 vue 都是各有優點,但是在開發移動端應用上因爲 vue 和 angular 因爲沒有 react-native 顯得略遜一籌。雖然 ionic 和 angular 結合也可以開發移動端應用,但是由於機制不同當然不會有可比性。

爲此首先 anuglar 和 nativescript 結合來對抗 react 的 native-react,vue 在隨後也相同通過這條路來實現可以開發原生的移動應用。

那麼使用 NativeScript 來開發應用給我們帶了什麼驚喜呢?首先我們開發一次就可以處處應用,輕鬆開發跨平臺的應用。這個就不用多說了,更重要的是可以給我們帶來流暢的用戶體驗。

我們完全可以用 javascript 來寫 nativeScript,不過這不等於我們不需要花任何學習成本就可以開發應用。我們使用 xml css 和 javascript 就可以搭建我們應用的架構。

今天我們也可以 vue 來開發我們 NativeScript 應用了。這裏還想多說幾句,開始 angular 開發因爲自稱全新的方式開發 web 應用,anuglar 爲了代碼模塊化,爲一些新的特性 angular 是建立在 typescript 的語法上,typescript 是 javascript 的超級,但是 angular 提出更高的要求,要求語言支持註解,所以開始 angular team 想在 typescript 基礎上開發 atscript 來實現註解的特性,後來通過 typescript 商談,typescript team 願意由他們來實現註解。 

什麼樣框架可以開發原生的應用呢?vue 在 2.0 後也引入虛擬 DOM 這樣就可以輕鬆地實現了原生移動應用的渲染,爲什麼有了虛擬 DOM,這是 javascript 框架能夠開發原生的基礎,只有實現了虛擬 DOM,纔給我們的 javascript 提供更多想象。因爲我們把渲染層抽離出來,這樣我們渲染就可以不但渲染 web 頁面也可渲染出原生界面。


那麼我們來看一看 vue 是具體如何實現渲染原生應用的呢?

我們寫 vue 代碼會通過 NativeScript-Vue 轉換爲 NativeScript,我們需要引入 vue 同樣也需要引入 nativescript-vue

對比我們一下我們 web 和 nativescript 的代碼吧,區別並不大,所以只要你能寫 vue 就能寫 vue-nativescript.

當然 xml 與 web 的 html 是不同的,通過標籤爲我們提供不同組件,這些組件類似 native-react 會最終生成原生的代碼,所以是不同html 中的標籤,當然我們可以通過學習創建自己的標籤來實現一些特殊樣式和功能的組件。

我們可以 nativescript 網站提供的 playground 寫自己第一個應用,這裏我們無需搭建繁瑣的框架,輕鬆地體驗到開發 nativescript 的樂趣,其實很多人並不看好 nativescript ,個人也無法預知的他未來,不過存在就有意義吧。

我們也可以通過命令行來創建 nativescript-vue 的應用的框架。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章