NativeScript-Vue，瞭解一下？

?holyZhengs發表於2018-03-02
Vue

What is NativeScript?

NativeScript 是一個可以讓你用Typescript或JavaScript開發原生ios或android app的開源框架 在我寫下這篇文章的時候，github上的star數為12k。

What is Vue.js?

Vue是一套用於構建使用者介面的漸進式框架。在我寫下這篇文章時，github上star數為85k。

What is NativeScript-Vue?

用社群文件的定義來說就是一個允許你用vue.js去開發原生應用的外掛。

在我2月10多號上去github上看的時候，nativescript-vue的star數大概1k，寫這文章時我再上去看，已經快2k了。今天偶爾再開啟nativescript的官網，發現首頁header部分多出了這一選項

NativeScript-Vue，瞭解一下？

You wanted Vue.JS integration witH NativeScript? You got it! Read about the 1.0 release now

可見nativescript官方對於nativescript與vue的結合是非常的支援的。

看到這些是不是很想嘗試一把用vue開發原生應用呢？？

嚐鮮，nativescript-vue

按照nativescript-vue社群文件的內容，安裝好外掛，配置好了環境。文件上面目前提供了三個開發模板

剛剛開始我打算用第二個或第三個，但是一直無法正常工作，倒騰了一整天，最後用了第一個模板，對我來說最大的缺點就是無法使用單檔案元件。 一切都準備好了，該寫點什麼呢？猛地想起之前用react-native寫過一個簡單的demo，(demo地址：react-native電影簡介app)，這是一個模仿豆瓣實現了一個檢視當前熱門電影和即將上映電影的簡單安卓端app，於是決定用nativescript-vue去重構一遍。

專案結構：

app
 |---api
      |---api               // 請求的介面
 |---App_Resources          // ios或android特定的資源(可暫時不管)
      |---Android
      |---iOS
 |---components             // 應用的各個元件
      |---cinema-list       // 電影院列表
      |---col-list          // 縱向列表
      |---coming-list       // 即將上映列表
      |---loading           // 載入過渡頁面
      |---more-list         // 更多電影列表
 |---images                 // 圖片資源
 |---router                 // 路由
      |---index
 |---views                  // 各個頁面
      |---cinemas           // 電影院頁面
      |---detail            // 電影簡介頁面
      |---home              // 首頁
      |---more              // 更多電影頁面
 |---app.css                // 全域性css樣式
 |---app.js                 // app入口檔案 
hooks
platforms
 |---android                // 編譯生成的程式碼
複製程式碼

技術棧

  • nativescript-vue
  • vue-router

因為對利用vue.js開發比較熟悉，所以整個過程還算比較順利。

效果

NativeScript-Vue，瞭解一下？

NativeScript-Vue，瞭解一下？

NativeScript-Vue，瞭解一下？

NativeScript-Vue，瞭解一下？

總結

nativescript的原理和react-native有點相似：提供一個執行環境，提供一個JavaScript引擎，android端是V8引擎，ios端是JavaScriptCore引擎，一個虛擬機器上執行JavaScript程式碼，都可以呼叫平臺api和ui元件。而nativescript更專注於建立一個與平臺無關的單一的開發體驗，react-native則是抽象業務邏輯的同時，支援每個平臺UI呈現固有的差異，並把重心放在高效能的渲染和執行上面。

到此為止，專案算是重構了出來，重構的過程是比較愉快的，效率比較高，但是雖然僅僅是隻有4個主要頁面的簡單應用，比起原來react-native做的，nativescript-vue實現出來的應用明顯感覺到渲染，導航，點選事件的響應等的效能不是很好，能感覺到較為明顯的卡頓感。什麼原因呢，一方面可能是因為正如上面所說的兩者的重心不一樣，另一方面可能是nativescript-vue的結合目前還不是很成熟。 但是不管怎樣，nativescript與vue的結合是一件很酷的事情，也希望它能夠快速發展起來。

專案程式碼github地址

相關文章