Cordova开发流程-H5 JS转Android 和Ios App

前言:cordova是使用前端技术来开发app,可以节省成本和快速发布。不需要了解原生app开发
加载web的方式,可以兼容生成Android、ios以及浏览器等各种平台的项目
cordova封装了相应的API,将html文件显示在WebView中。同时支持丰富的插件,和原生组件通信,接口并绑定到标准的设备api上.
使得开发者可以通过JS去调用原生代码,调用相机,联系人以及三方app应用。



一、开发前期环境

1.安装Jdk,配置相应环境变量 安装Java开发工具包(JDK)8 或AS里file->project Structure->Sdk Location->Gradle Setting中下载
2.下载gradle插件: https://gradle.org/releases/ (可以等编译后,相应gradle下载,加压添加bin环境变量 )
3.安装Android studio,下载指定android sdk,添加 Android SDK的tools,tools/bin和platform-tools环境变量路径
4.下载并安装node.js, https://nodejs.org/en/download/(下载网络错误,切换网络)
5.安装git客户端,在git命令行中安装cordova. ( npm install -g cordova )(可能需要配置国内镜像),查看当前cordova版本(cordova -v )



二、创建应用,运行及编译(可以cmd命令行操作)

1.创建应用
Cordova create order com.demo 复刻助手
格式:cordova create app项目名 域名标识最后com开头,app名字
2.添加app运行平台

    cd order 进入项目
$ cordova platform add browser //添加浏览器平台
$ cordova platform add android  //添加android平台
$ cordova platform add ios(在MAC中添加)
$ cordova platform add wp8
$ cordova platform add windows
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

列出当前的cordova运行平台
$ cordova platforms ls

删除当前的运行平台:
cordova platform rm android

查看是否满足个平台构建要求

$ cordova requirements
Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
Gradle: installed
Requirements check results for ios:
Apple OS X: not installed
Cordova tooling for iOS requires Apple OS X
Error: Some of requirements check failed

编译当前平台,会编译出debug.apk
cordova build android (相当于cordova prepare android cordova compile android 两条指令)
(编译错误 could not resove com.android.tools.build:gradle:3.0.1
尝试解决1.gradle/gradle.properties代理 注释(无该文件)
2.下载对应插件3.0.1对应gradle 4.1(无效,直接报unkownhost ))

3.运行app,在各平台运行(必须先add 平台)
$cordova run browser // 在浏览器中运行MyApp程序, 浏览器自动访问http://localhost:8000/
$cordova run android //在android 平台运行,连接模拟器或者安卓真机,每次修改后,都可以直接这样运行



三,添加相应的网页,如百度网站助手

1.装载一个指定网页,直接把config.xml里面的(index.html是我们项目本地www文件夹下的网址)只需要替换成服务器上的地址即可。例如改成,就可以直接打开百度网页。
(其中activity继承CordivaActivity类,然后使用了loadUrl(launchUrl))

2.为了防止 cordova跳转自带的浏览器,需要再config.xml文件中加入

3.添加图标和启动页面
a.指定图标和启动图目录,如下 www/img/,
b.在cordova5.0版本以后,添加启动页需要安装cordova-plugin-splashscreen插件。
cordova plugin add cordova-plugin-splashscreen
或cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git
c.config.xml添加图标路径,添加启动页效果

<platform name="android">
<icon density="xxxhdpi" src="www/img/logo.png">
<splash density="port-xhdpi" src="www/img/splash.png"></platform>

自动隐藏启动页面AutoHideSplashScreen(默认为:true)
<preference name="AutoHideSplashScreen" value="true" />
Android启动模式配置
  <preference name="AndroidLaunchMode" singtask/>

4.移除插件 , 添加插件
cordova plugin rm cordova-plugin-whitelist
cordova plugin add cordova-plugin-whitelist



四、签名

1.手动签名
生成密钥文件test.keystore ,别名YYY,有效天数4000天
keytool -genkey -v -keystore test.keystore -alias YYY -keyalg RSA -validity 4000
(执行命令之后会提示你输入密码,设置一些公司名称之类的,密码要记住,其他随意)
随时查看证书 keytool -list -v -keystore test.keystore
Enter keystore password: //输入密码,回车
正式签名
jarsigner -verbose -keystore E:\反编译\test.keystore -signedjar shop111.apk E:\反编译\shop-release\dist\shop-release.apk testalias
格式: jarsigner -verbose -keystore 签名 -signedjar 签名文件后的文件名 需要签名文件 证书里alias别名
输入密码

举例:当前目录生成 order-release.apk
jarsigner -verbose -keystore /d/nodejs/order/jlc_keystore -signedjar order-release.apk /d/nodejs/order/platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk 深圳嘉立创
签名打包参考:https://blog.csdn.net/ly_xiamu/article/details/126676446

