react开发app,使用cordova从安装到打包

419 阅读3分钟

一、安装Android Studio,下载sdk

1、打开软件,找到SDK Manager选项,打开后选择SDK Tools,选择适合的SDK版本下载

2、配置环境变量:

系统变量 → ANDROID_HOME, 变量值填写sdk安装的目录

image.png

系统变量 → Path ,变量值填写 %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

二、安装JDK

1、点击下载JDK
2、环境配置可参考jingyan.baidu.com/article/6da…
两次 安装提示 。第一次是安装 jdk ,第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。
①、系统变量→新建 JAVA_HOME=jdk的安装目录。
②、系统变量→Path 变量→编辑
在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
③、系统变量→新建 CLASSPATH 变量
变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)

检测版本,cmd输入: Java -version

三、安装gradle

1、选择合适的版本 :services.gradle.org/distributio…

2、配置环境变量

系统变量→ Path,变量值追加gradle安装目录,例如:D:\Program Files\Gradle\gradle-4.10.2\bin

检测版本,cmd输入: gradle -v

四、创建cordova项目

Cordova本质上就是对webview的封装,核心点就是提供了丰富的插件可以让H5跟Native进行通信,很方便的实现两者之间的交互。

  1. 安装nodejs,先要有npm的环境
  2. 安装Cordova: npm install -g cordova
  3. 创建项目cordova create <path>,具体命令cordova create 目录名包名项目名。
  4. 示例cordova create helloworld com.xxx.cordovademo helloworld此时,一个Cordova项目就创建好了
  5. 添加平台,注意此时要切到刚到创建好的项目的根目录里,可以自己指定版本,目前最新的就是11.0.0。 cordova platform add android@^11.0.0

image.png

五、目录说明:

1、helloworld\platforms\android实际上是一个Android项目可以在Android Studio中运行

2、helloworld\www目录存放的是前端项目(或者打包后的dist文件)

六、在前端项目中使用cordova插件(以umi项目为例)

cordova官网中提供了很多插件

1、在cordava项目helloworld下安装cordava插件运行如下命令:cordova plugin add <插件>

2、在前端项目的入口文件中(document.ejs)引入cordava.js,代码如下:

  <body>
    <div id='root'></div>
    <script type="text/javascript">
      // app打包后,使用了cordova原生插件,需要引入cordova.js
      if(navigator.userAgent.includes('Android')) {
        const bodyDom = document.getElementsByTagName('body')[0];
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'cordova.js';
        bodyDom.appendChild(script);
      }
    </script>
  </body>

在其他文件中使用示例:

cordova.plugins.PrintlcPlugin.(打印插件)

cordova.plugins.barcodeScanner.scan(success, error)(扫描头\摄像头扫描插件)

cordova.scanlaser.startScan({ scanLaserMode: 8 }, success, error)(激光扫码插件)

/**
 * 扫描二维码
 * @param {function} onSuccess 成功回调方法
 * @param {function} onError 失败回调方法
 * @returns 
 */
export const onCordovaScanlaser = (onSuccess, onError) => {
  console.log('点击了扫码');
  try {
    // 成功回调
    const success = (result) => {
      if (result && onSuccess) onSuccess(result);
    };
    // scanlaser失败回调
    const error = (scanlaserror) => {
      cordova.plugins.barcodeScanner.scan(
        ({ text }) => {
          success(text);
        },
        (err) => {
          if (onError) onError(err);
        }
      );
    };
    cordova.scanlaser.startScan({ scanLaserMode: 8 }, success, error);
  } catch (err) {}
};

七、系统项目打包配置,可定义打包的dist文件复制到www文件夹中

例如:"android": "cross-env NO_PROXY=true contextPath=/ umi build && node after.build.js && xcopy .\\dist\\*.* /e ..\\helloworld\\www\\",

八、打包APK文件

1、系统项目打包 npm run android, 会把dist文件打包到helloworld\www目录中(即上述配置中)

2、Android Studio运行android(即platforms\android),使用虚拟机或者真机调试

3、cordova项目打包cordova build android

4、打包成功后的apk文件,在项目根目录的\platforms\android\app\build\outputs\apk\debug文件夹下的app-debug.apk