cordova打包Vue项目 - 两种打包方式

最新推荐文章于 2024-07-18 08:47:15 发布
最新推荐文章于 2024-07-18 08:47:15 发布
阅读量461 收藏
点赞数
分类专栏： APP 文章标签： 前端 cordova android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IS_huang/article/details/105579651
版权

本地启动cordova 项目

本地创建cordova项目

将项目代码通过 npm build 打包项目代码 生成dist 文件

将dist文件下 css、js 等文件复制到cordova项目 www 文件下面

通过 cordova build android 打包一个安卓的apk 文件

安装安卓虚拟机

手动将apk 文件拖入 虚拟机中

打开 hello cordova软件

项目成功启动

远程所需要准备的。

node 搭建本地的一个服务 server ， 模拟服务。

server下的public文件夹内 存放需要运行得apk 文件

通过 npm start 启动服务

重新打开控制台，可通过ip config指令 找到本地IP

通过cordova项目本地打包的apk文件
浏览器apk的下载地址: ip + 端口号 + apk名。
eg: 100.200.149.193：3000/app-debug.apk

www/js/index.js 文件
onDeviceReady: function(){} 这是项目运行的生命周期
方法1 ：window.location.href = ‘http://10.200.149.193:8080/’ 指向本地项目启动的ip

方法2：在config.xml 内配置

注：

以上两种方法启动项目的配置 将
改成
改变路由的指向， 当路由的指向被改变之后 页面执行方法 将执行项目内的代码 为不是执行 onDeviceReady: function(){}。
项目内测试运行的的代码：

document.addEventListener('deviceready', function () {
  var versionCode = AppVersion.build
  alert(versionCode)  // 302048


}, false);

调用插件 的api 可在此方法内使用，页面调试也可在此方法内使用

文件夹路径:ime-mobile-latest-app\config.xml
文件夹路径:ime-mobile-latest-app\platforms\android\app\src\main\AndroidManifest.xml

AndroidManifest.xml 文件夹内暴露了部分属性可在config.xml文件夹内配置
通过cordova build android 打包后 会在AndroidManifest.xml实时生效

Android 硬件调用

AndroidManifest.xml 文件下方配置
eg<uses-permission android:name="android.permission.CAMERA" />

硬件配置需要在AndroidManifest.xml 文件夹内增加上面一行代码配置， 在项目启动的时候会有相机 等硬件允许使用的提示。

cordova 插件调用

cordova 其实只是一个壳， 所有的插件使用都需要通过 cordova platform add plugin name 添加才能使用

项目代码内使用api插件即可调用。

例如版本号对比：

将本地版本号与服务器版本号做对比 。
版本号的更改在config.js

