cordova+vue项目整合

Posted 2022-11-29 svygh123

1.cordova项目新建 : learn-cordova

安装: $npm install -g cordova
版本: $cordova -v
创建: $cordova create learn-cordova
环境: $cordova platform add browser --save  还可选平台:android/ios
      $cordova platform add android
      $cordova platform add android@6.0.0   // 版本为本机已装的sdk android 版本
查看: $cordova platform
运行: $cordova run browser
检验: $cordova requirements

2.添加android平台,检查是否安装android sdk

$cordova platform add android

$cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: not installed
Failed to find 'ANDROID_SDK_ROOT' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK
 directory.
Android target: not installed
Command failed with ENOENT: android list target
spawn android ENOENT
'android' 

Gradle: not installed
Could not find gradle wrapper within Android SDK. Could not find Android SDK directory.
Might need to install Android SDK or set up 'ANDROID_SDK_ROOT' env variable.

Requirements check results for browser:
Some of requirements check failed

下载android-sdk_r24.3.4-windows.zip

解压配置环境变量

ANDROID_SDK_ROOT=E:\\android-sdk-windows
ANDROID_HOME=E:\\android-sdk-windows

再次运行

$cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: not installed
No android targets (SDKs) installed!
Gradle: not installed
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

Requirements check results for browser:
Some of requirements check failed

下载gradle-6.8.2-bin.zip
解压配置环境变量

GRADLE_HOME=E:\\src\\gradle-6.8.2
Path加;%GRADLE_HOME%\\bin

再次运行

$cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: not installed
No android targets (SDKs) installed!
Gradle: not installed
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

Requirements check results for browser:
Some of requirements check failed

由于platforms\\android\\build.gradle

allprojects 
    repositories 
        google()
        jcenter()
    

    //This replaces project.properties w.r.t. build settings
    project.ext 
      defaultBuildToolsVersion="29.0.2" //String
      defaultMinSdkVersion=22 //Integer - Minimum requirement is Android 5.1
      defaultTargetSdkVersion=29 //Integer - We ALWAYS target the latest by default
      defaultCompileSdkVersion=29 //Integer - We ALWAYS compile with the latest by default
    

需要至少Android 5.1

双击“SDK Manager.exe”，启动SDK Manager
选择: Android SDK Platform-tools
      Android SDK Build-tools

      Android 10(API 29)(可以不选Sources For Android SDK)
      Extra
      Android Support Repository
      Google USB Driver

其他可根据情况选择,安装后执行

$cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed Google Inc.:Google APIs:15,android-29,android-15
Gradle: installed E:\\src\\gradle-6.8.2\\bin\\gradle.BAT

Requirements check results for browser:

3.vue项目新建
安装

$npm install -g vue
$npm install -g vue-cli
$npm list vue 查看版本

新建项目

$cd learn-cordova
$mkdir vue
$cd vue
$vue init webpack vue

? Project name vue
? Project description A Vue.js project
? Author ndh
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow k
? Should we run `npm install` for you after the project has been created? (recommended) yarn

   vue-cli · Generated "vue".


# Installing project dependencies ...
# ========================

yarn install v1.22.5
info No lockfile found.
[1/5] Validating package.json...
[2/5] Resolving packages...
warning autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 c
onfig used in other tools.
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
⠈ has-flag@^3.0.0

4.修改文件
修改Vue项目config/index.js文件.

build: 
    // index: path.resolve(__dirname, '../dist/index.html'),
    改为
    index: path.resolve(__dirname, '../../www/index.html'),

    // assetsRoot: path.resolve(__dirname, '../dist'),
    改为
    assetsRoot: path.resolve(__dirname, '../../www'),
    //assetsSubDirectory: 'static',
    改为
    assetsSubDirectory: '',
    // assetsPublicPath: '/',
    改为
    assetsPublicPath: '',
    ......

index.html要引用cordova.js

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

在vue项目根目录执行命令

$npm run build

即可编译vue项目自动到cordova主目录下的www文件夹中。

$npm run build

> vue@1.0.0 build C:\\Users\\01\\Desktop\\demo\\learn-cordova\\vue
> node build/build.js

