zoukankan      html  css  js  c++  java
  • 基于cordova的混合app开发

    什么是混合App?

    混合App是介于h5和原生开发中的一种,既有原生的部分,也有h5的部分。这种开发模式,既能够上线各大应用市场,也能够坐到跨平台。

    技术路线

    博主这里使用的是 win10系统 + h5 + cordova。cordova封装了原设备的api,然后可以提供给js调用,也就是我们所说的h5开发。

    安装android环境

    这里博主以android为例,使用混合开发模式搭建出一个app。因此,博主先要搭建一下android开发环境。

    下载androidSdk tools

    下载地址:android sdk

    然后选择如下图所示的zip文件,将其下载到本地目录。

    下载android tools

    解压后,双击运行SDK Manager.exe

    勾选Tools

    勾选tools

    勾选android版本

    选择Android 8.1.0

    配置android sdk环境变量

    新增系统环境变量 ANDROID_SDK_HOME

    D:Program Filesandroid-sdk-windows
    

    新增path路径变量

    %ANDROID_SDK_HOME%platform-tools
    %ANDROID_SDK_HOME%	ools
    

    安装cordova

    cordova提供了一组设备相关的Api,通过这组Api,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。

    通过npm安装cordova

    npm是node.js的包管理工具。

    npm install -g cordova
    

    查看cordova版本

    cordova -version
    

    创建测试项目study

    cordova create study com.test.study
    

    查看项目目录

    项目目录

    对应目录介绍:

    • platforms:对应手机操作系统,如android,ios。
    • plugins:开发中需要用到的插件。
    • www:存放前端h5文件
    • config.xml:打包项目的配置文件

    在对应项目下面,配置config.xml

    在自带的config.xml文件里,添加engine节点,engine就是android打包的版本。配置好的config.xml如下所示,

    <?xml version='1.0' encoding='utf-8'?>
    <widget id="com.test.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
        <name>学习App</name>
        <description>
            A sample Apache Cordova application that responds to the deviceready event.
        </description>
        <author email="dev@cordova.apache.org" href="http://cordova.io">
            Apache Cordova Team
        </author>
        <content src="index.html" />
        <plugin name="cordova-plugin-whitelist" spec="1" />
        <access origin="*" />
        <allow-intent href="http://*/*" />
        <allow-intent href="https://*/*" />
        <allow-intent href="tel:*" />
        <allow-intent href="sms:*" />
        <allow-intent href="mailto:*" />
        <allow-intent href="geo:*" />
        <platform name="android">
            <allow-intent href="market:*" />
        </platform>
        <platform name="ios">
            <allow-intent href="itms:*" />
            <allow-intent href="itms-apps:*" />
        </platform>
       <engine name="android" spec="^7.1.4" />
    </widget>
    
    

    在platform下面添加android平台

    cordova platform add android
    

    命令执行结果

    添加android平台

    修改build.gradle

    cordova打包时用到了一些maven依赖,我们将maven镜像源修改成了阿里云镜像。
    在当前项目中有俩个build.gradle文件。

    build.gradle1

    build.gradle2

    将build.gradle里面的repositories里面的地址 替换成阿里云镜像源。

     maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'}
    

    替换后的文件内容

    替换镜像源

    生成debug-apk

    cordova build android
    

    命令执行结果,apk路径在platformsandroidappuildoutputsapkdebug下面。debug-apk已经携带了签名。
    debug-apk

    生成release-unsigned.apk

    cordova build --release android
    

    命令执行结果,apk路径在platformsandroidappuildoutputsapk elease下面。release-unsigned.apk没有签名,需要自己手动签名。

    release-unsigned.apk

    签名apk

    在release-unsigned.apk目录下面,执行下面的脚本,即可生成签名文件。

    生成签名密钥

    keytool -genkeypair -alias ourwayerp.keystore -keyalg RSA -validity 4000 -keystore ourwayerp.keystore
    

    参数说明:

    • genkeypair 生成密钥对
    • alias 取别名
    • keyalg 密钥算法
    • validity 有效期
    • keystore key的存储路径

    执行完这个命令之后,可以看到当前目录下已经生成了一个ourwayerp.keystore文件。

    签名文件

    jarsigner -verbose -keystore ourwayerp.keystore -signedjar study.apk -storepass 123456 -digestalg SHA1 -sigalg MD5withRSA release-unsigned.apk ourwayerp.keystore
    

    参数说明:

    verbose 输出签名过程的详细信息
    keystore 密钥的库位置
    signedjar 签名后的输出文件名
    storepass 密钥口令
    digestalg 摘要算法的名称
    sigalg 签名算法

    查看签名后的apk

    签名后的apk

    安装apk

    将签名完之后的apk,发送给android手机,然后点击安装即可查看apk是否打包成功。

    app安装页面

    安装界面

    app首页

    首页

    博主微信公众号

  • 相关阅读:
    PHPExcel常用方法总结
    ThinkPHP多语言在分组下的用法!
    derby 的字符集
    最小化msn,skype到右下角(Win 7)
    用javascript控制 youtube动画,直接打开html会失败
    maven 的本地仓库
    excel读取csv的字符集问题
    在dos控制台显示utf8字符
    关于在php和mysql中日期型date,datetime,timestamp的使用
    用 java jar执行时的classpath的问题
  • 原文地址:https://www.cnblogs.com/chenhaoblog/p/13423654.html
Copyright © 2011-2022 走看看