Apache Cordova

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/zxj0904010228/article/details/83143563 1. 前言：在进行hybrid app开发时，可以采用vue.js前端框架进行h5页面开发，然后使用跨平台cordova工具打包成app，如android或ios等，再h5页面也可以使用cordova丰富的插件调用原生代码，获取设备相关信息、调取手机摄像头等 2. 创建cordova项目 1） 创建cordova项目 前提：安装node和cordova，安装方式很简单，自行百度就可以了 cordova create cordovaApp com.test.cordova myApp 2）创建平台 进入cordovaApp目录 cordova platform add android 创建android平台 或cordova platform add ios 创建ios平台 3）cordova打包命令，打包成apk的时候使用 cordova build android 此时会将cordovaApp/www目录下的文件打包成apk文件，即可安装到手机 3. 在cordova项目目录下创建vue 项目 在当前cordova项目目录下，使用vue

首先，确保手机打开了USB调试。如果还是检测不到WebView页面，主要有以下几种情况。 1、反应慢，稍等一会 2、关闭然后重新打开USB调试开关，刺激一下chrome，我的魅族手机有时需要这样操作一下。 3、华为手机，打开USB调试和 仅充电模式下允许ADB调试。 如下图所示： 如果还不行，请安装华为手机助手，插上手机后会提示安装的。不安装的话，可能会出现不稳定的情况。 4、有网友插了两个手机，结果一个都检测不到，拔掉一个神奇的好了。 　　总之，主要是手机的问题，实在不行就换个手机试试，不要在一个手机上吊死。 5、如果手机型号识别了，但是没有识别WebView。 可能是要调试的APP没有打开WebView的调试模式 。会出现有的App能Inspect，有的不能。 可参考 Cordova/Ionic开发的Android APP启用Chrome Inspect调试的方法 如果点击Inspect后。出现空白页面的话，查看 此处解决方法 。 来源： oschina 链接： https://my.oschina.net/u/4381003/blog/4029664

《HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站》以HTML与CSS为主，配合jQuery制作网页，并搭配jQueryMobile制作移动网页，通过具体的范例从基础到高级循序渐进地讲解。全书首先介绍了HTML5网页开发和CSS网页美化，只要按本书的顺序学习，就能够轻松掌握网页制作的方法；还介绍了目前热门的移动设备网页技术，读者无须学习复杂的程序，就能够轻松创建移动设备的网页；最后通过两个移动设备网页制作实例让读者进行实战练习，以加深理解。 本书是网页制作入门初学者的最佳工具书，同时也适合教师作为相关课程的教材使用。 《HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站》目录 第1篇 HTML5网页开发 第1章 HTML5基础入门 第2章 文字变化与排版技巧 第3章 HTML5表格与表单 第4章 HTML5多媒体素材的应用 第5章 网页存储Web Storage 第2篇 CSS网页美化 第6章 认识CSS样式表 第7章 CSS基本语法 第8章 CSS样式与排版 第9章 HTML5+CSS3综合应用 第3篇 jQuery与jQuery Mobile 第10章 认识jQuery与jQuery Mobile 第11章 jQuery Mobile UI组件 第12章 jQuery Mobile 事件 第13章 数据的保存与读取 第14章

ionic是什么： Ionic(ionicframework)一款开源的Html5移动App开发框架,是AngularJS移动端解决方案,Ionic以流行的跨平台移动app开发框架phoengap为蓝本，让开发者可以通过命令行工具快速生成android ios移动app应用 phoengap是什么？ PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动. 通俗的讲：ionic是一款基于angularjs的html5移动app开发框架 phonegap就是一款可以打包并且可以让js调用原生的移动app框架 那我不用命令安装ionic 可以使用ionic开发app吗？答案是可以得。 就可以把ionic当作一款html5 移动app框架，把phonegap/cordova 当作打包 并且调用原生的框架就可以了 至于：为什么ionic也可以打包，上面也说了，ionic的打包插件是基于phonegap/cordova的 首先我们需要明确以下几个概念： 1.即使我们将移动端web页面做得和原生应用及其相似，在我们的页面中也无法像原生应用那样调用原生的能力

Apache Cordova 是一个免费且开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发，将写好的网页程序封装成app应用。一个偶然的机会帮助表妹做毕业设计，学习了如何应用该框架制作简单的应用。先记录下，方便日后机会翻阅。 一、安装必要的工具 1、安装Node环境然后通过Node安装Cordova 2、Java JDk环境 3、Android的SDK 二、安装环境 1、安装NodeJs，到NodeJs官方网站http://nodejs.org下载安装。安装完成之后可以用 npm命令安装cordova npm install -g cordova 安装完成输入cordova -v显示下图表明安装完成 2、安装java JDK环境这里不再单独说明。 3、安装Andorid的sdk(但是打开andorid的官网不好找sdk，官方推荐是按照Android Studio)安装Android Studio之后 打开打开android studio 点击file/settings/appearance&behavior/system settings/android SDK 在这里可以看到你的SDK地址 把它复制下来如图所示 打开我的电脑--属性--高级--环境变量 新建系统变量ANDROID_HOME，变量名：ANDROID_HOME

