NativeScript学习笔记(一)【有待完善】
本文由 小茗同学 发表于 2016-10-09 浏览(1571)
最后修改 2016-11-09 标签:nativescript android ios

简单介绍

NativeScript是一个用JS+CSS+XML编写跨平台(Android & iOS)应用的工具,由Telerik公司出品。它和Facebook的React Native相比,虽然都是JS写原生应用,但还是有很多不同的地方,也有一些它的优势,具体二者的区别可以参照:ReactNative与NativeScript对比报告

官网:https://www.nativescript.org/

环境搭建

本文以Windows平台+Android目标环境为例,其它平台请参照官网。

依赖如下:

  • jdk>=1.8(必须1.8以上)
  • android sdk
  • node.js & npm

安装CLI:

npm install -g nativescript

耐心等待一会儿,一般不会有什么问题,安装完之后可以通过在命令行中输入tns测试是否安装成功:

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

其中,tns = Telerik NativeScript,你还可以使用nativescript这个命令,它和tns是等价的,不过tns更短更好记,一般都用这个。

安装 iOS 和 Android 依赖

这一步主要是安装开发NativeScript所需环境所有软件,比如jdk、android sdk,如果已经安装会自动跳过,另外还会安装Chocolately,一个Windows平台上的软件管理工具,类似Linux上的yum:

命令行输入:

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

执行完之后会打开PowerShell,这一步会从网络上下载一些东西,如果失败多试几次,我就是第一次失败第二次就成功了。

验证是否成功

tns doctor

如果提示No issues were detected,恭喜你,成功了!

HelloWorld

新建项目,假设我的工作目录为F:\study\ntivescript

cd F:\study\ntivescript
tns create helloworld

定位到项目目录下(这里是helloworld),添加平台:

cd helloworld
tns platform add android

模拟器运行(支持 Genymotion 模拟器):

tns run android --emulator

真机运行:

tns run android

第一次运行要下载一些东西,所以会非常慢,以后就不需要了,不出问题的话,一个默认的HelloWorld项目已经运行起来了:

可以开启实时文件同步服务,修改一些js和xml等文件时无需重新安装apk,会自动刷新,一般需要4-5s左右,模拟器实时同步:

tns livesync android --emulator --watch

真机实时同步:

tns livesync android --watch

不是所有文件改动都会实时同步,如果添加了一些模块,或者增加了插件等,需要重新运行。

运行中如果你的js报错了,页面上会显示错误信息:

组件简单学习

数据绑定

数组数据绑定

alert

直接用alert虽然也可以,但是无法自定义标题和确定按钮文字。

	var dialogs = require("ui/dialogs");
	// alert('注册!'); // 虽然可以使用alert,但是无法自定义标题和按钮文字,所以一般不用alert
	dialogs.alert(
	{
		title: '提示',
		message:'Hello NativeScript!',
		okButtonText: '确定'
	})
	.then(function()
	{
		alert('你刚才点击了确定!');
	});

注意dialogs.alert不会阻止你后面的代码,所以你必须把点击确定之后的代码写在then里面。

其它confirm、prompt使用参考这里:http://docs.nativescript.org/cookbook/ui/dialogs

热更新

NativeScript应用在安装完之后会把assets里面的代码全部复制到应用的私有目录下面,所以我们想要热更新的话只需要更新这些文件即可。

exports.updateApp = function()
{
	// 获取当前app的私有目录,如:/data/data/org.nativescript.helloworld/files/app
	var path = fs.knownFolders.currentApp().path;
	var url = 'http://192.168.191.1/hotupdate/';
	console.log(path);
	http.getFile(url+'hotupdate.xml', fs.path.join(path, "views/hotupdate/hotupdate.xml"))
	.then(function (r)
	{
		alert('热更新成功!');
	}, function (error){alert('热更新失败!');});
};

经过测试,xml和css在更新之后无需重启APK即可立即生效,JS则必须在应用下次启动时生效。