Cordova in action学习笔记二:My First Project

最新推荐文章于 2021-02-06 16:26:40 发布

imfzp

最新推荐文章于 2021-02-06 16:26:40 发布

阅读量840

点赞数

分类专栏： hybird 文章标签： hybird cordova html5 移动开发

本文链接：https://blog.csdn.net/imfzp/article/details/52459299

版权

hybird 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

概述

第一个项目总是最激动，我们接着笔记一的内容，深入了解下cordova项目结构

1 典型Cordova项目开发流程见下图

2 Cordova项目文件框架分析

一个新的项目文件结构见下，包括config,hooks,platforms,plugins,www 五部分

2.1 config 里包含项目的基本设置，比如项目id，项目名称等，打开看一下就明了。

2.2 hooks 包含脚本代码，用来自定义cli命令行执行代码。

2.3 platforms 生成各平台的原生代码，类似android，ios原生代码，每次debug会自动覆盖。

2.4 plugins 顾名思义，插件，各平台的原生api也是以插件的方式实现的，比如摄像头之类的，后面会详细学习。

2.5 www 这个就是项目的灵魂所在了，html5+css+js,就是标准的html5网站开发，我们主要代码就在这里，注意，www下的各文件夹以及index.html你可以换成任何你觉得合适的文件架构，并不需要按默认的来，比方说把css改为stylesheet，随便你了。

3 添加平台

cordova项目最终还是要在各平台上运行，那怎么实现各设备平台的支持的，举个例子，老板一天说这个app只需要支持android，过了2个礼拜，老板说，这个项目需要同时支持ios，这怎么办呢，easy，直接通过命令行实现支持即可

输入cordova platforms 即可显示当前支持的平台，见下图

需要生成android/ios平台的话，输入命令 cordova platforms add

$ cordova platforms add android

$ cordova platforms add ios

如果需要去除某个平台支持的话，输入命令cordova platforms remove

$ cordova platforms remove ios

4 添加虚拟机

4.1添加android 虚拟机，

如果是windows 直接打开avd manager，

如果是 mac机使用terminal进入android sdk 所在目录，然后输入

$ android avd

即可打开avd,选择右边create菜单，创建一个新模拟器,输入avdname，device，target，cpu／abi，skin，保存即可

注意：如果出现cpu/api,显示 no system images installed for this target的提示，见下图，那就说明你的android sdk 没有安装target 对应的android版本的system iamge的，打开android sdk manger 安装即可（在mac 上在命令行输入 android 就是打开sdk manager）

4.2 添加ios模拟机（仅针对mac机）

xcode应该已经安装了最新模拟器，如果需要安装更多版本的模拟器的话，选择xcode－preferences－components－simulators，双击对应版本的模拟器，下载即可

5 实体手机设置

如果有实体机，可以更便捷的通过usb调试，注意一点，如果是android机的话，需要打开设置－开发者选项－允许usb调试。

但手机默认设置里面是没有开发者选项这个菜单的，如果你没有这个选项，所以你需要打开设置－关于手机－版本号，对版本号狂点，系统就会提示你有了开发者选项，再去开发者选项去设置即可。

6 在虚拟机或者手机运行该项目

6.1我们刚建立的一个项目，怎么在手机上运行呢,很简单，输入cordova prepare，就会生成所有已加入的平台的原生代码

$ cordova prepare

如果你不想生成所有已添加的平台的源代码，只想生成指定平台的源代码的话，例如生成android平台的话，就添加平台名即可，见下

$ cordova prepare android

6.2 再输入cordova compile 编译

$ cordova compile

特别提示：android编译需要下载gradle，国内的网络环境下载gradle失败率非常高，如果下载压缩包不全，导致解压失败，并且重新输入命令也不再重新下载的话，

我们先看下下图的本地gradle包保存地址，下图就是unzip后面带的地址（users/用户名/.gradle/wrapper/dists/gradle-版本号-all/)

前往该地址，把该文件删除，（.gradle是隐藏文件夹，mac机可以通过finder－前往－前往文件夹，输入地址目录进入。）

再重新输入compile命令下载gradle编译即可

如果一直都无法下载成功的话，你可以手动去下载，源地址在输入编译命令的时候会显示，见下图：复制到浏览器下载，下载后把zip文件夹替换到本地gradle包地址，

再重新输入compile命令编译即可

6.3 更简单的命令就是直接输入cordova build ,这个与prepare+compile是一样的效果

$ cordova build

6.4 在模拟器执行cordova emulate ,这个会先执行builld，再调用模拟器，效果见下图

注意：如果你添加了多个平台，要运行指定平台的话，在cordova emulat 后加平台名称，类似下图

$ cordova compile java

出来的就会是java 模拟器,如下图

6.5 在实体机运行app

连上手机，直接运行cordova run ，会自动发布到手机上并运行，如下图

ios的话通过xcode打开platforms/ios/myfristproject.xcodeproj,在xcode里运行到iphone上，见下图

注，xcode 你需要先注册（交钱给apple）apple的开发者账号，并在xcode-preferences-account里面登入。

7 以上已经给出了创建，生成源代码，模拟器运行整个流程，

下面我们来建一个简单的实际app，就是github api搜索功能

我们打开www/index.html

把默认代码清掉，我们输入代码

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>GitHub Search Demo</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  </head>

  <body>
    <input type="search" id="searchField">
    <button id="searchButton">Search github</button>
    
    <div id="results"></div>
      
  </body>
</html>

打开www/js/index.js,清空并输入代码

/* global $,document,console */

$(document).ready(function() {
	
  $search = $("#searchField");
  $results = $("#results");
  $searchButton = $("#searchButton");
	
  $searchButton.on("click", function(e) {
    var search = $search.val();
    if(search === "") return;

    //disable button while we search
    $(this).prop("disabled",true);

    $results.html("<i>Doing a search for "+search+"</i>");

    //ok, hit the API
    $.get("https://api.github.com/search/repositories", 
    {"q":search}, function(res,code) {
      if(res.items && res.items.length) {
        var s = "<h2>Results</h2>";
        for(var i=0, len=res.items.length; i<len; i++) {
          var entry = res.items[i];
          s += "<p><strong>"+entry.name+"</strong><br/>";
          s += "By: " + entry.owner.login+"<br/>";
          s += "Updated: " + entry.updated_at+"<br/>";
          s += entry.description;
          s += "</p>";
        }
        $results.html(s);
      }
      $searchButton.prop("disabled",false);
    });

  });
});

保存，并运行，输入文本，点击搜索按钮，即可获得相关api，效果见下图：

8 尾声一个简单的app就开发完成，虽然还很渺小，但不是很让人兴奋吗，开发一个多平台app is so easy

imfzp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Cordova in action学习笔记二:My First Project

概述第一个项目总是最激动，我们接着笔记一的内容，深入了解下cordova项目结构1 典型Cordova项目开发流程见下图 2 Cordova项目文件框架分析一个新的项目文件结构见下，包括config,hooks,platforms,plugins,www 五部分 2.1 config 里包含项目的基本设置，比如项目i
复制链接

扫一扫