cordova开发游戏

2019-01-09 22:50:25 sssdhua 阅读数 0

温馨提示:本文篇幅较长,建议讲究阅读策略,抓住每段的重点语句。

由于并不是专职移动端app开发,但是看着丰富多彩的app, 真是手痒痒,想自己亲手动手创造一个自己的app,来满足一下自己的成就感,那么有想法很好,二话不说自己就开始动手开干了,经过一系列调查,最终采用的技术选型是 h5+cordova技术来实现这个问题,用这种选型的好处就是开发效率高,能够实现一份代码多个平台,非常省心,当然,不好的地方是可能并没有原生开发的app那么流畅,不过相信随着h5技术的提升,这一差距也会逐渐的减小(根据实际做出的效果,个人感觉流畅度还是不错的,很难分辨出是原生的还是非原生的)。

技术选型ok之后,就开始动手开干了,开始的第一步,开始写逻辑代码,利用2周的业余时间总共写了2600多行js代码,这2600行js代码算是全部功能的实现了,然后将这些代码部署了在我的一个几百块钱的安卓手机上之后,发现一些都还顺利,一切效果都是按照自己的意愿去执行的,既然安卓这么顺利了,我就想部署在苹果里也差不到哪里去,可是大错特错了,放在了我的iphone7中的运行体验真是太糟糕了,竟然还不如几百块钱的安卓里体验好,不过经过一些列的处理与代码兼容的调整,最后在我的iphone7里达到了理想的效果,那么接下来我就说说我所遇见的问题以及我是怎么去解决它的。

全屏显示问题

作为一个娱乐游戏性的app, 个人感觉只有全屏展示才显得比较高端大气不是么?因此,没得说必须要全屏,在安卓下实现全屏很简单,按照cordova的官方说明在配置文件里加一句 这样的代码就可以轻松搞定这个问题了,可是到了ios下,发现这么做并没有什么卵用,那个可恶的电池条非常坚强的在那存在着,一丝不动,我尝试了n多种办法他依然淡定的在那里存在着,像是故意气我似的,最后找到了解决方法,在一个project.plist文件里加了两行配置,终于将它拿下,也总算是松了一口气了,嘿,小样,终于战胜你了吧,具体配置如下图所示(当然这只是其中一个解决方案,也肯定有其他的办法了)
在这里插入图片描述

事件点击问题

之前曾经听说过,ios下点击事件延迟300ms的问题,但是对于普通的点击,这么短的延迟大多数人也是感知不到的,但是对于一些场景这个差别就大了去了,我的应用场景是玩家点击下落的物体,物体是在不停的向下运动,如果点击之后,延迟300ms,300ms后物体已经移动到另外一个位置了,特别是速度越来越快这个偏差将越来越大,这种情况300ms的延迟当然是无法接受的了,根据网上说的解决方案是通过引入fastclisk这个库文件进行解决,然后加入一句代码就可以轻松搞定,代码是这样写的:FastClick.attach(document.body);

不过在实际解决问题的过程中发现直接将这句代码copy过去并没有效果,注意细节的地方应该是那个地方不要写成document.body, 可能你的实际画布与document.body并不在同一层,而应该是将这个元素直接定位到你的画布上。

现在终于知道ios的滑动效果为啥那么流畅了,因为它是做出了牺牲的,当手触摸屏幕的时候最先触发的是touch事件,而click优先级并没有这么高,安卓并没有做出这个牺牲,因此安卓的滑动效果上就不如苹果喽。

后台唤醒问题

在ios下还会出现一个问题,那就是在后台停留的时间长了,整个应用再唤醒就像死了一样,点击屏幕上任何一点也没有什么反应,解决这个问题的办法,网上有人给出了解决方案如下,在页面加载完成后加入这样一段代码:

window.onpageshow = function(event) {

if (event.persisted) {

window.location.reload()

}

};

可是到实际应用中,并没有什么效果,大概率是没有应用好的缘故,我也懒得想这其中的具体原因了,最后我自己另辟蹊径用了这样一套方案。