Hash: 31f1d73baae98406e71e
Version: webpack 3.12.0
Time: 9075ms
                                           Asset       Size  Chunks             Chunk Names
               js/vendor.00d360f7b37e02379b40.js     124 kB       0  [emitted]  vendor
                  js/app.b22ce679862c47a75225.js    11.6 kB       1  [emitted]  app
             js/manifest.5abe310ef2fafcf81b83.js  856 bytes       2  [emitted]  manifest
    css/app.30790115300ab27614ce176899523b62.css  432 bytes       1  [emitted]  app
css/app.30790115300ab27614ce176899523b62.css.map  797 bytes          [emitted]
           js/vendor.00d360f7b37e02379b40.js.map     624 kB       0  [emitted]  vendor
              js/app.b22ce679862c47a75225.js.map    22.2 kB       1  [emitted]  app
         js/manifest.5abe310ef2fafcf81b83.js.map    4.96 kB       2  [emitted]  manifest
                                      index.html  473 bytes          [emitted]

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

5.浏览器查看

$cordova run browser

6.打包androida.打调试包

$cordova build android

Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=E:\\android-sdk-windows (recommended setting)
ANDROID_HOME=E:\\android-sdk-windows (DEPRECATED)
Using Android SDK: E:\\android-sdk-windows
Subproject Path: CordovaLib
Subproject Path: app

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.8.2/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 4m 36s
40 actionable tasks: 40 executed
Built the following apk(s):
        C:\\Users\\01\\Desktop\\demo\\learn-cordova\\platforms\\android\\app\\build\\outputs\\apk\\debug\\app-debug.apk

b.打正式包

$cordova build android --release
​
BUILD SUCCESSFUL in 3m 44s
43 actionable tasks: 43 executed
Built the following apk(s):
    C:\\Users\\01\\Desktop\\demo\\learn-cordova\\platforms\\android\\app\\build\\outputs\\apk\\release\\app-release-unsigned.apk

c.生成正式包的签名

keytool -genkey -v -keystore release.keystore -alias learn-cordova -keyalg RSA -keysize 512 -validity 36500

输入密钥库口令:
再次输入新口令:
您的名字与姓氏是什么?
  [Unknown]:
您的组织单位名称是什么?
  [Unknown]:
您的组织名称是什么?
  [Unknown]:
您所在的城市或区域名称是什么?
  [Unknown]:
您所在的省/市/自治区名称是什么?
  [Unknown]:
该单位的双字母国家/地区代码是什么?
  [Unknown]:
CN=Unknown, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=Unknown是否正确?
  [否]:  y

正在为以下对象生成 512 位RSA密钥对和自签名证书 (SHA256withRSA) (有效期为 36,500 天):
         CN=Unknown, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=Unknown
输入 <learn-cordova> 的密钥口令
        (如果和密钥库口令相同, 按回车):
[正在存储release.keystore]

d.对app-release-unsigned.apk进行签名

把apk和签名文件放到当前目录
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore release.keystore app-release-unsigned.apk learn-cordova

输入密钥库的密码短语: 

e.验证apk是否前面

jarsigner -verify app-release-unsigned.apk

由于该 jar 是使用目前已禁用的弱算法签名的, 因此该 jar 将被视为未签名。

有关详细信息, 请使用 -verbose 选项重新运行 jarsigner。

f.重新签名

keytool -genkey -v -keystore release.keystore -alias learn-cordova -keyalg RSA -keysize 1024 -validity 36500

g.重新验证签名

jarsigner -verify app-release-unsigned.apk

jar 已验证。

警告:
此 jar 包含证书链未验证的条目。
此 jar 包含的签名没有时间戳。如果没有时间戳, 则在签名者证书的到期日期 (2121-01-17) 或以后的任何撤销
日期之后, 用户可能无法验证此 jar。

有关详细信息, 请使用 -verbose 和 -certs 选项重新运行。

本篇就到这,谢谢阅读

获取最新资讯,欢迎关注公众号: 软件开发与技术设计(SoftwareDesigner)