IS_LeQian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cordova+Vue打包APP
DayDreamWMM的博客
12-07 2957
打包APP步骤：（除非特殊说明，以下步骤均为Windows环境） 1.安装node环境 2.安装cordova插件 3.配置安卓的SDK和JDK环境变量（Android），配置iOS的xcode环境（iOS） 4.整合vue到cordova 安装node环境： 首先去官网下载node.js，传送门node.js下载地址，推荐下载长期支持版 Node.js下载完成之后，一步步默认安装就可以，安装完...
cordova打包vue项目
qq_37496038的博客
06-26 212
@[TOC]cordova打包vue项目心得 cordova打包vue项目出现的问题 你好！ 这是对cordova打包vue项目存在问题解析，针对android. 1跟着官方文档走，创建cordova项目失败。用cnpm install -g cordova出现丢包，导致构建失败。改用这个npm install -g cordova。 2.cordova打包出的app名字，图片修改。在cordov...
Cordova打包签名的几种方式
qq_40014350的博客
07-22 606
首先！！！！******** 生成数字签名文件（keystore）******** keytool -genkey -v -keystore YG.keystore -alias cordova-demo -keyalg RSA -keysize 2048 -validity 10000 然后！！！1******************* 方法一 、手动生成 ********************** 1.生成releaseAPK cordova build android --release 2.对A
Vue项目整合Cordova一键打包apk
最新发布
Enaium的博客
07-18 448
Cordova是一个依赖于Node.js的工具，它可以将HTML页面打包为apk等移动端应用，本篇文章将介绍如何使用Cordova将Vue项目打包为apk。
vue 各种打包坑
weixin_30822451的博客
09-19 431
1，报错 Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not ex...
cordova 打包 vue项目
zhSpace的博客
11-30 2381
1、安装cordova npm install -g cordova 2、新建cordova项目 cordova create jtcsm com.xx.jtcsm eat jtcsm是项目名称 com.xx.jtcsm是包名 eat app标题 3、创建完新的cordova项目后将 vue编译完后dist文件夹下的文件复制到 www文件夹下 * 记得将原先www文件夹内的文件全部删除 4、检查环境是否准备就绪 cordova requirements 5、生成签名...
使用cordova对vue项目进行打包(android)
liucai1018的博客
06-17 983
说明： 当前有一个vue项目，需要使用cordova进行打包 环境条件： 1 jdk-即Java运行环境 这个很简单，百度一下就行，学过Java的话都有安装过jdk 检查电脑是否安装了jdk：win+R->输入cmd->回车进入黑窗口，输入javac->如果出现关于javac的帮助信息则表示已安装 2安装nodejs环境 相信一般要打包vue项目肯定开始也是装了nodejs了 查看是否安装了nodejs：node -v（如果出现了版...
cordova Vue打包
青阳的博客
05-05 226
cordova创建项目seedApp cordova create seedApp Cordova创建应用出错 Cordova安装时不能使用cnpm 应该使用npm，cnpm虽然快但是后期出的错绝对比这省下来的时间多得多。 正确安装方法 npm install -g cordova 将镜像修改为淘宝镜像 二、vue项目导入：将Vue项目除了：node_modules及.git文件...
教你用Cordova打包Vue项目的方法
08-29
目前流行的打包方法有weex和Cordova两种，今天我们将详细介绍使用Cordova打包Vue项目的方法。 安装Cordova 首先，我们需要安装Cordova。使用npm安装Cordova的命令是`npm install -g cordova`。如果已经安装了...
Cordova+Vue实现Android-APP开发
07-12
本文将详细介绍如何通过Cordova和Vue.js这两种技术来实现Android应用程序的开发。 #### 一、Cordova简介 Cordova是一个开源移动开发框架，它允许开发者使用HTML、CSS和JavaScript来构建跨平台的移动应用程序。通过...
cordova+vue打包apk
七七的博客
03-01 2189
vue+cordova开发移动APP项目 一、环境(版本及配置) 1、node 12.13.1 执行命令查看版本 node -v 显示版本号则安装成功。 2、cordova 9.0.0 执行命令查看版本 cordova -v 显示版本号则安装成功。 3、vue cli 2.9.6 执行命令查看版本 vue -V 显示版本号则安装成功。 4、Android SDK 安装及配置环境 执行命令查看安装成功 adb 或者 cordova requirements 显示如此则表示安装配置完
用Cordova打包Vue项目的方法步骤
10-17
主要介绍了用Cordova打包Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决cordova+vue 项目打包成APK应用遇到的问题
11-29
公司前端界面用的是vue，我要嵌入到Android中生成App 第一步：安装node node安装：直接进入官网https://nodejs.org/zh-cn/，下载最新版本安装。安装之后在命令行中使用”node -v” 检查安装是否成功。 npm安装：由于新版的nodejs已经集成了npm，所以node安装时npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。 第二步：安装cordova 1. 打开cmd 输入命令：npm install -g cordova .安装cordova 2. 验证是否安装成功，cmd中输入命令: cordova -v 如下
cordova打包vue项目，本地图片失效不显示
weixin_44563906的博客
06-10 1845
2019-06-10最近用vue开发，cordova打包，开发APP，但是碰到一个问题，就是图片如果用在线的就正常，如果应用本地的，则开发过程中正常，打包后就不显示，找了一下资料，发现是打包后悔自动更改路径。解决方法如下： 目录结构如下： 在写代码的时候会引用图片，此时我们可能会写2种方法。第一种在html中直接写img，第二种在css中写background。如下代码： #CSS如下： ....
vue打包成app应用，Webstorm+cordova打包vue成Android项目
weixin_43796132的博客
06-27 784
目录一：万事开头难，准备环境；若已搭建好环境请忽略跳到第二步1. 安装java sdk2. 安装java sdk3. 安装gradle二:：搭建cordova平台1. 全局安装cordova2. 创建cordova项目3. 假设你已经有了Vue项目那么进行build编译得到dist文件夹，复制vue项目中 dist 下面的文件粘贴到创建好的 android-app 项目的 www 文件下4. 打包android项目三： 生成apk1. 生成签名，要是不生成签名；apk会安装失败2. 然后在android-a
使用 Cordova 跨平台打包 Vue
nonlinearthink的博客
10-24 663
想要更好的阅读体验，可以转我的个人博客。 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 文
Cordova打包vue项目生成Apk （解决cordova build android抛出的zip问题）
weixin_30539835的博客
01-18 510
最近对vue前端框架情有独钟。但研究了一下怎么把vue项目打包成android apk来玩玩。 首先讲一下创建vue2.x项目。其实在之前的文章中都有写过，有兴趣的同学可以去看看。http://www.cnblogs.com/Gherardo/p/7170540.html 这里就不多废话了。 项目地址：https://github.com/Gallado/IFlowersapk也在相应的目...
Cordova - Windows系统下安装配置Cordova
Welcome
06-13 1009
使用Cordova可以很方便地进行跨平台应用的开发。在之前的文章：Cordova - 使用Cordova开发iOS应用实战1（配置、开发第一个应用）。介绍了如何在Mac OS系统下安装使用Cordova。本文介绍如何在Windows系统下搭建Cordova环境。并使用Cordova编译发布一个安卓（Android）应用。 一，Cordova环境搭建 1，...
在cordova环境下打包vue项目并调用拍照功能
05-31
你可以尝试使用以下步骤来实现在 Cordova 环境下打包 Vue 项目并调用拍照功能： 1. 在 Cordova 项目根目录下执行以下命令安装 Cordova 插件 Camera： ``` cordova plugin add cordova-plugin-camera ``` 2. 在 Vue 项目中安装 Cordova 插件 Camera 的 TypeScript 类型： ``` npm install --save-dev @types/cordova-plugin-camera ``` 3. 在 Vue 项目的入口文件 main.ts 中添加以下代码： ``` declare var navigator: any; const app = createApp(App); app.config.globalProperties.$takePicture = () => { return new Promise((resolve, reject) => { navigator.camera.getPicture((imageData: string) => { resolve(`data:image/jpeg;base64,${imageData}`); }, (error: any) => { reject(error); }, { quality: 50, destinationType: navigator.camera.DestinationType.DATA_URL }); }); }; app.mount('#app'); ``` 上述代码会将 Cordova 的 Camera 插件添加到 Vue 的全局属性中，以便在 Vue 组件中调用。 4. 在 Vue 组件中调用 `$takePicture` 方法： ``` <template> <div> <button @click="takePicture">Take Picture</button> <img :src="image" v-if="image" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const image = ref(''); const takePicture = async () => { try { const imageData = await (window as any).$takePicture(); image.value = imageData; } catch (error) { console.error(error); } }; return { image, takePicture, }; }, }); </script> ``` 上述代码会在 Vue 组件中定义 `$takePicture` 方法的调用，在用户点击“Take Picture”按钮时调用该方法。调用成功后，图片的 base64 编码会被设置到 Vue 组件的 `image` 变量中，并渲染到页面上。 以上是一个简单的实现，在实际开发中你可能需要进行更多的配置和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值