在 Android Wear 上运行的 NativeScript 应用示例

NativeScript 周围拥有最大的生态系统之一，可能是移动开发框架中最大且最成熟的生态系统。我们通过支持任何原生库，将 iOS 和 Android 原生生态系统 结合起来，并且还 支持 npm.js 和 JavaScript 生态系统。我们不知道这些生态系统中所有库的数量，但您可以在使用 NativeScript 创建的全新原生移动应用程序中使用其中许多库。将此与我们完整的原生 API 支持相结合，您将了解为什么我们可以开箱即用地启用许多场景。

经常被问到的问题之一是，是否可以使用您的 JavaScript 技能与 NativeScript 结合，实现一个可穿戴设备的应用。答案是肯定的，在这篇博文中，我们将向您展示如何构建一个在 Android Wear 设备上运行的应用。随着我们的 1.1 版本 在两周后发布，我们将支持 Apple Watch 设备，因此未来的博文将专门用于 Apple Watch。如果您等不及，请查看我们的 WatchKit 示例，它使用我们 GitHub 仓库中的最新代码。

不多说了，让我们开始真正的编码吧：）。

首先，让我们展示一下我们要构建什么。

1. 让我们先创建一个新项目，并为其添加 Android 平台。

   tns create AboutTime --appid org.nativescript.aboutTime

   cd AboutTime

   tns platform add android
   
   

   这将创建一个 NativeScript 应用程序，并具有适用于 Android 应用程序的正确项目结构。我们需要稍微修改一下才能使其支持 Android Wear。

2. 转到 AboutTime/platforms/android 目录，编辑 AndroidManifest.xml 文件。

         在 <uses-permission ...> 语句旁边添加以下行    

   <uses-feature android:name="android.hardware.type.watch" />

   
   并将应用程序主题更改为

   android:theme="@android:style/Theme.DeviceDefault"

    

3. 转到 AboutTime/app 目录，删除所有文件，除了 App_Resources 目录。

4. 在 AboutTime/app 目录中创建一个 bootstrap.js 文件，并从中引用主页面

require("./mainpage");


5. 在 AboutTime/app 目录中创建一个 mainpage.js 文件，并在其中添加一些代码
   
   
   var MainActivity = (function (_super) {

       __extends(MainActivity, _super);

    

       function MainActivity() {

       }

    

       MainActivity.prototype.onCreate = function () {

        _super.prototype.onCreate.call(this, null);

    

         var resID = this.getResources().getIdentifier("activity_main" , "layout", this.getPackageName());

         this.setContentView(resID);

    

         var buttonId = this.getResources().getIdentifier("button" , "id", this.getPackageName());

         var button = this.findViewById(buttonId);

    

         var counter = 0;

         button.setOnClickListener(new android.view.View.OnClickListener("AppClickListener", {

             onClick:  function() {

                 button.setText("Hit me " + ++counter);

             }}));

       };

       return MainActivity;

        

   })(com.tns.NativeScriptActivity);

    

   app.init({

        

       getActivity: function(intent) {

           if (intent.getAction() == android.content.Intent.ACTION_MAIN) {

               return MainActivity;

           }

           else {

               fail("Unknown action");

           }

       },

        

        

       onCreate: function() {

           __log("Application on create called");

       }

   });
   
   

   这将创建一个 MainActivity 类，并在下面 layouts xml 文件中定义的 Button 上设置点击处理程序。

   
   
   

6. 创建 MainActivity 的 UI 布局。

   1. 转到 AboutTime/platforms/android/res 目录，并在其中创建一个 layout 目录

   2. 在 layout 目录中创建一个名为 activity_main.xml 的文件 AboutTime/platforms/android/res/layout/activity_main.xml。

   <?xml version="1.0" encoding="utf-8"?>

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

      xmlns:tools="http://schemas.android.com/tools"

      android:layout_width="match_parent"

      android:layout_height="match_parent">

      

      <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:orientation="vertical"

        android:layout_centerVertical="true">

      

        <TextView android:id="@+id/text"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:text="Hit the button" />

          

        <Button android:id="@+id/button"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:text="@string/hit_me" />

        </LinearLayout>

   </RelativeLayout>
   
   这定义了可穿戴应用程序 UI，就像你在编写 可穿戴应用程序 时通常做的那样，使用 xml 文件。
   我们的 NativeScript 代码会查找并注入这些 UI 定义，通过上面的调用 this.setContentView(resID) 来完成。

    

7. 使用 NativeScript 构建你的第一个 Android Wear 项目

   tns build android

    

8. 将你的应用程序部署到 Android Wear 模拟器，并启动 AboutTime 应用程序

   adb -e install AboutTime-debug.apk

    

 下面的截图显示了你的第一个针对 Android Wear 的 NativeScript 应用程序。

就是这样。这就是你如何编写 Android Wear 的 NativeScript 应用程序。请分享你对此的反馈，并让我们知道我们是否可以改进它。

此示例的代码在这里： sample-Android-Wear

在 Twitter 上关注我们 @NativeScript 并为我们的 NativeScript GitHub 代码库 点赞，以获取更多有趣的代码示例。

欢呼！
Lubomir Blagoev
NativeScript 团队