在应用退出后台时触发这段代码(当然,下面这个代码里也包含了部分其他逻辑,不过不影响观看)

var timestamp1 = new Date().getTime();

var data = {data:“no”,outtime:timestamp1};

setJSONValue(‘shebeiStartflag’,data);

在应用重新从后台唤醒的时候执行下面这段代码:

if(‘ios’ == getMObileType() ){

var data = getJSONValue(‘shebeiStartflag’);

var timestamp2 = new Date().getTime();

if(data && data.outtime && (timestamp2 - data.outtime > 1000 * 300 ) ){

window.location.reload()

}

}

就这样,通过这两处代码,完美的解决了这样的问题

屏幕不固定的问题

然后在ios下还会出现这样一个比较怪的现象,就是用手往上扒动或者往下扒动会出现这样的现象,会出现白边,为了更形象的说明,我就录制一段视频给大家看。

视频 | 1111
时长:00:00:16

当然,很明显看出这是滑动触发的事件,在本应用中并不需要滑动,因此我就加了一段下面这个代码得意完美搞定这一问题。

var touchable = ‘createTouch’ in document;

if(touchable){

document.getElementById(“canvas”).addEventListener(‘touchmove’, function(e) {

e.preventDefault && e.preventDefault();

e.returnValue=false;

e.stopPropagation && e.stopPropagation();

}, false);

}

经过一系列的不屑努力,终于在iphone上也出现了一个体验完美的app了,另外不得不吐糟一下ios的证书问题也是很不友好的一个体验, 它并不像安卓下那个签名那么简单好用,关于证书的一些列配置,大家可以在网上找到,这里就不过多去说了,写下这篇文章的目的除了分享给大家之外,我也留着以后可以看,就相当于做了一个记录,希望我说的这些东西,对你有用!

大家好,我是“上世是朵花”。如果你有什么好的看法或者观点可以在评论区展现你的才华,互动交流,如果想进一步了解我,那就关注我吧!(微信公众号:sssdhua )

2016-04-19 11:39:10 GoodShot 阅读数 2240

Visual Studio 2015 和 Apache Cordova 跨平台开发入门(一)

基于 Windows 10 的 Visual Studio 2015 跨平台的应用开发主要分为基于Visual Studio 安装 Xamarin 扩展的跨Android、iOS 和 Windows的应用开发,基于Apache Cordova 的 Visual Studio 工具开发跨Windows、Android 和 iOS 设备的应用,基于Visual C++ 创建跨 Android 和 Windows 的应用,以及Visual Studio tools for Unity 创建跨 Android、iOS 和 Windows平台的游戏。

此系列文章主要针对于基于Apache Cordova 的 Visual Studio 工具,介绍开发跨Windows、Android 和 iOS 应用的实战。使用Apache Cordova的前提是您比较熟悉 HTML 和 JavaScript,不一定非常精通 JavaScript就可以使用Apache Cordova 的 Visual Studio 工具开发跨Windows、Android 和 iOS 的应用。

本系列文章主要内容:

在 Windows 10 中安装 Visual Studio 和Visual Studio Tools for Apache Cordova

创建Cordova 跨平台应用

Cordova 应用与 Microsoft Azure 的数据互联

适用于 Android 的 Visual Studio 仿真程序

打包和发布Cordova应用程序

 

Cordova 是什么?

简单地说,它是一个跨平台开发的框架。 此框架包括插件模型,插件模型提供了一个可运行于所有三个平台(iOS、Android 和 Windows)设备功能的 JavaScript API。

由于这些 API 是跨平台的,因此你可以在三个平台之间共享所编写的大部分代码,减少开发和维护成本。 此外,无需从头开始。 如果已创建了其他类型的 Web 应用程序,则可以与 Cordova 应用共享这些文件,而无需以任何方式修改或重新设计。

 

安装开发环境

在Windows 10中安装 Visual Studio 2015和Visual Studio Tools for Apache Cordova

于 https://www.visualstudio.com/downloads/visual-studio-2015-downloads-vs 可下载 Visual Studio 2015(当前微软提供的RC版),您可以选择 Community 版本(免费)或者 Enterprise 版本(商业版)。

 

