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

In 未分类 on 2015年06月16日 by TAT.ouvenzhang view: 1,599

1. 环境准备

安装 nodejs
安装 nativescript

1 2	<span class="variable">$npm</span> 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 sdk
下载最新的 adk，http://developer.android.com/sdk/installing/index.html 下载后解压到某个目录 (例如 D 盘)，然后添加系统环境变量

ANDROID_HOME D:/android-sdk-windows

path D:/androidandroid-sdk-windowstools

classpath D:/androidandroid-sdk-windowstoolslib

测试方法：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

</StackLayout>

</Page>

4. 总结分析

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

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

原创文章转载请注明：

转载自AlloyTeam：http://www.alloyteam.com/2015/06/nativescript-kua-zhong-duan-ying-yong-cheng-xu-kai-fa-fang-an-yan-jiu/

分享到:

AlloyTeam

AlloyTeam

1. 环境准备

2. 开始项目

3. 项目分析与实例

4. 总结分析

发表评论