因为要使用cordova进行微信分享，网上搜索，使用cordova-plugin-wechat插件能够完成我想要的功能。 一番编码后，分享，美滋滋。分享完成，返回。。。。wtf！闪退！ 在原作者github上，FAQ模块找到了问题所在， https://jasonz1987.github.io/cordova-wechat-docs/docs/faq 升级，说干就干。一顿操作猛如虎，好了，不闪退了。美滋滋。发布版本，美滋滋。 半个月后，新的需求来了，一顿编码后。依然老样子，打包，发布。写程序总是这么朴实无华，且枯燥。 几分钟后，QQ跳起来了，映入眼帘有几个大字：app更新失败，报错了。 我方了，一顿调试后，得到报错原因： android.os.FileUriExposedException: file:///storage/emulated.. exposed beyond app through Intent.getData() 原来是cordova-plugin-file-opener2插件打开app的时候报错了。 一顿查找（我是野生安卓，只会一点，主攻前端）后，网友都说要加一个权限，加一个provider。甚至连cordova-plugin-file-opener2插件github上都这么说 https://github.com/pwlin/cordova-plugin

在使用cordova开发app时，不像浏览器中可以直接使用浏览器的开发者工具进行调试。为了看到app的显示效果， 一种是使用模拟器进行展示，一种是使用真机进行展示。 模拟器：可以使用Android studio，可以安装一些对应的模拟器进行显示。这里不讲解Android studio和模拟器的安装。 这里介绍下如何使用真机进行usb链接调试。 第一步：在真机上安装app，也可以使用Android studio来安装，或者直接使用apk安装。Android studio安装时选择真机，前提真机要使用usb链接电脑上，这样才能识别到。 如果遇到 无法安装提示设备没有准备好，可以先build 菜单下点击 Clean Project， 然后在重新安装 第二步：启动google浏览器的开发者工具，如果没有识别到设备，可能是usb链接问题或者是电脑识别手机的驱动问题 第三步：打开手机，运行安装的app，然后点开浏览器开发者工具，这时Remote devices界面会有些变化。点击Inspect按钮，弹出调试的界面。 如果发现弹出的界面显示404，not found 这时需要翻墙，第一次使用要进行翻墙。 第四步：修改代码后，关闭手机app，这时调试界面会提示Connection lost ，关闭重新打开。 如果Remote devices界面的Inspect按钮灰色

因为H5页面在移动端的兼容性及扩展性方面体现出来的优势，又兼得APP中植入H5页面相应用的灵活性有大大的提升（如活动、游戏的更新等）。APP开发不可避免的须要载入一些H5页面。但安卓client对网页内容的排版、整理、交互等可能会出现一些不可预料的问题。本文将对安卓端载入网页写一些比較通用，可能避免问题的统一的解决方法总结。 背景 一般对前端知识有所了解的都清楚，解析网页主要是靠页面渲染引擎和JS解析引擎，前者负责取得网页的内容（HTML、XML、图象等等）、整理信息（比如加入CSS等），以及计算网页的显示方式然后会输出至显示器或打印机，后者负责网页的一些动态交互等。 安卓操作系统在前端页面载入方面针对开发人员提供了webView组件。并给予响应的API去使用。但其底层的内核在4.4曾经是webKit内核（对H5的支持还远远不够），4.4以后是chromium内核（JS解析引擎採用的便是现在最经常使用的V8引擎，对H5的支持也逐渐加大），随着安卓操作系统的不断迭代，5.0已解决通过网页打开本地文件选择器的问题。总之技术在不断的成熟，有兴趣了解细节的可參考 http://blog.csdn.net/typename/article/details/40425275 疑难杂症 近期做了个项目，里面须要在APP中载入一个叫大转盘的活动。活动页面当然是用H5写的啦

首先在我们创建的项目目录下，打开终端，通过命令 $ ionic platform add android 添加android平台，执行完之后会在项目/platform目录下生产android文件夹， 1.先创建应用图标和启动图片 应用图标最少要1024px*1024px大小，启动图标最少要2208px*2208px，都要png-8格式的就可以了。做好图片后，我们把图标命名为icon.png，启动图片命名为splash.png，把这两张图片放到项目resources文件夹目录下，然后在android和ios文件夹目录下也各放一份，之后在终端执行命令：$ ionic resources，然后就会生成不同尺寸的图片。 （注：ionic resources命令默认会将图标和启动图片都生成不同尺寸的图片，如果像分别生成，可以执行ionic resources icon生成图标，执行ionic resources --splash生成启动图片） 2.安装SDK和配置环境变量 1.安装jdk 和配置JAVA_HOME 2.下载sdk，如何下载请看另一博文 http://www.cnblogs.com/Caiyilong/p/8559394.html 这边需要 注意，cordova-android包必须是下载的android api支持的 ，最好下载对应 android api的最高版本

1、这时候报虚拟内存不足-----------因为我的电脑是32位的Win7 ，经测试，64位的没有这个错误。一般报这个内存不足，java的做法就是去eclipse的option修改jre的参数值就行了。 　　2、但ionic的做法有点不一样：在 ionic platform add android@6.1.2 后，在 platforms\android\cordova\lib\builders 的文件夹下会有一个文件 GradleBuilder.js 。 　　3、用记事本打开这个文件，在内容中找到 args.push('-Dorg.gradle.jvmargs=-Xmx2048m'); 把这个 2048m 调小，具体看你的机器，我调的为 512m ； 　　4、如果没有找到 args.push('-Dorg.gradle.jvmargs=-Xmx512m'); 那么在 GradleBuilder.prototype.getArgs 的函数里面的return前加上这句代码就行。 　　5、最后执行ionic build android就可以跟之前一样的打包了 来源： oschina 链接： https://my.oschina.net/u/2610778/blog/4697448