说明:

在Visual Studio 2013中 Cordova 工具是作为单独的扩展安装,在 Visual Studio 2015中已经集成于Visual Studio中,建议您使用Visual Studio 2015开发Cordova的跨平台应用。

 

  1. 运行Visual Studio 2015安装程序,确保安装以下功能:
  • HTML/JavaScript (Apache Cordova)
  • Windows 8.1 和 Windows Phone 8.0/8.1 工具

确保允许安装程序安装第三方软件依赖项,或者可以清空软件选项并手动安装以后要使用的依赖项。

Visual Studio 2015 的安装程序包括支持 Cordova 应用开发的第三方开源软件:

  • Joyent Node.js 让 Visual Studio 能与 Apache Cordova 命令行界面 (CLI) 和 Apache Ripple 仿真器集成
  • 为特定的 Cordova 插件手动添加 Git URI 时需要使用的 Git CLI。
  • 使用 Google Chrome在 iOS 和 Android 上运行 Apache Ripple 仿真器
  • Android 生成过程需要用到的 Apache Ant 1.8.0 或更高版本。
  • Android 生成过程需要用到 32 位的 Oracle Java JDK 7。注意: 不支持 64 位的 Java。
  • Android 生成过程和 Ripple 需要用到的 Android SDK。
  • Apple iTunes将应用部署到iOS 设备。

 

  1. 安装针对iOS的工具

