Yang Wa HomeArchivesTagsCategoriesGithub
cordova使用
|前端cordova移动端框架|
Word count: 1.7k|Reading time: 6 min

环境安装

Android环境

java环境

  1. 下载JDK1.8，下载，我下载其他版本的报错了，报错时提示需要1.8版本，所以建议下载JDK1.8

  2. 环境变量配置

    • 在系统变量中添加新的环境变量，变量值为JDK安装路径

    新增环境变量

    • Path中新增一项

    Path新增项

Android Studio（AS）

  1. 安装Android Studio，下载地址，安装步骤可以网上找，大差不差的，AS会为你安装最新版的SDK，所以不用单独下载SDK，并且AS的安卓虚拟机在运行cordova时可以用到

  2. 设置安卓环境变量

    • 新增ANDROID_HOME，变量值为AS下载时填写的SDK地址

      新增ANDROID_HOME

    • 编辑Path变量

      编辑Path变量

Gradle安装

  1. 下载地址

  2. 环境变量配置

    • 新增环境变量GRADLE_HOME

      新增环境变量

    • 编辑Path

      新增Path项

Node git安装

  1. 这个更不用说了，直接官网下载即可，建议版本node12.22.12(因为我用的这个成功了，18版本的失败了)

cordova安装

npm i -g cordova@6.5.0

使用命令

  1. 运行于浏览器 cordova run browser
  2. 运行于android虚拟机 cordova build android cordova emulate android --verbose (verbose为生成详细日志输出)
  3. 查看当前cordova android版本 cordova platform version android
  4. 升级android版本 cordova platform update android
  5. 卸载当前版本的android cordova platform rm android
  6. 安装指定版本的android cordova platform add android@6.2.1

cordova事件

  1. deviceready(设备就绪)
  2. pause（应用挂起，切换到后台）
  3. resume（应用回来，切换到前台）
  4. backbutton（点击回退按钮 ）
  5. menubutton（按下菜单按钮）

​ ……

cordova插件

  1. cordova-plugin-statusbar：用于设置状态栏样式

集成vue

资源目录

  1. vue ==> src（资源目录）===> dist（打包目录）
  2. cordova ===> www（资源目录） ===>平台目录（打包目录）
  3. vue集成cordova：src ===> www ===> 平台目录

分两个项目包

  1. vue的index.html中引入cordova.js

    <script src="cordova.js"></script>

  2. 修改vue默认打包位置（dist更改为www）

    • 文件排列方式如下所示：

    项目目录排列方式

    //vue.config.js中
    module.exports = defineConfig({
        transpileDependencies: true,
        lintOnSave: false,
        outputDir: '../www', //修改打包位置
        publicPath: './'
    })

  3. 在vue的index.html中引入cordova的meta标签

  • 将cordova项目->index.html中的meta标签，删除一下重复的

  1. 在vue/src/main.js)添加deviceready事件

    document.addEventListener('deviceready', () => {
        app.mount('#app')
    }, false)

  2. 运行命令

    npm run build
    cordova emulate android --verbose

一个项目包

  1. vue的index.html中引入cordova.js(同上)

  2. 修改vue默认打包名称（dist更改为www）

    //构不同于上面,这次直接build在本项目中即可
    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
        transpileDependencies: true,
        lintOnSave: false,
        outputDir: 'www',
        publicPath: './'
    })

  3. 在vue的index.html中引入cordova的meta标签(同上)

  4. 在vue/src/main.js添加deviceready事件(同上)

  5. 添加cordova的config.xml到vue项目中

    • 复制过去即可

  6. 构建出www目录

    npm run build

  7. 添加平台

    cordova platform add android@6.2.1

  8. 运行

    cordova run android

集成命令(cordova命令集成到vue中)(暂时有点问题，集成失败)

  1. 在第三步中，虽然只有一个项目bao，但是我们在使用命令的时候，需要npm和cordova之间进行切换，很麻烦，所以可以运用cordova-lib将cordova命令集成到npm中

  2. cordova-lib允许在npm中使用cordova命令 npm i cordova-lib

  3. 集成(vue.plugins.service)

问题

cordova-android版本问题

  1. 在使用过程中，在运行cordova platform add android 后执行cordova run android会报错如下所示，虽然在提示的这个目录下并没有这个templates目录，但是在安装Android Studio过程中并没有什么差错，所以一时间并不知道从哪查起，但是在网上看到了一种解决方法：

    Could not find gradle wrapper within Android SDK. Might need to update your Android SDK

    Looked here: D:/appDownload/Android/Sdk/tools/templates/gradle/wrapper

​ 原文链接

Google 通过最新的 sdk 工具更新破坏了 Cordova Android 6.1.x 和其他一些框架。

Cordova Android 6.2.1 已发布，现已兼容最新的 Android SDK。

您可以使用以下命令更新当前不兼容的 Android 平台cordova platform update android@6.2.1

或者您可以删除现有平台并添加新平台（将删除您在 Project/platforms/android/ 文件夹中所做的任何手动更改）

cordova platform rm android 
cordova platform add android@6.2.1

您必须指定版本，因为当前 CLI 默认安装 6.1.x。

最后通过安装6.2版本的cordova android解决了问题。

cordova集成vue路由问题

  1. app里没有浏览器，也就没有history对象，所以在使用路由时，需要使用hash路由，不能使用history路由

移动端热更新

  1. 移动端热更新：

    1. 通过vue的热更新实现的，可以先启动vue项目，但是对于移动端的一些配置，vue并不能使用，所以对于cordova的一些配置需要加上环境判断。

      //index.html中，之前引入的cordovajs和meta标签都需要加上判断

      <% if(process.env.NODE_ENV === "production") {%>
      <meta
      	http-equiv="Content-Security-Policy"
          content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"/>
      <meta name="format-detection" content="telephone=no" />
      <meta name="msapplication-tap-highlight" content="no" />
      <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
      <% } else{ %>
      <meta name="viewport" content="width=device-width,initial-scale=1.0" />
      <% } %>
      ......
      <% if(process.env.NODE_ENV === "production") {%>
      <script src="cordova.js"></script>
      <% } %>
      //main.js中
      if (process.env.NODE_ENV === "production") {
          document.addEventListener('deviceready', () => {
              app.mount('#app')
          }, false)
      } else app.mount('#app')

    2. 在config.xml中添加content标签，content标签主要指定app开始指向页面，将content指向vuer本地起的服务IP地址，就可以实现移动端热更新

      //默认情况下
      <content src="index.html"/>
      //新增的
      <content src="http://10.130.76.32:8080" />

    3. 所以移动端的热更新是通过vue实现的，如果本地没有起服务，那么移动端会报错连接不到。

    4. 但是由于cordova是通过vue’实现的，所以在实现热更新的情况下，cordova事件并不会触发，像 menubutton volumeupbutton等等，只要是cordova的事件，都不会触发，如果想进行事件的验证，只需要将config.xml中的<content src="http://10.130.76.32:8080" />注销并打包，重启Android模拟器设备即可。

    版本问题报错

    1. npm run build报错如下，直接执行命令npm i vue@3.2.26 即可

      报错信息

    2. 在执行npm i -g cordova 或者 cordova add platform android 时报错 ，可能是由于node版本太低，当安装指定版本的cordova和cordova-android时就ok了。

Author: Yang Wa
Link: https://blog.wxywxy.cn/2023/07/20/cordova/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
前端移动端框架cordova