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

最新推荐文章于 2021-05-06 12:04:23 发布
最新推荐文章于 2021-05-06 12:04:23 发布
阅读量1.8k 收藏 5
点赞数 2
分类专栏： 混合开发 文章标签： cordova app vue vue-cli 混合开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41535500/article/details/82219179
版权

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

环境搭建

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

前提须知

  • 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 cordova@6.0.0 --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 android@6.0 --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，如果已经选了的话，关了再重新开启就可以

目珍
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue-cordova:Cordova模板包括用于创建移动应用程序的Vue-cli和laravel-mix
05-11
progas_cordova 克隆仓库或下载存储库 运行npm install 用于编译资产并运行android npm run on-android
vue-webpack-template：VueJS webpack官方模板的更多选项：TypeScript，Library，Class-Style组件..
02-03
Vue-Webpack-样板 功能齐全的Webpack设置，包括热重载，保存时不掉毛，单元测试和CSS提取。 该模板与Vue 2.0兼容。 这是官方webpack模板的分支，带来了更多选项，例如TypeScript，Library，Class-Style组件... 文献资料 ：回答了此模板特有的常见问题，并详细介绍了每个部分 ：有关如何使用Vue的常规信息，而不是特定于此模板 用法 这是的项目模板。 建议使用npm 3+以获得更有效的依赖关系树。 $ npm install -g vue-cli $ vue init Toilal/vue-webpack-template my-project $ cd my-project $ npm install $ npm run dev 这将使用master分支搭建项目。 如果您希望使用最新版本的webpack模板，请执行以下操作： $ vue init webpack#develop my-project :warning_selector: 开发分支不被认为是稳定的，可能包含错误或根本没有构建，因此使用后果自负。 默认情
三个VUE学习中的小示例
03-31
用VUE写的三个小例子，猜数，找地雷和在百度地图上显示当前位置
vue-cli-plugin-cordova:Vue Cli 3 Cordova插件
04-22
vue-cli-plugin-cordova 适用于Apache Cordova的插件。 将Cordova集成到Vue Cli App中 如何 创建Vue应用 $ npm install -g @vue/cli $ vue create my-app $ cd my-app $ npm install -g cordova # If cordova is not already installed 将插件添加到您的vue应用。 $ vue add cordova 用法 准备 $ npm run cordova-prepare # prepare for build (you can run this command, when you checkouted your project from GIT, it's like npm install) 安卓 $ npm run cor
Vue搭配cordova创建移动端项目遇到的路径问题
AboyL的博客
06-07 1822
使用Vue的教授叫vue-cil创建项目以后，如果我们想进行打包成一个hybrid项目应该怎么做呢？这个时候我们需要全局安装cordova，然后进行打包。但是这里我们要注意一些路径问题。 首先我们要明白的是，cordova打包打包的是那些内容？cordova打包的是www文件夹下的内容，也就是说，我们的内容应该都在www文件夹下面，而我们的源代码要放到src下面去，vue-cil的index.h...
vue+cordova开发混合app
caimaomaocai的博客
12-31 270
1、引用vue-cli-plugin-cordova 代码仓库https://github.com/m0dch3n/vue-cli-plugin-cordova 2、命令步骤 $ npm install -g @vue/cli //如果已经安装vue-cli此步骤可省 $ vue create my-app $ cd my-app $ npm install -g cordova /...
vue-cli 3 使用和Cordova集成记录
waitrebirth
08-11 4948
1. 安装 安装过程很简单 npm install -g @vue/cli # OR yarn global add @vue/cli 安装后使用vue --version 查看是否安装成功 2. 创建项目 vue create demo # OR vue ui #使用ui界面进行创建 选项 默认 手动选择 我们选择手动选择功能，具体选择如下 ? Please...
构建vue-cli与cordova的开发环境
猿子
12-25 1766
0、安装nodejs 一、安装vue-cli 1、使用npm全局安装vue-cli（前提是你已经安装了nodejs，否则你连npm都用不了），在cmd中输入一下命令 npm install --global vue-cli 2、创建自己的工作空间，在cmd切换至刚刚创建好的工作空间，如果已经有工作空间，直接切换到工作空间即可。使用命令创建一个叫做vuetest的项目 vue ...
vue-cli3 + cordova搭建app
路遇惊喜
03-25 3798
概要 1、首先先到各个开放平台申请开发者账号 先申请，审核通过还需要一定时间 微信开放平台 https://open.weixin.qq.com/ 腾讯开放平台 http://open.qq.com/ 新浪微博开放平台 http://open.weibo.com/ 2、添加对应的cordova插件 QQ：https://github.com/iVanPan/Cordova_QQ.git 微...
vue+cordova构建跨平台应用集成并使用Cordova plugin
weixin_34138521的博客
11-22 1652
安装 //安装 vue-cil npm install --global vue-cli //安装cordova npm i cordova -g cordova 新建项目 //新建cordova 项目cordova create vue-cordova//进入目录cd vue-cordova//vue-cli新建vue项目vue init webpack vueprojectname/...
ember-cordova：EmberCordovaCrosswalk应用程序的CLI
02-04
恩伯·科尔多瓦（Ember Cordova）科伯我们已经将ember-cordova迁移到corber项目，该项目增加了对Vue / React / Webpack应用程序的支持。 迁移后，Ember用户将看不到任何功能损失。 大多数新功能将出现在corber中，...
quasar-manage:基于 Quasar-cli 的中后台前端解决方案
04-27
tagView 快捷导航、面包屑导航等 SPA 应用常用功能简单的代码逻辑，多种自定义组件，高度可定制性（只有 1600 行代码）完全开源及免费当然如果你想使用基于VUE-CLI版本的：使用这个项目前您需要了解如下技术栈： | |...
cordova vue插件开发_通过cordova将vue项目打包为webapp的方法
weixin_32021519的博客
01-12 127
准备工作：需要之前配置好vue-cli脚架构，安装好cordova环境。下面开始对vue.js项目进行打包，打包环境为Android。可以看下我的github：https://github.com/padipata ，里面有我自己写的vue项目，喜欢的给个关注呗。1.添加cordova项目$ cordova create myApp1 org.apache.cordova.myApp myApp2...
Vue调用Cordova的Navtive功能：获取地理位置，手机振动，调取手机图片，扫描二维码
weixin_43765499的博客
04-09 3137
一、安装Cordova及Vue-cli 安装Cordova及相关依赖的具体教程在我上一篇文章里 安装Cordova： npm i cordova -g 安装Vue-cli： npm i -g vue-cli 二、使用cordova初始化项目并安装android平台 使用命令行进入开发目录后执行: cordova create vueapp 此命令会生成vueapp目录，vueapp即是完整的...
使用 Cordova 跨平台打包 Vue
nonlinearthink的博客
10-24 329
想要更好的阅读体验，可以转我的个人博客。 Cordova 安装 使用 npm 安装 cordova 命令行: npm install -g cordova 创建 Vue 项目: vue create cordova-test 找了一圈 Vue 的 Cordova 插件，个人觉得最好用的是这个: vue-cli-plugin-cordova-simple。这位老哥写得这么好，都没人帮他宣传。 vue add vue-cli-plugin-cordova-simple 新建 vue.config.js 文
vue-cli4 + cordova扫描二维码
zzy79057384的博客
05-06 1178
最近要实现一个扫码的功能所以要用到cordova的扫描插件，由于不熟捣腾了很久现在记录一下。顺便做个分享。 一. 安装cordova npm i cordova -g 二. 使用cordova初始化项目 cordova create cordovademo 然后进入 cordovademo 项目目录执行 cordova platform add android 这时如果执行就可以打包编译成一个apk文件在手机上安装了 cordova build android 接下来我们要添加一个vue的项目 三.
vue-cli-plugin-element的使用
BADAO_LIUMANG_QIZHI的博客
10-25 6994
安装 首先你得要先全局安装@vue/cli npm install -g @vue/cli 创建项目并安装Element插件 在要创建项目的目录打开命令行，输入： vue create my-app 点击回车会使用默认的设置 然后等待创建完成 创建完成后如下 然后输入 cd my-app 进入项目目录，再输入 vue add element 来安装el...
Cordova打包Vue项目（Android）
辞仙
11-13 802
前面自己学习搭建了一个简单的Vue项目 由于考虑到公司需要翻新的项目是Android，所以学习下用Cordova打包 前置条件 Android环境以及Java环境 Android环境 由于机器上之前安装过Android Studio，所以只需要配置下环境变量就可以了 我的电脑 > 属性 > 高级系统设置 > 环境变量 在系统变量里添加ANDROID_HOME，值为And...
计算机毕业设计-校园教务处管理系统.zip
最新发布
04-23
计算机毕业设计中的校园教务处管理系统是一个旨在提高校园教务管理效率和质量的综合性信息平台。该系统采用SSM（Spring、SpringMVC、MyBatis）技术栈进行构建，利用Spring框架进行业务逻辑处理和依赖注入，通过SpringMVC实现模型-视图-控制器的设计模式，以及使用MyBatis作为ORM工具进行数据库持久化操作。系统功能涵盖了学生信息管理、课程安排、成绩录入与查询、教室资源分配、考试管理、教师工作量统计等关键模块，通过提供一个用户友好的界面和强大的后台管理功能，校园教务处管理系统不仅优化了教务工作流程，还提升了学生和教师的互动体验，是计算机专业学生展示其系统分析、设计和开发能力的理想项目。
cordova+vue webrtc
02-03
Cordova是一个用于开发跨平台移动应用的开源框架，它允许开发者使用HTML、CSS和JavaScript来构建移动应用程序。Vue是一个流行的JavaScript框架，用于构建用户界面。WebRTC是一种实时通信技术，它允许浏览器之间直接进行音频、视频和数据传输。 结合Cordova和Vue，可以使用WebRTC来实现在移动应用中进行实时音视频通信的功能。具体步骤如下： 1. 创建Cordova项目：使用Cordova命令行工具创建一个新的Cordova项目。 2. 集成Vue：将Vue框架集成到Cordova项目中，可以使用Vue CLI或手动引入Vue库。 3. 安装WebRTC插件：在Cordova项目中安装适用于WebRTC的插件，例如cordova-plugin-iosrtc或cordova-plugin-webrtc。 4. 实现音视频通信功能：使用Vue和WebRTC的API来实现音视频通信功能，例如创建本地媒体流、建立连接、发送和接收音视频数据等。 5. 构建和运行应用：使用Cordova命令行工具构建和运行应用程序，可以在模拟器或真机上进行测试。 需要注意的是，WebRTC在不同平台和浏览器上的支持程度可能有所不同，因此在开发过程中需要考虑兼容性问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值