NativeScript快速入门

1,095 阅读2分钟
原文链接: www.jianshu.com

首先来学习下NativeScript是什么。
NativeScript is how you build cross-platform, native iOS and Android apps without web views
直译为NativeScript就是实现可以在不用Webview的情况下,构建跨Android和iOS的平台应用。

以前各种PhoneGap,Cordova,Ionic等需要移动端原生Webview的支持,使用NativeScript让你只用js,xml,css就可以完成移动端开发。

注意这里使用的是xml,而不是以往的html,但是整体的理念和我们写html是相通的。 另外这里说的angular,特指NG,不含AngularJS[1.x]

虽然使用的是xml定义结构和布局,但是文件后缀依然可以为.html(也可以为其他后缀形式),便于编辑器支持语法。

NativeScript Android on Windows开发环境搭建

开始安装前,必备翻墙工具。

**step1 **安装nodejs, 推荐安装 LTS版本。

nodejs.org/en/

安装完成后,进入cmd>node -v 可查看当前node的版本号

**step2 **安装jdk8及以后的稳定版

安装完成后,配置环境变量JAVA_HOME,进入cmd>java -version 可查看当前java的版本号

**step3 **安装android studio, 安装完成后,打开studio,找到SDK Manager


SDK-Manager.png

点击SDK Manager,打开如图,安装需要的 SDK版本

SDK-install.png

配置环境变量Android_HOME的值为上图Android SDK Locations的配置

image

打开AVD Manager,创建Android模拟器

image

创建后的模拟器如下[图片上传失败

AVD-list.png

step4

安装NativeScript

cmd>npm i -g nativescript

step5

cmd>tns doctor

检查环境

如果没有报错,那么恭喜你环境搭建好了。

不推荐使用官网推荐的Chocolatey安装,本地尝试多次,未成功。

如果按照之前的说明,环境搭建好了,那么我们来创建第一个应用.

命令格式如下

tns create NativeApp

nsdemo01.png

生成如上的目录结构,我们的代码主要在app目录下。

提醒:不要去修改platforms下的代码,因为是在构建时,由NativeScript CLI 自动将app目录下代码拷贝到platforms下对应平台目录进行编译构建的。

cd到NativeAPp根目录

tns platform add android

如果之前的环境安装有问题,这里会报错,主要是Android_Home要配置正确

tns run android --emulator

正常情况下,会启动模拟器,安装这个应用。

这里如果出现gradle错误,请你直接去grade官网,下载对应的完成版本,替换报错路径下的zip文件。

app-running.png

penjoyer.gitbooks.io/nativescrip…