若要使用 Visual Studio 在 iOS 模拟器或 iOS 设备上创建和运行 iOS 应用,必须 Mac 计算机上安装并配置远程代理 vs-mda-remote,并在 PC 上的 Visual Studio 中配置远程代理。此部分的配置请读者参考 Configure the Visual Studio Tools for Apache Cordova ( https://msdn.microsoft.com/en-us/library/dn771551(v=vs.140).aspx )中的iOS部分。

 

安装扩展后,打开 Visual Studio 并创建空白应用 (Apache Cordova) 项目。 然后,便可使用 JavaScript 或 TypeScript 来开发应用了。 也可以添加插件来扩展应用的功能,编写代码时插件的 API 会出现在 IntelliSense 中。

如果已准备好运行应用并逐行执行代码,请选择一个仿真程序(如 Apache Ripple 仿真程序或适用于 Android 的 Visual Studio 仿真程序)或一个已直接连接到计算机的设备。 然后,启动应用。 如果是在 Windows PC 上开发的应用程序,则可在其中运行。 所有这些选项都作为 Visual Studio Tools for Apache Cordova 扩展的一部分内置于 Visual Studio 中。

手动安装Cordova依赖项

通常我们会选择不安装一个或多个带扩展的依赖项,待以后手动安装。或者像作者一样安装Android SDK时遇到下载失败的情况。此时,我们都需要用到手动安装依赖项的技能。

请注意Java的安装请选择32位安装包,因为不支持64位的Java。

 

使用这些链接来手动安装依赖项。

Joyent Node.js

推荐安装 x86 版本的 Node.js。

Google Chrome

Git 命令行工具

在安装 Git 命令行工具时选择将 Git 添加到你的命令提示符路径这一选项。

Apache Ant

下载 Ant 并将其解压到 C:/ant-1.x.x 之类的位置

将 ANT_HOME 环境变量设置为指向之前的位置。

将 %ANT_HOME%\bin 添加到系统路径。

32 位 Oracle Java 7

将 JAVA_HOME 环境变量设置为 C:/Program Files/Java/jdk1.7.0_55

将此项添加到系统路径:%JAVA_HOME%\bin

带 SDK 程序包的 Android SDK

Android SDK 工具(最新版本)

Android SDK 平台工具(最新版本)

Android SDK 生成工具(19.1、19.0.3 和 21)

带以下程序包的 Android 4.4.x(API 级别 21):

SDK 平台

ARM EABI v7a 系统映像

Intel x86 Atom 系统映像

Google API(x86 系统映像)

Google API(ARM 系统映像)

下面的插图显示了 Android SDK 管理器中所需的最小程序包。

将 ADT_HOME 环境变量设置为 SDK 安装位置。

将此项添加到系统路径:%ADT_HOME%\tools;%ADT_HOME%\platform-tools

Apple iTunes (x86 、x64 )

WebSocket4Net(在 Windows 7 上开发应用时需要使用)

  1. 从 CodePlex 上下载 WebSocket4Net(0.9).Binaries.zip。
  2. 从下载的 zip 文件中将 net45\Release\WebSocket4Net.dll 复制到你计算机上的 %ProgramFiles(x86)%\Microsoft Visual Studio 12.0\Common7\IDE\CommonExtensions\Microsoft\WebClient\Diagnostics\ToolWindows 文件夹中。

 

重置环境变量

可使用Visual Studio检测和维护下列环境变量中的安装路径:

  • ADT_HOME 指向 Android 安装路径。
  • ANT_HOME 指向你计算机上的 Ant 文件夹。
  • GIT_HOME 指向 Git 安装路径。
  • JAVA_HOME 指向 Java 安装路径。

Visual Studio 在创建并运行你的应用时会使用这些环境变量。 你可以通过 Visual Studio"选项"对话框来查看环境变量并修改它们的值。

  1.  Visual Studio 菜单栏上依次选择"工具""选项"
  2. 在选项对话框中,选择 适用于 Apache Cordova 的工具,然后选择Environment Variable Overrides。
  3. 请选中要修改项的复选框,然后修改该值。

若要将环境变量重置为默认值,请取消选中其复选框或选择"重置为默认"。

 

创建Cordova跨平台应用

创建新项目

  1. 以管理员用户打开 Visual Studio。 在菜单栏上,依次选择"文件"、"新建"、"项目"。

 

  1. 在"新项目"对话框中,在"模板"下,选择"JavaScript"和"Apache Cordova 应用",然后选择"空白应用"模板。

 

Visual Studio 创建新的工程,在Solution Explorer 中包含以下的文件

 

全新的Cordova 项目目录结构:

  • merges 存放各个平台的特殊的代码,与www目录合并编译,相同的文件merges下的代码文件优先。
  • plugins 即插件目录,cordova 访问本地设备属性的原生API也是以插件的形式提供。
  • res 适用于各个平台的特殊资源(图标和启动画面)。
  • www 包含应用程序代码。
    • css 包含默认空白模板的基本CSS样式。
    • images 建议应用的图片保存于此。
    • scripts 是JavaScript 和 TypeScript 文件默认的保存目录。

 

  • config.xml 包含工程的配置文件
  • taco.json 存储使 Visual Studio 打造非 Windows 操作系统像 mac 上的项目元数据
  • www\index.html 是应用默认的主页面。
  • Project_Readme.html 包含有用的信息链接。

 

 

参考

https://www.visualstudio.com/en-US/explore/cordova-vs

https://msdn.microsoft.com/en-us/library/dn771552(v=vs.140).aspx

https://cordova.apache.org/

https://xamarin.com/msdn

 

作者:雪松

Microsoft MVP -- Windows Platform Development,

Hortonworks Certified Apache Hadoop 2.0 Developer

2014-12-13 18:33:19 zoutongyuan 阅读数 58197

JavaScript 写多了,要想真正提高js水平,研究其他js框架源码是不错的选择。Github上大部分都是js、css相关的项目,可以有目的性的 check out 下来,研读研读,还是非常收益的,跟随nb的人,也会慢慢变的nb。


场景:有一个朋友,他公司是做移动应用开发的,3个安卓开发人员,3个 ios,然后是 java 开发,美工 ,10多个人的公司,主要是以接项目为主,一个项目(电商、微信、聊天 类型的)大概在20万左右, 差不多1个半月 做完(代码质量能不能保证,不知道,不过我觉得开发是一件很严谨的事,要开发出高性能、高健壮性的程序,还是很难的),公司销售很给力,能谈下好几个项目。问题来了,要能同时进行好几个项目,就要招 移动开发的人,如果有时没接到项目,那 ,又会闲着。如果有些 客户 要 做 wp ,黑莓的 ,那就做不来了。于是迫切 想 找一些跨平台的 开发技术 来 解决问题?


这个场景是真实的,不是 yy,那么我们来玩玩 Ionic ,Apache Cordova 这些技术,这样我们就有更深入的 理解了。

我做过 一些 安卓的小东西,ios 没玩过;我是一个  web技术 狂热者,很看好web技术;我认为那些 android 、ios 等等  将会慢慢 被 web 技术 取代,浏览器 作为跨平台的中间件,将会成为主流。do not mind


尊重原创,转载请注明出去:http://blog.csdn.net/zoutongyuan/article/details/41910903


进入主题吧。

1、Ionic 是什么?

好吧,我们看 Ionic 能给我们提供什么?  一个样式库,你可以使用它 来 装饰你的 HTML 网页 ,看起来 想 移动程序的 界面,什么 header 、content、footer、grid、list。这貌似没什么 实质性的东西, sencha touch ,jq 都能提供 。

一个用 angularjs 写的 工具库,姑且叫它 组件库吧。Ionic的 grid 设计的比较合理,比 bootstrap的 更强大。

当然它 还包含 了angular-animate、angular-resource、angular-sanitize、angular-ui-router,适应移动平台的模块库。


2、Apache Cordova 是什么?

Apache Cordova 提供用 Javascript 访问 移动平台  的 API 。

其内部是用每个 平台下的  web view 组件,运行 程序,然后实现了 每个平台下的 一套 CordovaLib  供你写的程序调用,然后你就可以 调用 摄像头、磁盘等 重api。


接下来 动手玩玩。首先安装nodejs,和平台的 (ios || android)sdk,这里不在 累述 

1、先安装 cordova

npm install -g cordova

2、安装 Ionic

npm install -g ionic

3、创建项目

ionic start todo blank

4、配置平台

ionic platform add android

然后 在IDE中打开 项目:



www是主目录

index.html 是 主页面


刚才我们配置 平台的时候 ,工具帮我们做了一件事,创建 了一个 安卓 应用,

创建一个 CordovaApp 类,继承自 CordovaActivity , Activity 是 安卓的4大组件,表示可以看到 了一块窗口。

它做了一个 引导,就是loadUrl,这里不做过多的 介绍,有兴趣 我们以后深入研究,这里我们只是 发散性的引导。


现在,你就可以使用 ionic 和 Apache Cordova 提供的 api 来 开发 跨平台的应用了。


来改我们的inde.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>
<body ng-app="todoApp" ng-controller="TodoController" ng-cloak>

    <ion-side-menus>

        <!-- Center content -->
        <ion-side-menu-content>
            <ion-header-bar class="bar-dark">
                <button class="button button-icon" ng-click="toggleProjects()">
                    <i class="icon ion-navicon"></i>
                </button>
                <h1 class="title">{{activeProject.title}}</h1>
                <!-- New Task button-->
                <button class="button button-icon" ng-click="newTask()">
                    <i class="icon ion-compose"></i>
                </button>
            </ion-header-bar>
            <ion-content scroll="false">
                <ion-list>
                    <ion-item ng-repeat="task in activeProject.tasks">
                        {{task.title}}
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu-content>

        <!-- Left menu -->
        <ion-side-menu side="left">
            <ion-header-bar class="bar-dark">
                <h1 class="title">Projects</h1>
                <button class="button button-icon ion-plus" ng-click="newProject()">
                </button>
            </ion-header-bar>
            <ion-content scroll="false">
                <ion-list>
                    <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
                        {{project.title}}
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>

    </ion-side-menus>

    <script id="new-task.html" type="text/ng-template">
        <div class="modal">

            <!-- Modal header bar -->
            <ion-header-bar class="bar-secondary">
                <h1 class="title">New Task</h1>
                <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
            </ion-header-bar>

            <!-- Modal content area -->
            <ion-content>

                <form ng-submit="createTask(task)">
                    <div class="list">
                        <label class="item item-input">
                            <input type="text" placeholder="What do you need to do?" autofocus ng-model="task.title">
                        </label>
                    </div>
                    <div class="padding">
                        <button type="submit" class="button button-block button-positive">Create Task</button>
                    </div>
                </form>

            </ion-content>
        </div>
    </script>

</body>
</html>

js/app.js

var todoApp = angular.module('todoApp', ['ionic']);

todoApp.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});


