详解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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
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中使用反射技术的架构插件使用说明
2010/05/18 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
python中mechanize库的简单使用示例
2014/01/10 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
安全生产责任书
2014/03/12 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
欢迎标语大全
2014/06/21 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
转正申请报告格式
2015/05/15 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
Golang连接并操作MySQL
2022/04/14 MySQL
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android