NativeScript-Vue，了解一下？

seal_de 發(fā)布于2019-08-22 14:58 / 2507人閱讀

摘要：今天偶爾再打開的官網(wǎng)，發(fā)現(xiàn)首頁(yè)部分多出了這一選項(xiàng)可見官方對(duì)于與的結(jié)合是非常的支持的。，這個(gè)模板是目前最穩(wěn)定和多功能的模板，可以使用單文件組件，，。但是不管怎樣，與的結(jié)合是一件很酷的事情，也希望它能夠快速發(fā)展起來(lái)。

What is NativeScript?

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

What is Vue.js?

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。在我寫下這篇文章時(shí)，github上star數(shù)為85k。

What is NativeScript-Vue?

用社區(qū)文檔的定義來(lái)說(shuō)就是一個(gè)允許你用vue.js去開發(fā)原生應(yīng)用的插件。

在我2月10多號(hào)上去github上看的時(shí)候，nativescript-vue的star數(shù)大概1k，寫這文章時(shí)我再上去看，已經(jīng)快2k了。今天偶爾再打開nativescript的官網(wǎng)，發(fā)現(xiàn)首頁(yè)header部分多出了這一選項(xiàng)

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

可見nativescript官方對(duì)于nativescript與vue的結(jié)合是非常的支持的。

看到這些是不是很想嘗試一把用vue開發(fā)原生應(yīng)用呢？？

嘗鮮，nativescript-vue

按照nativescript-vue社區(qū)文檔的內(nèi)容，安裝好插件，配置好了環(huán)境。文檔上面目前提供了三個(gè)開發(fā)模板

nativescript-vue-template，這個(gè)是最簡(jiǎn)單的模板，上面還帶有幾個(gè)demo方便我們查看。

nativescript-vue-rollup-template，這個(gè)模板是目前最穩(wěn)定和多功能的模板，可以使用 .vue 單文件組件，scss，es2015。

nativescript-vue-webpack-template，這個(gè)模板是目前star數(shù)目最多的模板，可以使用 .vue 單文件組件，scss，es2015， stage-2， native/web code sharing

剛剛開始我打算用第二個(gè)或第三個(gè)，但是一直無(wú)法正常工作，倒騰了一整天，最后用了第一個(gè)模板，對(duì)我來(lái)說(shuō)最大的缺點(diǎn)就是無(wú)法使用單文件組件。
一切都準(zhǔn)備好了，該寫點(diǎn)什么呢？猛地想起之前用react-native寫過一個(gè)簡(jiǎn)單的demo，(demo地址：react-native電影簡(jiǎn)介app)，這是一個(gè)模仿豆瓣實(shí)現(xiàn)了一個(gè)查看當(dāng)前熱門電影和即將上映電影的簡(jiǎn)單安卓端app，于是決定用nativescript-vue去重構(gòu)一遍。

項(xiàng)目結(jié)構(gòu)：

app
 |---api
      |---api               // 請(qǐng)求的接口
 |---App_Resources          // ios或android特定的資源(可暫時(shí)不管)
      |---Android
      |---iOS
 |---components             // 應(yīng)用的各個(gè)組件
      |---cinema-list       // 電影院列表
      |---col-list          // 縱向列表
      |---coming-list       // 即將上映列表
      |---loading           // 加載過渡頁(yè)面
      |---more-list         // 更多電影列表
 |---images                 // 圖片資源
 |---router                 // 路由
      |---index
 |---views                  // 各個(gè)頁(yè)面
      |---cinemas           // 電影院頁(yè)面
      |---detail            // 電影簡(jiǎn)介頁(yè)面
      |---home              // 首頁(yè)
      |---more              // 更多電影頁(yè)面
 |---app.css                // 全局css樣式
 |---app.js                 // app入口文件 
hooks
platforms
 |---android                // 編譯生成的代碼

技術(shù)棧

nativescript-vue

vue-router

因?yàn)閷?duì)利用vue.js開發(fā)比較熟悉，所以整個(gè)過程還算比較順利。

效果

總結(jié)

nativescript的原理和react-native有點(diǎn)相似：提供一個(gè)運(yùn)行環(huán)境，提供一個(gè)JavaScript引擎，android端是V8引擎，ios端是JavaScriptCore引擎，一個(gè)虛擬機(jī)上運(yùn)行JavaScript代碼，都可以調(diào)用平臺(tái)api和ui組件。而nativescript更專注于創(chuàng)建一個(gè)與平臺(tái)無(wú)關(guān)的單一的開發(fā)體驗(yàn)，react-native則是抽象業(yè)務(wù)邏輯的同時(shí)，支持每個(gè)平臺(tái)UI呈現(xiàn)固有的差異，并把重心放在高性能的渲染和執(zhí)行上面。

到此為止，項(xiàng)目算是重構(gòu)了出來(lái)，重構(gòu)的過程是比較愉快的，效率比較高，但是雖然僅僅是只有4個(gè)主要頁(yè)面的簡(jiǎn)單應(yīng)用，比起原來(lái)react-native做的，nativescript-vue實(shí)現(xiàn)出來(lái)的應(yīng)用明顯感覺到渲染，導(dǎo)航，點(diǎn)擊事件的響應(yīng)等的性能不是很好，能感覺到較為明顯的卡頓感。什么原因呢，一方面可能是因?yàn)檎缟厦嫠f(shuō)的兩者的重心不一樣，另一方面可能是nativescript-vue的結(jié)合目前還不是很成熟。
但是不管怎樣，nativescript與vue的結(jié)合是一件很酷的事情，也希望它能夠快速發(fā)展起來(lái)。

項(xiàng)目代碼github地址有幫助的話，歡迎star。