cordova 和vue-cli 的结合，系列操作

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue-cli-的结合系列操作">cordova 和vue-cli 的结合，系列操作

  • cordova 和vue-cli 的结合，一系列

    • 环境搭建

    • 前提须知

    • 安装cordova

      • 创建项目

      • 初始化项目环境的文件夹

      • 添加平台

      • 查看支持的平台

      • 删除平台

      • 添加插件

      • 检查下平台需求是否满足:

      • 在模拟器/真机上运行

      • 打包bugger版本apk

      • 打包release版apk–无sign

      • APK签名

      • 项目根目录 添加 Build.json文件，打包指令

      • 生成带签名的apk

    • vue项目

      • 安装vue-cli脚手架

      • 新建项目

      • 进入vue项目

      • 安装依赖

      • 调试

      • 修改vue项目 根目录的index.html，添加cordova依赖

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

      • 更改vue下的package.json，添加快捷键

      • 打包

    • 连接真机调试

      • 移动端

      • pc端

环境搭建

参考地址：
http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html#requirements-and-support

  • 安装jdk

  • 安装android sdk（Android Stand-alone SDK）

    下载地址： http://developer.android.com/sdk/installing/index.html?pkg=tools

  • 环境变量设置

前提须知

    AVD Manager：android是模拟器

    SDK Manager：android软件开发工具管理器

    Cd .. 返回上一级

    电脑已经安装node和npm：

node安装：直接进入官网https://nodejs.org/zh-cn/，下载最新版本安装。

输入 node -v 和 npm -v 查看版本。

安装cordova

全局安装Cordova CLI，最新版本，cordova -v 查看版本:
cnpm install -g cordova

cnpm install -g [email protected] --save

-g 是安装全局 –save 只当前文件夹内

创建项目

cordova create myappa com.example.cordovaDemo cordovaDemo

  • myappa是目录名称（工程的文件夹名称，不要中文）

  • com.example.cordovaDemo 是包名

  • cordovaDemo 是app的名称（在config.xml中查看）

初始化项目环境的文件夹

  • config.xml -包含应用相关信息，配置信息，使用到的插件以及面向的平台。

  • platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库 。

  • plugins – 包含应用所需插件的 Cordova 库，使得应用能够访问例如照相机和电池状态相关的事项。

  • www – 包含应用源代码，例如 HTML, JavaScript 和 CSS 文件

  • hooks – 包含为个性化应用编译系统所需的脚本

  • node_modules – npm的依赖文件 |

添加平台：

cordova platform add browser --save

cordova platform add android --save

- 生成Android平台的cordova库，这时platforms文件夹中会生成一个android文件夹

cordova platform add [email protected] --save

- 添加对Android平台支持

- –save 是安装在本地， -g 是安装全局

- @6.0 指定Android版本 这里最好指定和Android Studio对应的版本。规避版本不匹配的问题

查看支持的平台

cordova platform ls

删除平台

cordova platforms remove android

添加插件：

cordova plugin add cordova-plugin-screen

cordova plugin add cordova-plugin-camera

遇到的bug：

如果我们用的是as自带的sdk下载工具下载的adk，这一步会报找不到gradle wrapper,用sdk下载工具自行下载或者从以前es的sdk中拷贝指定文件过来就行

检查下平台需求是否满足:

cordova requirements android

在模拟器/真机上运行

cordova run android

cordova run browser

打包bugger版本apk

cordova build android

生成的包文件地址： …/cordovaApp/platforms/android/app/build/outputs/apk/debug/app-debug.apk

打包release版apk–无sign

cordova build android --release

APK签名

keytool -genkey -v -keystore test.keystore -alias test -keyalg RSA -keysize 2048

-validity 10000

-alias test 表示证书的别名是mytest,不写这一项的话证书名字默认是mykey；

-keyalg RSA 表示采用的RSA算法；

-validity 20000表示证书的有效期是20000天。

根据指令输入**库口令，是不可见的。依次输入下面的问题。最后到【否】那里时输入y

再输入**口令（可以与**库口令相同），如果相同，直接回车，记住这两个口令，后面签名会使用到。

这时便会生成一个文件test.keystore，就是我们需要的签名文件。

项目根目录 添加 Build.json文件，打包指令

{

"android": {

"release": {

"keystore": "test.keystore",

"alias": "test",

"storePassword": "123456",

"password": "123456"

}

}

生成带签名的apk

cordova build android --release

vue项目

安装vue-cli脚手架

npm install -g vue

npm install -g vue-cli

新建项目

vue init webpack demo1

进入vue项目

cd demo1

安装依赖

npm install

调试

npm run dev

修改vue项目 根目录的index.html，添加cordova依赖

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

更改vue下的package.json，添加快捷键

打包

npm run build

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

连接真机调试

移动端

  • 安卓手机进入开发者模式

    连接方式必须是媒体设备（MTP）模式

  • 在开发者选项中>>选择调试应用

  • 打开要调试的app（debug）

pc端

  • 谷歌打开chrome://inspect/#devices ps：可通过豌豆荚安装驱动

调试过程遇到的bug

解决方案：

没有打开调试模式。

打开设置，去到开发者选择，选择调试模式就ok，如果已经选了的话，关了再重新开启就可以

以上是 cordova 和vue-cli 的结合，系列操作 的全部内容， 来源链接： utcz.com/z/377890.html

回到顶部