美文网首页my ionic3我爱编程
NativeScript快速入门

NativeScript快速入门

作者: 技术与健康 | 来源:发表于2018-03-03 16:13 被阅读750次

    首先来学习下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版本。

    https://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

    https://penjoyer.gitbooks.io/nativescript-in-action/content/

    相关文章

      网友评论

        本文标题:NativeScript快速入门

        本文链接:https://www.haomeiwen.com/subject/cuotfftx.html