成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

NativeScript-Vue，了解一下？

seal_de / 2511人閱讀

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

What is NativeScript?

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

What is Vue.js?

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

What is NativeScript-Vue?

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

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

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

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

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

嘗鮮，nativescript-vue

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

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

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

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

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

項(xiàng)目結(jié)構(gòu)： 
app
 |---api
      |---api               // 請求的接口
 |---App_Resources          // ios或android特定的資源(可暫時不管)
      |---Android
      |---iOS
 |---components             // 應(yīng)用的各個組件
      |---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                // 編譯生成的代碼
技術(shù)棧

nativescript-vue

vue-router

因?yàn)閷胿ue.js開發(fā)比較熟悉，所以整個過程還算比較順利。

效果

總結(jié)

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93044.html

相關(guān)文章

  • 推薦給新手的35個好用的Vue開源庫

    摘要：無論是開發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開源軟件包。所幸的是，隨著社區(qū)的不斷壯大，每天都會出現(xiàn)一些很好的軟件包。在下文中，我們將推薦一些非常好用的開源庫是一個非常易用的漸進(jìn)式框架，用于構(gòu)建用戶界面。的一個極簡主義的深色設(shè)計(jì)系統(tǒng)。 無論是開發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開源軟件包。對于開發(fā)者來說，如果沒有這些開源軟件包，很難想象我們的生活會變得多么疲憊不堪，而且靠咖啡度日也會成...

    oliverhuang 評論0 收藏0

  • Vue 2019開發(fā)者圖譜

    摘要：為了便于您更清晰的理解的體系架構(gòu)，在這里我將為您展示年開發(fā)者知識圖譜，它包含了所有開發(fā)過程中的關(guān)鍵部分。在數(shù)據(jù)展示前端導(dǎo)入導(dǎo)出圖表面板數(shù)據(jù)綁定等場景無需大量代碼開發(fā)和測試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風(fēng)險(xiǎn)。 作為 Vue 的初學(xué)者，您或許已經(jīng)聽過很多關(guān)于它的專業(yè)術(shù)語了，例如：單頁面應(yīng)用程序、異步組件、服務(wù)器端呈現(xiàn)等，您可能還聽過和Vue經(jīng)常一起被提到的工具和庫，如Vuex、Webp...

    cgspine 評論0 收藏0

  • Vue、React 和 Angular橫向比對（數(shù)據(jù)對比）

    摘要：同比與去年同期的同比變化率。我們對調(diào)查報(bào)告進(jìn)行分析數(shù)據(jù)統(tǒng)計(jì)時間與本文時間差距較遠(yuǎn)，數(shù)據(jù)存在延后。這意味著你可以獲得語法高亮，支持以及更容易使用預(yù)處理器如或。的是一個類似語法的可選預(yù)處理器，并可在中進(jìn)行編譯。 一些歷史 Angular 是基于 TypeScript 的 Javascript 框架。由 Google 進(jìn)行開發(fā)和維護(hù)，它被描述為超級厲害的 JavaScript MVW 框架...

    fxp 評論0 收藏0

  • 搜集React、Vue、Angular和傳統(tǒng)UI組件庫以及后臺管理平臺模板

    摘要：高顏值好用易擴(kuò)展的微信小程序庫，有贊。一套高質(zhì)量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實(shí)現(xiàn)的后臺管理系統(tǒng)模板一個后臺管理系統(tǒng)模板是一套組件化框架，支持定制主題，主要服務(wù)于前臺及中后臺產(chǎn)品。基于后臺管理系統(tǒng)。 快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    zhangrxiang 評論0 收藏0

  • 搜集React、Vue、Angular和傳統(tǒng)UI組件庫以及后臺管理平臺模板

    摘要：高顏值好用易擴(kuò)展的微信小程序庫，有贊。一套高質(zhì)量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實(shí)現(xiàn)的后臺管理系統(tǒng)模板一個后臺管理系統(tǒng)模板是一套組件化框架，支持定制主題，主要服務(wù)于前臺及中后臺產(chǎn)品?；诤笈_管理系統(tǒng)。 快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    source 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<