todoApp.controller('TodoController', function ($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {

    // A utility function for creating a new project
    // with the given projectTitle
    var createProject = function (projectTitle) {
        var newProject = Projects.newProject(projectTitle);
        $scope.projects.push(newProject);
        Projects.save($scope.projects);
        $scope.selectProject(newProject, $scope.projects.length - 1);
    }


    // Load or initialize projects
    $scope.projects = Projects.all();

    // Grab the last active, or the first project
    $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];

    // Called to create a new project
    $scope.newProject = function () {
        var projectTitle = prompt('Project name');
        if (projectTitle) {
            createProject(projectTitle);
        }
    };

    // Called to select the given project
    $scope.selectProject = function (project, index) {
        $scope.activeProject = project;
        Projects.setLastActiveIndex(index);
        $ionicSideMenuDelegate.toggleLeft(false);
    };

    // Create our modal
    $ionicModal.fromTemplateUrl('new-task.html', function (modal) {
        $scope.taskModal = modal;
    }, {
        scope: $scope
    });

    $scope.createTask = function (task) {
        if (!$scope.activeProject || !task) {
            return;
        }
        $scope.activeProject.tasks.push({
            title: task.title
        });
        $scope.taskModal.hide();

        // Inefficient, but save all the projects
        Projects.save($scope.projects);

        task.title = "";
    };

    $scope.newTask = function () {
        $scope.taskModal.show();
    };

    $scope.closeNewTask = function () {
        $scope.taskModal.hide();
    }

    $scope.toggleProjects = function () {
        $ionicSideMenuDelegate.toggleLeft();
    };


    // Try to create the first project, make sure to defer
    // this by using $timeout so everything is initialized
    // properly
    $timeout(function () {
        if ($scope.projects.length == 0) {
            while (true) {
                var projectTitle = prompt('Your first project title:');
                if (projectTitle) {
                    createProject(projectTitle);
                    break;
                }
            }
        }
    });

});


