Nativescript跨终端应用程序开发方案研究

1.环境准备

  • 安装nodejs
  • 安装nativescript
$npm install -g nativescript

或者下载github上项目代码进行构建(不推荐)

  • 安装java JDK jdk是Java运行开发环境,按android开发必须的开发的环境
JAVA_HOME     D:/program file/java/jdk_1.7.34/
path         D:/program file/java/jdk_1.7.34/bin
classpath   D:/program file/java/jdk_1.7.34/lib

测试方法:java -version

  • 安装Apache ant Apache Ant,是一个将软件编译、测试、部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发。由Apache软件基金会所提供。这里用到的的是用于android签名证书等打包(android开发过程中ide使用gradle配置打包,早期都是用的ant打包,这里使用的方法比较原始) http://ant.apache.org/bindownload.cgi 上下载最新版apache-bin(可选择安装型或压缩包型),然后添加系统环境变量
ANT_HOME    C:/ apache-ant-1.9.5
path        C:/ apache-ant-1.9.5/bin
classpath   C:/apache-ant-1.9.5/lib

测试方法:ant -version

ANDROID_HOME   D:/android-sdk-windows
path        D:/android\android-sdk-windows\tools
classpath  D:/android\android-sdk-windows\tools\lib

测试方法:android 必须掌握的两个命令:abd start-server/ adb kill-server,用于启动android debug服务,adb使用与启动模拟器或是通过手机的自动安装调试,并可以看到log信息。这两个命令会经常用到 然后 命令行运行一下tns,如果看到以下提示信息,就可以开始第一个开发了。

# NativeScript
┌─────────┬─────────────────────────────
───────────────────────────────────┐
│ Usage   │ Synopsis                                                       │
│ General │ $ tns <Command> [Command Parameters] [--command <Options>]     │
│ Alias   │ $ nativescript<Command> [Command Parameters] [--command       │
│         │ <Options>]                                                     │
└─────────┴─────────────────────────────
───────────────────────────────────┘

2.开始项目

  • 创建项目
$ tns create demo
$ cd demo
$ tns platform add andrdoi/ios
├── app     // bower dependencies
        ├── App_Resources    // bower dependencies
                        ├── Android  // android项目的drawble静态图片等文件,项目转换的时候直接拷贝到android项目下
                        ├── iOS        //ios项目用到的图片文件
        ├── tns_modules    //tns node模块,可以用来调用移动设备功能
        ├── app.css    // 内部控件样式
        ├── app.js    // 页面配置入口配置
        ├── LICENSE
        ├── main-page.js    // 页面js文件
        ├── main-page.xml    // 页面布局文件
        ├── main-view-model.js    // vm对象生成文件
        ├── package.json    // bower dependencies
├── node_module     // node插件忽略
├── platforms           // 转换后的移动端平台代码
        ├── android           // 标准的可移植android项目代码
        ├── ios                  //标准的可移植ios项目代码
└──package.json           //项目信息配置文件

从项目的结构可以看出,项目代码使用的mvvm结构,而且它的viewmodel是通过方法操作的。

  • 配置移动平台
$ tns platform add ios/android
$ tns run android/ios (真机启动) 或者  tns run android/ios --emulator(启动模拟器)

如果没问题的话就可以看到手机或模拟器上启动了应用程序 来自: http://docs.nativescript.org/hello-world/hello-world-ns-cli.html

3.项目分析与实例

分析一下页面主要的代码结构

  • app.js,页面的预处理入口,表示启动main-page这个页面
var application = require("application");
application.mainModule = "main-page";
application.cssFile = "./app.css";
application.start();
  • main-page.js 页面的数据绑定处理,将vm和方法绑定,也可认为是把vm和对象关联绑定
var vmModule = require("./main-view-model");
function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = vmModule.mainViewModel;
}
exports.pageLoaded = pageLoaded;
  • main-view-model.js 页面的vm定义模块,申明方法和数据
var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var observable = require("data/observable");