2.自动签名,
然后在项目根目录新建一个build.json文件里面写入,签名的信息,也就是对应你的keystore的密码等相关信息,里面是json格式

{
    
    
  "android": {
    
    
    "release": {
    
    
      "keystore": "test_keystore(项目根目录keystore文件)",
      "alias": "别名呀",
      "storePassword": "android123456",
      "password": "android123456"
    }
  }
}


五,打包apk

1.编译出未签名的apk包
cordova build android --release
Cordova的新版本中,支持生成aab了。Debug版本默认是生成apk的,Release版本默认生成aab,但是也可以指定生成apk
cordova build android --release --prod – --packageType=apk



六,添加插件,自定义插件实现部分功能

cordova plugin add cordova-plugin-file-transfer
Cordova 提供了一个 fileTransfer 插件,通过这个插件我们很方便地实现文件的传输操作(上传、下载)。

cordova-plugin-file-opener2
cordova打开文件系统插件的使用:

com.cordova.plugins.cookiemaster 1.0.0 “CookieMaster”
Android和iOS平台上的webview不支持文档的常规使用。这个插件允许你通过一个简单的接口从你的WebView中获取和设置cookie的值。

cordova-plugin-splashscreen 5.0.3 “Splashscreen”
欢迎页面添加

cordova-plugin-GetIntentData 1.0.0 “GetIntentData-plugin”
自定义跳转activity的插件,接收其他应用跳转并解析Intent数据

phonegap-plugin-barcodescanner 8.1.0 “BarcodeScanner”
添加二维码扫描,自动动态申请权限

com.jlc.customtoast 1.0.0 “MyToast”
自定义Toast插件, native x-toast 被动态申请权限的弹框,自定义使用

cordova-plugin-android-permissions 1.1.4 “Permissions”
检查和申请权限使用
最新版本的android系统,它只能检查权限,不能动态申请权限

cordova-plugin-dialogs 2.0.2 “Notification”
alert弹窗,
普通提示框,一个按钮navigator.notification.alert(message, alertCallback, [title], [buttonName])
navigator.notification.confirm选择提示框,带输入的提示框prompt,让手机发出声音beep
https://www.jianshu.com/p/7d1e1872eb42

cordova-plugin-inappbrowser 3.2.0 “InAppBrowser”
app内置浏览器打开一个网址,可以设置加载url添加参数,监听加载停止和错误,以及加载出的方法监听
https://www.npmjs.com/package/cordova-plugin-inappbrowser

cordova-plugin-device 2.0.3 “Device”
使用全局device对象的属性获取设备信息, 简单获取设备信息
console.info打印信息
device.model //device.model返回设备的模型或产品名称。该值由设备制造商设置,并且可能在同一产品的不同版本中不同。
device.uuid //获取设备通用唯一标识uuid,例如:‘78ca1fe2c1d3b584’
device.platform //获取操作系统名称,例如:‘Android’

cordova-plugin-app-version 0.1.9 “AppVersion”
此插件用来获取开发软件的版本号

cordova-plugin-networkinterface 2.0.0 “NetworkInterface”
获取wifi ip地址

cordova-plugin-wechat 3.0.0 “Wechat” 用微信登录
接入微信登录

cordova-plugin-cache-clear 1.3.7 “Cordova Cache Clear” 暂无用清理
清除存储在使用cordova webview的android应用程序中的缓存, 要使用该插件,只需调用window.CacheClear(success,error)

cordova-plugin-network-information 2.0.2 “Network Information” 无用清理
监听网络类型变化

cordova-plugin-wkwebview-engine 1.2.2 "Cordova WKWebView Engine"暂无用清理
此插件使Cordova使用WKWebView组件,而不是默认的UIWebView组件,并且只能安装在iOS9.0SDK的系统上。
在iOS9中,苹果已经修复了iOS8中存在的问题,即不能使用file:///加载语言环境文件,必须使用本地Web服务器。但是,如果服务器上没有启用CORS,您仍然无法从file://协议使用XHR

cordova-plugin-statusbar 2.4.3 “StatusBar” 暂无用清理
实现对手机状态栏的操作。官方文档提供了更改颜色、透明度、显隐操作等 ,可能和ios有关

cordova-plugin-x-toast 2.7.2 “Toast”
本地提示浮动框,间歇性失效,会动态申请权限的弹框打断 无用清理



后文:cordova插件的使用案例 -Toast官方插件和自定义插件


创造价值,乐哉分享!

参考文档:
cordova+vue扫二维码和条形码
Cordova - barcodeScanner扫码插件的使用详解
cordova开发环境搭建详解

猜你喜欢

转载自blog.csdn.net/ly_xiamu/article/details/128567640