todoApp.factory('Projects', function () {
    return {
        all: function () {
            var projectString = window.localStorage['projects'];
            if (projectString) {
                return angular.fromJson(projectString);
            }
            return [];
        },
        save: function (projects) {
            window.localStorage['projects'] = angular.toJson(projects);
        },
        newProject: function (projectTitle) {
            // Add a new project
            return {
                title: projectTitle,
                tasks: []
            };
        },
        getLastActiveIndex: function () {
            return parseInt(window.localStorage['lastActiveProject']) || 0;
        },
        setLastActiveIndex: function (index) {
            window.localStorage['lastActiveProject'] = index;
        }
    }
})

这个todo 我们没有用到 Apache Cordova 的api,所以,这个项目在浏览器中 也可以运行。

使用 

$ ionic serve


在我的小米3 中 看看。使用下面命令,你可能要安装好 驱动,

$ ionic run android


最后编译,

$ cordova build --release android

来评价这一些技术吧。

天下大势,合久必分,分久必合。

HTML5 + CSS3 + Javascript 最适合作为跨平台的技术栈,其开放 ,自由,每个人都可以 为这些技术的制定 ,发表意见 ,像 使用 svg 、canvas 、css 3动画 开发的游戏  ,已经在撼动 桌游, 手游 等 原生语言开发的 应用了,所以不仅仅是 应用。

而 Apache Cordova  只是 一个 过渡阶段的产物。对于 新技术的 出现 ,是值得鼓励的 。

让我们拭目以待,web 技术 明天的发展吧。



2018-01-12 16:21:28 u012117031 阅读数 1026

一 安装node.js

下载地址:https://nodejs.org/en/

