详解cordova打包成webapp的方法


Posted in Javascript onOctober 18, 2017

在项目开发中,需要将h5页面打包成app,这个时候我们可以使用cordova来打包。在官方文档中,我们可以了解到创建一个app十分简单,你的电脑上有nodejs就行,我们可以跟着官方文档一步一步来,添加安卓平台和ios平台。整个项目结构搭建完毕后,我们可以将我们需要打包的webapp页面全部塞到这个项目结构中。接下来就是麻烦的地方了,如何进行平台开发,也就是如何将我们的项目打包成一个可安装的文件。

一:设置环境变量:

1.设置JAVA_HOME环境变量,指定为JDK安装路径

2.设置ANDROID_HOME环境变量,指定为Android SDK安装路径

3.同时也要添加Android SDK的tools和platform-tools目录到你的PATH

这里需要注意的是设置ANDROID_HOME环境变量,我们可以将android studio安装到我们的电脑中,在安装过程中android studio会自动将Android SDK安装到我们的电脑里,这个时候记住这个地址就行了,如图(下面那一行的路径就是Android SDK):

详解cordova打包成webapp的方法

二:报这种错误的时候:Error:Minimum supported Gradle version is xxxx.  Current version is xxxx.

当时我在打包的时候报这钟错误,在网上查到了原因,是因为android studio更新了Gradle的版本,这个时候解决的步骤如下:

1:打开android studio,找到setting,搜索gradle,如图进行设置(具体路径各异):

详解cordova打包成webapp的方法

三:Windows cordova build Error: Could not find gradle wrapper within Android SDK. Might need to update

