简单介绍
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则必须在应用下次启动时生效。