• Android H5混合开发(1):构建Cordova 项目


    Cordova是什么

    Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。


    以移动平台为例,安卓、IOS平台设备的常用功能,被Apache封装成一个个插件,如摄像头、传感器、网络、数据等。H5端通过调用插件,即可使用设备的这些功能。而项目具体的业务功能,也可封装成自定义的插件,供H5端调用,如:App端分享功能、支付功能、扫码、定位、自定义键盘等。

    Cordova提供了完整的机制,使得H5、安卓、IOS等平台混合开发不再复杂。

    Cordova的项目可包含多个平台,各平台操作自己的代码即可,与H5端通过插件通信:
       www:H5的工作目录
       /platforms/android/:安卓项目的工作目录
       /platforms/ios/:IOS项目的工作目录
       ....
    

    更多信息,请参考官网:
    https://cordova.apache.org/docs/en/latest/

    Cordova环境

    1.平台环境

    用Cordova构建和运行App,需要安装每个你需要平台的SDK,以安卓为例:

    1.1 Java开发工具包(JDK)

    安装[Java Development Kit (JDK) 7]或者最新的版本
    

    1.2 Android SDK

    安装[Android Stand-alone SDK]或者[Android Studio]
    

    1.3 设置环境变量 JAVA_HOME 和 ANDROID_HOME
    为了使功能正常使用Cordova的CLI工具,需要设置一些环境变量。
    以Mac平台为例:

    1.3.1 打开终端Terminal
    1.3.2 输入创建命令(如果不存在):touch .bash_profile
    1.3.3 打开文件命令:open .bash_profile
    

    打开bash_profile文件,配置环境变量.png
    打开.bash_profile,配置环境变量(根据自己的目录,修改即可),如下图:
    配置环境变量.png

    2.Cordova环境

    安装cordova命令行工具:
    2.1 下载和安装Node.js (地址:https://nodejs.org/en/download/)。
    安装完成后你可以在命令行中使用node 和 npm 。

    node.js是javascript的一种运行环境,是一个服务器端的javascript的解释器。
    npm其实是Node.js的包管理工具(package manager)。
    nodejs中包含npm,安装完成nodejs,npm也就安装好了。
    
    通过命令node --version  可查看nodejs版本;
    通过命令npm --version  可查看npm版本;
    

    2.2 安装cordova 模块使用Nodejs的npm工具。
    cordova模块会被npm工具自动下载。

    2.2.1 打开终端
    
    2.2.2 执行命令安装cordova:
    sudo npm install -g cordova
    
    2.2.3 执行命令安装插件管理器:
    sudo npm install -g plugman
    
    注释:
    sudo OS X和Linux上的命令,可以被安装在权限受限的目录中(windows平台上去掉sudo即可)
    -g 标志是告诉 npm 我们全局安装 cordova;
    为避免安装时出现权限相关问题,也可先启用超级用户,命令:sudo -s ,这样就可直接通过 npm install -g cordova进行安装。
    

    2.3 cordova环境验证
    打开终端,输入以下命令,检查cordova环境版本,如下图:
    cordova环境版本.png

    更多环境配置信息,请参考官网:
    https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
    https://cordova.apache.org/docs/en/latest/guide/cli/index.html

    plugman工具用于管理插件,如查看插件列表、新增插件、删除插件、添加到指定平台等。
    
    plugman create --name ....
    cordova plugin remove....
    cordova plugin list
    plugman platform add --platform_name android
    

    创建Cordova项目

    接下来,我们使用Cordova开始搭建一个Cordova项目

    1. 新建准备存放Cordova项目的目录,我的本地目录名:TestCordova
    2. 打开终端,进入TestCordova目录
    3. 输入创建项目的命令:
    cordova create myapp com.qxc.app MyApp
    
    -- myapp 目录名称
    -- com.qxc.app 包名/工程id
    -- MyApp 项目名称
    

    项目创建成功,如下图:
    image.png
    4. 添加Android平台
    通过上图,我们可以看到平台目录中(plantforms)是空的,因为我们还没有添加任何平台。
    输入进入项目目录命令:

    cd myapp
    

    输入添加android平台命令:

    cordova platform add android --save
    
    -- ios平台类似:cordova platform add ios --save
    

    添加Android平台命令.png
    添加Android平台成功后,项目目录如下图:
    项目目录.png

    至此,项目创建完成。
    安卓端开发,使用/platforms/android目录;
    IOS端开发,使用/plantforms/ios目录;(当前示例demo没有添加)
    H5端开发,使用www目录;

    具体安卓与H5端如何通信,我们后续再介绍。

    测试Android项目

    1. 启动AndroidStudio,打开项目/platforms/android。
    2. 根据本地Gradle版本(我的是3.3和3.5),修改项目的Gradle。
      打开项目的/gradle/wrapper/gradle-wrapper.properties文件,修改gradle版本:
      修改gradle版本.png
    3. 编译项目(如果编译有问题,一般是Gradle版本的问题,请根据本地gradle进行调整)
    4. 运行到手机
      运行效果.jpg

    Android H5混合开发(1):构建Cordova 项目
    https://www.cnblogs.com/qixingchao/p/11654454.html

    Android H5混合开发(2):自定义Cordova插件
    https://www.cnblogs.com/qixingchao/p/11652418.html

    Android H5混合开发(3):原生Android项目里嵌入Cordova
    https://www.cnblogs.com/qixingchao/p/11652424.html

    Android H5混合开发(4):构建Cordova Jar包
    https://www.cnblogs.com/qixingchao/p/11652431.html

    Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova
    https://www.cnblogs.com/qixingchao/p/11652438.html

  • 相关阅读:
    [包计划] date-fns
    [包计划] create-react-app
    [包计划] js-cookie
    [包计划] cheerio
    [包计划] 30-seconds-of-code
    new
    [源计划] array-first
    [源计划] is-sorted
    [源计划] array-flatten
    images
  • 原文地址:https://www.cnblogs.com/qixingchao/p/11654454.html
Copyright © 2020-2023  润新知