安装完成后,cmd执行 npm install -g cordova ,全局安装Cordova。 
 

二 cmd创建Android项目

  • 1.新建一个项目: 
    路径名>cordova create 文件名 包名 工程名
  • 2.添加Android平台:cordova platform add android 

三 导入工程 





2017-08-13 12:18:17 liyan530 阅读数 0
说明:本规范只针对电力信息来制定的开发规范,其他用户可作参考

1.  基本规范

符合web标准, 语义化html, 结构、表现、行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

2. 文件规范

html, css, js, image文件均放在约定的目录中,基本目录结构如2.1图,并且目录与文件名中不能包含中文。其中style放css文件,plugins放平台的cordova插件,index.html为应用的首页面,icon.png为应用的图标。(cordova.js和cordova_plugins.js为与平台交互的js文件,必须放在根目录下

 2.1

3. 书写规范

3.1. html 规范

1. 文档类型声明及编码: 统一声明为html5meta属性让网页宽度默认等于屏幕宽度,原始缩放比例为1.0,即100%显示。编码统一为utf-8, 书写时利用IDE实现层次分明的缩进

2. cssjs文件外链尽量放置在至<head>...</head>之间

3.移动端需要在title上面加上meta,设置width=device-width, initial-scale=1, user-scalable=no 等比例窗口代码。

例子:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <title>首页</title>

<meta charset="utf-8" />

</head>

<body>

这里是内容

</body>

</html>

  

3.2. 引用css和js

由于国网使用的是crodova,为了使各个手机系统使用同一套代码,所以,在建立移动APPWeb项目的时候,必须先引用cordova.js而后再引用你的其他js和css。

(友情说明:cordova_plugins.js 不需要引用,需放在跟目录,再调用cordova.js,会自动去读取配置,所以大家不必去在意cordova_plugins.js。)

3.3. 常用插件

3.3.1. 登录插件

 

mam.navigator.loadconfig.getUserInfo(1,function login(v) {

             //getUserInfo 如果是苹果,则不需要参数1 ,直接新版本

中,不需要参数,直接一个回调函数即可。mam.navigator.loadconfig.getUserInfo(callback)

                });

  

3.3.2. 获取数据插件

获取数据分为get,post,getJSON,postJSON插件,推荐使用postJSON

mam.navigator.ajax.postJSON(appcode,params,appservercode, successCallbac);

 /**

        参数说明:

  appcode:应用部署的环境地址(例如”DLSH”对应:http://pubtest.js.sgcc.com.cn)

   params: 要发送给服务器的数据,以 Key/value 的键值对形式表示。如果不需要传参数,传递””即可。

 appservercode:具体的接口资源(例如”API”对应:/dlsh_web/ajax/api.do)

  successCallback:成功回调

        **/

 

3.3.3. 返回与退出应用插件

一般来说,每个应用都有返回至上一页或者至指定的页面,也可以直接退出当前应用,而这个js是每个应用都用到的,下面的代码示例可应用到所有的移动h5页面中。

代码示例:

var devicePlatform;//获取当前的设备

function onDeviceReady() {

    devicePlatform = device.platform;

    if ("iOS"== devicePlatform) {

        mam.navigator.appmenu.setBackButton(null, null, "1");//这里是设置苹果手机的返回按钮

    }

    document.addEventListener('backbutton', hback);

}

function hback() {

    if ("iOS" == devicePlatform) {

        mam.navigator.appmenu.setBackButton(null, null, "0");

    }

    document.removeEventListener('backbutton', hback);

   //第一种:直接退出

    mam.navigator.appmenu.exitApp();

//第二种:直接跳转到相对应的页面

window.location.href = "../index.html";

//第三种:直接跳转至上一页

History.back(-1);

}

 

3.3.4. 添加菜单插件

由于平台限制,最多且只可添加3个菜单,而且,对应的图片只能是1,2。

....addMenu(成功回调,Null,图片类型,对应标题,操作函数)

 

  mam.navigator.appmenu.addMenu(successCallback, null, "1", "全部已读", "onallackclick()");
                mam.navigator.appmenu.addMenu(successCallback, null, "2", "其他页面", "tiaozhuan()");
 function successCallback() {
                }
function tiaozhuan(){
    window.location.href="页面地址";
}
    function onallackclick() {

//这里面可以操作你的逻辑,也可以操作其他,下面给的是一个操作示例
            if (deletetype == 1) {
                mam.navigator.ajax.getJSON("TZGL", { method: 'getNoticeInfo', 'type': 7, 'userid': userId }, "TZRK", getAllAck);
                function getAllAck(v) {
                    var issuccess = true;
                    if (v == '') {
                        issuccess = false;
                    } else {
                        if (typeof (v.success) != 'undefined') {
                            if (v.success == 'false' || v.success == false) {
                                issuccess = false;
                            }
                        }
                    }
                    if (issuccess) {
                        $("div[id^='sendlist']").addClass('readed');
                        $$('unread').style.display = 'none';
                        unreadnum = 0;
                        mam.navigator.notification.toast("设置成功", 0);
                    } else {
                        mam.navigator.notification.toast("设置失败", 0);
                    }
                }
            } else {
                mam.navigator.notification.toast("请先取消删除", 0);
            }
        }

 

注释:还有其他各种插件未讲解的,请参考移动交互动平台JavaScript接口设计文档

4. IOS和安卓常见问题总结

报错信息

报错例子

解决方法

andriod可以访问页面
苹果访问不了

Index.html

安卓和苹果都是是写index.html

苹果区分大小写,所以,必须要
么全部小写,要么全部大写,要
么按照定义的格式来抒写。

访问不了插件(未获取到插件方
法)

苹果,安卓都不可以

1:看cordova.js和public.js是否引用
2:看plugins文件夹下是否有这个插件
3:看引用的路径是否有错

安卓可以显示折线图,苹果不显示

测试时间写死了。写成这样:
var t_time = new Date("2015-10-1");
安卓可以访问,苹果报invalid time

如果是测试的时候,时间格式有5种,严格按照时间格式来,才可避免

苹果不显示数据的问题
1)new Date("month dd,yyyy hh:mm:ss");
2)new Date("month dd,yyyy");
3)new Date(yyyy,mth,dd,hh,mm,ss);
4)new Date(yyyy,mth,dd);
5)new Date(ms);
month:用英文 表示月份名称,从January到December