var HelloWorldModel = (function (_super) {
    __extends(HelloWorldModel, _super);

    function HelloWorldModel() {
        _super.call(this);
        this.counter = 42;
        this.set("message", this.counter + " taps left");
    }

    HelloWorldModel.prototype.tapAction = function () {
        this.counter--;
        if (this.counter <= 0) {
            this.set("message", "Hoorraaay! You unlocked the NativeScript clicker achievement!");
        }
        else {
            this.set("message", this.counter + " taps left");
        }
    };
    return HelloWorldModel;
})(observable.Observable);
exports.HelloWorldModel = HelloWorldModel;
exports.mainViewModel = new HelloWorldModel();
  • app.css
.title {
    font-size: 30;
    horizontal-align: center;
    margin:20;
}

button {
    font-size: 42;
    horizontal-align: center;
}

.message {
    font-size: 20;
    color: #284848;
    horizontal-align: center;
}

main-page.xml android上布局的文件,类似vm模板,注意,是xml的,不是html

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
    <Label text="Tap the button" cssClass="title"/>
    <Button text="TAP" tap="{{ tapAction }}" />
    <Label text="{{ message }}" cssClass="message" textWrap="true"/>
  </StackLayout>
</Page>

4.总结分析

  1. 核心是用JavaScript来写代码,然后预处理成android/ios项目进行打包安装
  2. 开发模式基本遵循前端的mvvm思想来实现,只是实现和表现不一样
  3. 参考文档完善,整理来说是一个不错的native开发方案
  4. 开发使用commonJs的规范,容易理解
  5. 但是不足之处也很明显,很难做现有单页面的改造,迭代不方便,功能上线必须像客户端那样发布审核,某些程度上还是需要web页面的支持

当然这次只分析了个简单的例子,后面自己搞个复杂的例子来分享下,敬请期待(类似的还有samurai-native和react-native,坐等android支持)~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序猿DD

Jenkins:配置信息变更历史

作者:sparkdev 出处:http://www.cnblogs.com/sparkdev/ 像 Jenkins 这样的系统,使用的过程就是配置文件变更的过程...

2575
来自专栏FreeBuf

闲聊Windows系统日志

最近遇到不少应急都提出一个需求,能不能溯源啊?这个事还真不好干,你把证据,犯案时间都确定的时候,要求翻看监控(日志)对应犯罪嫌疑人时,突然说监控(日志)没有记录...

1.1K0
来自专栏Python中文社区

Python开源项目介绍:用zmail简单地发邮件

发送邮件是个很简单的需求,但是在实际的使用中依然碰到了很多坑,因此创建了zmail这个项目,让你使用python发送邮件的过程尽可能简单。

1513
来自专栏漫漫前端路

HTTP协议 - 从URI开始

URI, 既是统一资源标识符号,每个 Web 服务器都有一个 URI 标识符,它在世界范围内唯一标识并定位信息资源。

1694
来自专栏FreeBuf

推荐:Inspeckage安卓动态分析工具

Inspeckage是一个用于提供Android应用程序动态分析的工具。通过对Android API的函数使用hook技术,帮助用户了解应用程序在运行时的行为。...

3276
来自专栏非著名程序员

如何优化 Android Studio 启动、编译和运行速度?

?作为一名 Android 程序员,选择一个好的 IDE 工具可以使开发变得非常高效,很多程序员喜欢使用 Google 的 Android Studio来进行...

1966
来自专栏Debian社区

使用 tmate 分享你的终端会话

tmate 的意思是 teammates,它是 tmux 的一个分支,并且使用相同的配置信息(例如快捷键配置,配色方案等)。它是一个终端多路复用器,同时具有即时...

1123
来自专栏BestSDK

REST API 安全设计指南

REST API 安全设计指南。REST的全称是REpresentational State Transfer,它利用传统Web特点,提出提出一个既适于客户端应...

9358
来自专栏张戈的专栏

Nginx在线服务状态下平滑升级或新增模块的详细操作记录

今天,产品那边发来需求,说有个 APP 的 IOS 版本下载包需要新增 https 协议,在景安购买了免费的 SSL 证书。当我往 nginx 上新增 ssl ...

5487
来自专栏菩提树下的杨过

spring cloud 学习(8) - sleuth & zipkin 调用链跟踪

业务复杂的微服务架构中,往往服务之间的调用关系比较难梳理,一次http请求中,可能涉及到多个服务的调用(eg: service A -> service B -...

6108

扫码关注云+社区

领取腾讯云代金券