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 在随后也相同通过这条路来实现可以开发原生的移动应用。

8207483-3c58ad67b4733c5b.jpg

那么使用 NativeScript 来开发应用给我们带了什么惊喜呢?首先我们开发一次就可以处处应用,轻松开发跨平台的应用。这个就不用多说了,更重要的是可以给我们带来流畅的用户体验。

8207483-ea8221ed5509be22.jpg

我们完全可以用 javascript 来写 nativeScript,不过这不等于我们不需要花任何学习成本就可以开发应用。我们使用 xml css 和 javascript 就可以搭建我们应用的架构。

8207483-abec7441fb36ef7b.jpg

今天我们也可以 vue 来开发我们 NativeScript 应用了。这里还想多说几句,开始 angular 开发因为自称全新的方式开发 web 应用,anuglar 为了代码模块化,为一些新的特性 angular 是建立在 typescript 的语法上,typescript 是 javascript 的超级,但是 angular 提出更高的要求,要求语言支持注解,所以开始 angular team 想在 typescript 基础上开发 atscript 来实现注解的特性,后来通过 typescript 商谈,typescript team 愿意由他们来实现注解。 

8207483-d10e057f4a157760.jpg

什么样框架可以开发原生的应用呢?vue 在 2.0 后也引入虚拟 DOM 这样就可以轻松地实现了原生移动应用的渲染,为什么有了虚拟 DOM,这是 javascript 框架能够开发原生的基础,只有实现了虚拟 DOM,才给我们的 javascript 提供更多想象。因为我们把渲染层抽离出来,这样我们渲染就可以不但渲染 web 页面也可渲染出原生界面。

8207483-8ff2eadbfc9a0921.jpg


那么我们来看一看 vue 是具体如何实现渲染原生应用的呢?

8207483-77a64afa5fc3f4ab.jpg

我们写 vue 代码会通过 NativeScript-Vue 转换为 NativeScript,我们需要引入 vue 同样也需要引入 nativescript-vue

8207483-26afd9358bdf61f5.jpg

对比我们一下我们 web 和 nativescript 的代码吧,区别并不大,所以只要你能写 vue 就能写 vue-nativescript.

8207483-c2cc9cb64483451e.jpg

当然 xml 与 web 的 html 是不同的,通过标签为我们提供不同组件,这些组件类似 native-react 会最终生成原生的代码,所以是不同html 中的标签,当然我们可以通过学习创建自己的标签来实现一些特殊样式和功能的组件。

8207483-fc1b5ef5fdf4a60b.jpg

我们可以 nativescript 网站提供的 playground 写自己第一个应用,这里我们无需搭建繁琐的框架,轻松地体验到开发 nativescript 的乐趣,其实很多人并不看好 nativescript ,个人也无法预知的他未来,不过存在就有意义吧。

8207483-913b9b56db7c9377.jpg

我们也可以通过命令行来创建 nativescript-vue 的应用的框架。

8207483-64975e9219873f84.jpg
8207483-cd71039dfcec768d.jpg

猜你喜欢

转载自blog.csdn.net/weixin_34414196/article/details/86797437
今日推荐