使用PhoneGap Wakanda Studio扩展程序缩短移动应用开发时间

最新推荐文章于 2024-08-29 09:28:51 发布

dingshi7798

最新推荐文章于 2024-08-29 09:28:51 发布

阅读量155

点赞数

在上一篇文章中，我介绍了如何使用Wakanda和PhoneGap来构建管理联系人列表的混合移动应用程序，在将其上传到PhoneGap构建之前，我手动打包了该应用程序的客户端部分。

此包装过程过于繁琐，大约需要10个步骤。为了解决这个问题，我们开发了一个新的Wakanda Studio扩展程序，该扩展程序执行客户端应用程序的所有打包，并提供.zip文件作为输出。

现在，我将向您展示如何使用扩展，以便您也可以缩短开发时间。

背景

在开始本教程之前，您应该具有有关HTML5，JavaScript，移动开发世界和安装Wakanda的一些基础知识。

在本文中，我将Wakanda DataStore用作NoSQL数据库，我们的本机应用程序将远程访问Wakanda DataStore ，以使用REST / HTTP和JSON格式获取数据，因此，掌握使用Wakanda的一些基础知识可能会非常有帮助。

扩展程序做什么

使用Wakanda Studio创建项目后，单击Studio顶部的扩展按钮，输入设置，然后单击打包按钮。

该扩展将然后：

创建一个包含该程序包的新文件夹
通过添加PhoneGap库来修改HTML页面：
<script type="text/javascript" src="phonegap.js"></script>
将这两行添加到index-smartphone.js中，以将http请求重定向到给定的IP地址：
WAF.core.restConnect.defaultService = "cors";
WAF.core.restConnect.baseURL = http://wakanda server_url:application_port
将其他行添加到同一文件以从本地客户端文件夹获取WAF API
使用给定的设置将config.xml文件添加到包中（有关更多详细信息，请参见： https : //build.phonegap.com/docs/config-xml ）
在服务器端代码中添加了CORS支持：跨源资源共享，以允许从移动设备进行REST / HTTP调用

下图概述了该过程：

创建Wakanda项目，这是一个简单的HTML5，CSS3和JavaScript移动网站。
使用PhoneGap扩展程序打包项目。
将.zip文件上传到PhoneGapBuild。
生成本机应用程序（.apk，.app等）
在手机中测试安装该应用程序。

使用扩展

在开始使用PhoneGap Wakanda Studio扩展之前，您应该下载Wakanda版本4生产版本。下载Wakanda之后，您将拥有两个文件夹：第一个文件夹用于Wakanda Server，第二个文件夹用于Wakanda Studio。将扩展程序的PhoneGap文件夹复制到Wakanda StudioExtensions中。

1）创建一个项目

打开Wakanda Studio并创建一个新的解决方案。

给您的解决方案起个名字。

转到WebFolder，双击索引页面。

索引页

通过单击Studio的右上角转到“智能手机”页面。

现在，通过在右侧面板中添加小部件以及在左侧使用属性面板来设计界面。

在我的PoC中，我将在页面上添加一个按钮，因此单击该按钮时，设备的位置将显示在警报中。

添加一个按钮

将按钮重命名为“获取地理位置参数”。

现在，单击按钮，然后在右侧的属性面板中选择“单击时”事件。

编写以下代码以获取设备位置并将其显示在文本字段小部件上：

button1.click = <b>function</b> button1_click (event)

    {

        navigator.geolocation.getCurrentPosition(onSuccess, onError);

    function onSuccess(position) {

        var coord = 'Latitude: '  + position.coords.latitude  + '<br />' + 'Longitude: ' + position.coords.longitude + '<br />' + 'Altitude: ' + position.coords.altitude + '<br />';

        alert(coord);

    }

  // onError Callback receives a PositionError object

  //

    function onError(error) {

        alert('code: '    + error.code    + 'n' + 'message: ' + error.message + 'n');

    }

};

    };

现在，该应用程序使用PhoneGap API来获取移动位置。

该应用程序与服务器没有任何交互，因此我们将比服务器端对客户端代码更感兴趣。