【Cordova】Cordova开发

引言

微软开启新战略--移动为先,云为先.作为开发者,首先感受到的变化就是VS2015预览版增加了对各种跨平台框架的支持,极大方便了我们的开发.其中号称原生性能的Xamarin要收费,挺贵的,一般人还真玩不起来.话说什么时候微软把Xamarin收购然后直接免费,那简直画面太美了.不过可能性极小就是了,毕竟Win10才是微软的宝贝.还好,我们还有Cordova可以玩的,只要你懂Html和JS都可以开发APP了.下面,我就简单说说.

Cordova 命令行

在VS2015之前,做Cordova 开发要配置各种各样的东西,创建项目编译项目都要通过命令行来实现,做起来还是挺麻烦的.网上有比较详细的资料,我就直接放资源了.

跨平台框架Cordova 命令行简介（CLI）里面有详细介绍,按照里面的步骤来,轻松得到一个HelloWord.

Android SDK开发包国内下载地址如果嫌官方下载慢,可以到这个网站去看看.

Visual Studio Tools for Apache Cordova

安装VS2015要选择跨平台开发的Apache Cordova,估计是我人品不好,在安装了几次都卡死在下载Android SDK中.如果不幸和我一样的,试多几次吧,估计得翻墙.

Visual Studio Tools for Apache Cordova 入门 MSDN文章,内容不算详细,但是更新得勤快,内容比上个月增加了不少.

用VS2015开发安卓APP

首先新建项目,在其他语言的JavaScript中可以找到Apache Cordova项目,然后就可以着手开发APP了.我采用的是Jq Mobile+ASP.NET Web API的方式,先放上资料.

jQuery Mobile 教程 W3C网站的资料,大而全,基本满足需求.

phonegap100 资料丰富的网站,里面有各种教程,继续深造的好地方.

在项目中可以看到Index.html,它就是APP展示页面的全部了,我们的开发也几乎在上面.看代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>我的APP</title>
    <!-- BlankCordovaApp10 引用 -->
    <link href="css/index.css" rel="stylesheet" />   
    <!-- Cordova 引用，它在生成应用程序时添加到其中。 -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/index.js"></script>
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <link rel="stylesheet" type="text/css" href="scripts/jqmobile/jquery.mobile-1.4.2.min.css" />  
    <script src="scripts/jqmobile/jquery-1.11.1.min.js"></script>
    <script src="scripts/jqmobile/jquery.mobile-1.4.2.min.js"></script>
    <!--<script src="scripts/jqmobile/jquery.rest.min.js"></script>-->

</head>
<body>
    <div data-role="page" id="page">
        <div data-role="header">
            <h1>首页</h1>
        </div>
        <div data-role="content">  
            <div>
                <form id="searchform">
                    <div data-role="fieldcontain">
                        <label for="search">请输入部门:</label>
                        <input type="search" name="search" id="search">
                        <input type="button" id="btn" value="查询" />                      
                    </div>
                </form>

            </div>        
            <div data-role="content">
                <ul data-role="listview" id="searchresult"></ul>
            </div>
        </div>
        <div data-role="footer">
            <h4>页脚</h4>
        </div>
    </div>
    <script>
        $("#btn").click(
             function () {
                 var text = $("#search").val();
                 var apiServer = "http://localhost:42368/api/values";
                 //$.mobile.loading('show');
                 var html = '';
                 $.get(apiServer + "?deptname=" + text, null,
                             function (res) {

                                 if (res != null) {

                                     if (res != null && res.length > 0) {
                                         for (var i = 0; i < res.length; i++) {
                                             html = html + '<li>' + res[i] + '</li>';

                                         }
                                     }
                                     $("#searchresult").html(html);
                                     $("#searchresult").listview();
                                     $("#searchresult").listview("refresh");
                                 } 

                             }, "json")
                         .fail(function () {                         
                         });
             }
            );

    </script> 
</body>
</html>

简单起见,上面只定义了一个Page,也只有一个功能,通过输入的部门名获取部门里面的人员并显示在下面.

如何打包成APK,VS2015貌似没有提供地方可以直接打包.但是,我们可以在项目所在目录的platformsandroidcordova找到build.bat,执行之后就可以在platformsandroidant-build找到生成APK了.如果没有生成APK,那就是因为没有配置环境变量,请参考跨平台框架Cordova 命令行简介（CLI）配置环境变量.

小结

本文简单演示了一个查询APP的开发.话说,现在流行的是Cordova+Ionic+Angularjs这种组合了,听说是因为Jqmobile被人嫌弃慢.有空还得继续学习学习...