mth:用整数表示月份,从(1月)到11(12月)

dd:表示一个 月中的第几天,从1到31

yyyy:四位数表示的年份

hh:小时数,从0(午夜)到23(晚11点)

mm: 分钟数,从0到59的整数

ss:秒数,从0到59的整数

ms:毫秒数,为大于等于0的整数
new Date("January 12,2006 22:19:35");

new Date("January 12,2006");

new Date(2006,0,12,22,19,35);

new Date(2006,0,12);

new Date(1137075575000);

或者使用public.js里面的formatDate()方法。

后台传的Json字符串,前台使用Json.Parse
转了,安卓是好的,苹果显示不了数据
(注意:若后台传的json字符串,前台不识别的情况下)

Json.Parse(v),安卓可进入,苹果不行

本平台不支持Json.Parse,解决方法:eval("("+v+")") ,最新版本已经支持,如果使用旧版本cordova,请使用eval(虽然eval特么的很浪费内存,但是你也只能使用这个)

苹果手机弹出未加载插件

把cordova.js和cordova_plugins.js 放在
指定的js文件夹中,安卓都可以加载出来,
苹果弹出框(未加载信息)

把cordova.js和cordova_plugins.js 放在根目录就可以了
(注意:这个两个Js文件,务必放在根目录下)

苹果不加载下拉框信息

$("下拉框").attr("selected",true);
安卓手机支持,苹果不支持

写成$("下拉框").prop("selected",true);

 

4.1. 应用发布

应用发布时应当填写相应的表格,见《业务应用发布操作说明_模板.xlsx》,如果需要绑定应用账号,则必须填写正确的账号认证地址,具体的,可以找平台组姚飞索要模板。