解决办法:

  1. 下载 Android SDK tools package(https://dl.google.com/android/repository/tools_r25.2.3-windows.zip)
  2. 进入 C:\Users\\AppData\Local\Android\sdk目录
  3. 备份tools目录
  4. 将压缩包中的tools目录解压到这个目录下
  5. 进入工程目录,再次运行 “cordova build android”。

四:安装cordova-plugin-splashscreen报错:

这个时候可能的原因是你已经打包过apk文件了,你需要将apk文件删除,然后再安装。

五:打包vue项目时遇到的问题

 1:使用npm run build打包到哪?

详解cordova打包成webapp的方法

如图,Qianne是我vue项目的名称,我在这个文件夹打开了dos窗口,然后创建一个app框架,名为myApp1。然后我将config里index.js中修改:

index: path.resolve(__dirname, '../myApp1/www/index.html'),
 assetsRoot: path.resolve(__dirname, '../myApp1/www'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',

这里的路径直接指向了myApp1下www文件夹。然后我们在vue项目中运行npm run build。这个时候我们就把打包后的文件直接放在了myApp1下www文件夹。此时我们还要将

cordova.js和cordova_plugins.js文件放进www文件夹中,与index.html同级。(记住此时会覆盖index.html,我们要将index.html中引用cordova.js的那句代码复制到打包后的index.html中)。

2:直接打开打包后的index.html,路由居然没作用?

我的解决办法:

找到vue项目中的main.js,将其中路由的代码的mode改为“hash”,我之前是“history”所以路由一直没用

const router = new VueRouter({

 mode: 'hash',

 routes

})

之后我们再打包一次,如果打包后的index.html打开后路由正常,那么恭喜你。这个时候我们在myApp1下进入dos窗口,输入cordova build android,打包成apk文件。

六:app的logo启动页面应该放在哪里?

详解cordova打包成webapp的方法

 

在项目结构中, 我们需要安装splashscreen插件:

cordova plugin add cordova-plugin-splashscreen

我们在config.xml中插入以下代码:

<platform name="android">

  <allow-intent href="market:*" rel="external nofollow" />

   <icon density="ldpi" src="./res/icon/android/mipmap-ldpi/icon.png" />

  <icon density="mdpi" src="./res/icon/android/mipmap-mdpi/icon.png" />

  <icon density="hdpi" src="./res/icon/android/mipmap-hdpi/icon.png" />

  <icon density="xhdpi" src="./res/icon/android/mipmap-xhdpi/icon.png" />

  

  <!-- 以下是欢迎页面,可根据需要进行添加 -->

  <splash density="land-hdpi" src="./res/screen/android/drawable-land-hdpi/screen.png" /> 

  <splash density="land-ldpi" src="./res/screen/android/drawable-land-ldpi/screen.png" /> 

  <splash density="land-mdpi" src="./res/screen/android/drawable-land-mdpi/screen.png" /> 

  <splash density="land-xhdpi" src="./res/screen/android/drawable-land-xhdpi/screen.png" /> 

  <splash density="port-hdpi" src="./res/screen/android/drawable-port-hdpi/screen.png" /> 

  <splash density="port-ldpi" src="./res/screen/android/drawable-port-ldpi/screen.png" /> 

  <splash density="port-mdpi" src="./res/screen/android/drawable-port-mdpi/screen.png" /> 

  <splash density="port-xhdpi" src="./res/screen/android/drawable-port-xhdpi/screen.png" /> 

 </platform>

<platform name="ios"> 

 <!-- iOS 8.0+ --> 

 <!-- iPhone 6 Plus --> 

 <icon src="./res/icon/ios/icon-60@3x.png" width="180" height="180" /> 

 <!-- iOS 7.0+ --> 

 <!-- iPhone / iPod Touch --> 

 <icon src="./res/icon/ios/icon-60.png" width="60" height="60" /> 

 <icon src="./res/icon/ios/icon-60@2x.png" width="120" height="120" /> 

 <!-- iPad --> 

 <icon src="./res/icon/ios/icon-76.png" width="76" height="76" /> 

 <icon src="./res/icon/ios/icon-76@2x.png" width="152" height="152" /> 

 <!-- iOS 6.1 --> 

 <!-- Spotlight Icon --> 

 <icon src="./res/icon/ios/icon-40.png" width="40" height="40" /> 

 <icon src="./res/icon/ios/icon-40@2x.png" width="80" height="80" /> 

 <!-- iPhone / iPod Touch --> 

 <icon src="./res/icon/ios/icon.png" width="57" height="57" /> 

 <icon src="./res/icon/ios/icon@2x.png" width="114" height="114" /> 

 <!-- iPad --> 

 <icon src="./res/icon/ios/icon-72.png" width="72" height="72" /> 

 <icon src="./res/icon/ios/icon-72@2x.png" width="144" height="144" /> 

 <!-- iPhone Spotlight and Settings Icon --> 

 <icon src="./res/icon/ios/icon-small.png" width="29" height="29" /> 

 <icon src="./res/icon/ios/icon-small@2x.png" width="58" height="58" /> 

 <!-- iPad Spotlight and Settings Icon --> 

 <icon src="./res/icon/ios/icon-50.png" width="50" height="50" /> 

 <icon src="./res/icon/ios/icon-50@2x.png" width="100" height="100" /> 

 <!-- 以下是欢迎页面,可根据需要进行添加 -->

 <splash src="./res/screen/ios/Default~iphone.png" width="320" height="480"/> 

 <splash src="./res/screen/ios/Default@2x~iphone.png" width="640" height="960"/> 

 <splash src="./res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/> 

 <splash src="./res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> 

 <splash src="./res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/> 

 <splash src="./res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/> 

 <splash src="./res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> 

 <splash src="./res/screen/ios/Default-667h.png" width="750" height="1334"/> 

 <splash src="./res/screen/ios/Default-736h.png" width="1242" height="2208"/> 

 <splash src="./res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/> 

</platform>

同样的,我们要在res文件夹下的对应文件夹中放入相应的logo或者图片.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
详解vue.js的devtools安装
May 26 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
prototype.js简单实现ajax功能示例
Oct 18 #Javascript
浅谈JS函数节流防抖
Oct 18 #Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 #Javascript
详解Js中的模块化是如何实现的
Oct 18 #Javascript
JS跳转手机站url的若干注意事项
Oct 18 #Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 #Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 #Javascript
You might like
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
python3实现随机数
2018/06/25 Python
python中正则表达式与模式匹配
2019/05/07 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
运动会领导邀请函
2014/02/05 职场文书
大学生活动总结模板
2014/07/02 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
python的变量和简单数字类型详解
2021/09/15 Python
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
MySQL 语句执行顺序举例解析
2022/06/05 MySQL
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技