文章最后更新时间 2019 年 4 月 26 日
简短介绍 NativeScript
可能很多人听说过了 nativescript, 也可能有很多人还没有听说过这个名词, 但是对于通过运用 web 技术来写 Android 与 iOS 的应用这件事情已经是司空见惯了.
nativescript 就是一款能够让你用 Angular,TypeScript,JavaScript 来开发构建真正的原生手机应用的框架. 官网地址
本文简述的是如何在 Mac 系统下搭建 nativescript 的开发环境, 在这个过程中还是会遇到一些小问题在官网中没有给出提示, 下面做出阐述.
安装 Node.JS
在 Mac 上你可以通过 homebrew 来安装 Node.JS, 或者你可以用 nvm 来安装 Node.JS, 我倾向于后者, 安装办法可以参考链接, 写得很详细, 本文不再赘述.
安装 Android 必要的开发环境
安装 java JDK
我安装的是 JRE 8u152
设置 JAVA_HOME 路径
在终端中运行 export JAVA_HOME=$(/usr/libexec/java_home)
安装 Android SDK
这一步中官网的方式是通过 homebrew 进行安装, 这里我的建议是通过安装 Android Studio 的方式来进行安装 Android SDK, 所以这一步跳过
直接安装 Android Studio, 直接安装 Android Studio 的好处是, 自动安装好开发安卓的所有开发环境, 包括 Android SDK,Android 模拟器等等.
下载好 Android Studio 以后, 进行安装
为 Android 设置 Proxy
由于被 block, 通过 Android Studio 下载一些需要的模拟器, 还有创建项目的时候需要的 gradle 文件都会失败. 这里以 Shadow Sockets 为例, 演示如何配置 Proxy
确保有一个正常工作的 shadow sockets
到此为止, 你必须有一个能够正常工作的 shadow sockets, 能够访问一些 block 的网站, 无论你是自己在 linode 上自己搭建服务还是通过购买第三方的服务, 你都需要有一个能够正常工作的 shadow sockets
检验是否需要配置 Proxy
打开刚刚安装好的 Android Studio, 如下所示:
图片. PNG
点击进入到 SDK Manager 中, 如果你出现如我所示的界面:
图 1.PNG
图 2.PNG
那么恭喜你, 你的 Android Studio 已经为你自动下载安装好了 Android SDK, 如果没有出现, 或者是出现了, 图 2 中红色文字提示的情况, 那么, 你就需要配置一下你的 Android Studio 的 Proxy 了, 请往下看.
配置 Android Studio Proxy
图片. PNG
图片. PNG
然后点击 Apply,OK.
看配置好的 Proxy 是否是正常工作了, 回到这个界面:
图片. PNG
如果没有出现黄色的感叹号, 就说明你的 Proxy 是配置成功了.
设置 ANDROID_HOME 路径
看上面一段文字的图片, 那个 Android SDK Location 这个路径就是你的 Android 安装路径, 在终端中执行命令 export ANDROID_HOME=your_path 把 your_path 换成你 Android Studio 中显示的路径即可, 当然了, 如果你不想每次进入终端都不能找到这个环境变量, 就直接在. bashrc 或者. zshrc 文件中直接输入这条命令
设置 ANDROID_SDK_ROOT 路径
该路径与 ANDROID_HOME 路径一致
运行命令
$ANDROID_HOME/tools/bin/sdkmanager "tools" "platform-tools" "platforms;android-25" "build-tools;25.0.2" "extras;android;m2repository" "extras;google;m2repository"
当你完成上述要点后你就已经完成了大多数 Android 开发所需要的环境配置, 打开你的 Android Studio, 新建一个项目, 此时如果你的 Proxy 没有设置好的话, 在新建项目的时候会一直显示在 Loading, 如果你的 Proxy 配置好了, 你就可以看到那个进度条在进行滚动了, 如下所示:
图片. PNG
新建好项目后, 你会看到如下所示:
图片. PNG
点击图示的小图标 (如果此时这个小图标是灰色的, 那么一定是前面的某个步骤没有做对, 做完整, 请检查, 另外注意一下 Android Studio 中 Event Log 中给出的错误信息提示, 这将有助于你找到问题的所在)
图片. PNG
图片. PNG
图片. PNG
根据提示安装所有需要安装的包.
至此, 安卓的开发环境已经搭建完毕.
搭建 iOS 开发环境
安装 xcode
xcode 的安装没有什么可说的, 直接在 App Store 中下载即可.
安装 Command Line Tools
在终端中运行 xcode-select --install
依次运行以下命令
- sudo Gem install xcodeproj
- sudo Gem install CocoaPods
- brew install xcproj
至此 iOS 的开发环境也大家完毕了
醉后一战
运行
NPM i -g nativescript
重新打开 terminal
运行 tns doctor
如果没有提示 Warning, 那么就说明大功告成了, 到 tutorial 页面开启你的第一个 NativeScript 应用吧.
如有任何疑问, 欢迎随时交流
来源: http://www.jianshu.com/p/c18526e50c83