使用Cordova将网站（Web Applications）封装为移动Apps

来源：互联网发布：stc51单片机里边是什么编辑：程序博客网时间：2024/05/16 17:11

Cordova是一个可将网页程序（Web Applications）转换为Apps的框架，支持苹果、安卓、微软三大移动商店应用开发。Visual Studio 2015对Cordova有着良好的支撑，包括项目模板、编码、调试、打包到部署，一如既往的微软大包大揽风格。我最近试着用Visual Studio Tools for Apache Cordova包装了一个手机版的H5网站，未对原始网站做任何改动，就生成了能在Android、iOS和Windows Phone上部署运行的Apps。这么高的生产力，对管理人员而言，无疑是很有吸引力的！下面说一下我的封装过程及遇到的坑，供参考。
一、使用
1.安装Visual Studio Tools for Apache Cordova，参考“http://www.cnblogs.com/UltimateAvalon/p/5328642.html”。安装中有两个保持，首先是要保持网络畅通，因为很多文件（特别是Android SDK）必须从网上下载；再就是要保持耐心，安装耗费时间与网络状况有很大的关系。对于Android、iOS的SDK最好是用现成的，如果现下现装，那就只会增加挫折感。
2.练习，参考“http://www.cnblogs.com/UltimateAvalon/p/5329677.html”。中间会涉及到Android、iOS开发的常识，自己搜文章看，反复看，反复练，如果感觉困难重重，那就放弃吧。
3.封装H5网站成App。
3.1.在Visual Studio 2015中使用项目模板“JavaScript->Apache Cordova Apps->Blank App（ Apache Cordova）”新建一个工程；
3.2.打开config.xml,在“插件(Plugins)”标签页安装“InAppBrowser”；
3.3.打开“www->scripts->index.js”，在“function onDeviceReady”的最后添加如下代码，注意填入你要封装网站的URL：
if (window.cordova && window.cordova.InAppBrowser) {
window.open = window.cordova.InAppBrowser.open;
window.open('此处为你要封装网站的URL', '_blank', 'location=no,toolbar=no');
}
4.修改配置文件，打开config.xml，在“通用（Common）”标签页设置App显示名称（Display Name），程序包名称（Package Name），根据需要在“Windows、Android、iOS”标签页设置平台相关参数。
5.调试，包括Ripple模拟器、Windows、Android、iOS平台模拟器。
6.调整美化页面，现在流行使用Ionic框架，参见“http://www.runoob.com/ionic/ionic-tutorial.html”。
7.制作图标、闪屏图片替换“resources”及其子目录下的对应文件。
8.打包和发布，参见“http://taco.visualstudio.com/en-us/docs/tutorial-package-publish-readme/”。

二、跳坑
1.真机调试
Android：在手机端启用开发者模式，然后USB线连接电脑，在Visual Studio中选择“设备（Device）”进行调试；
iOS：在Mac上用Xcode生成一个绑定名(Bundle Identifier）与config.xml里设置的程序包名称（Package Name）完全相同的iOS工程，并用该Xcode工程完成真机调试，然后在Visual Studio中选择“远程设备（Remote Device）”或“本地设备（Local Device）”调试；
Windows Phone 10：在手机端启用开发者模式，并且把下面的设备发现和设备门户打开，然后USB线连接电脑，在Visual Studio中选择“设备（Device）”进行调试。
2.在Android中调试时提示“Application Error - The connection to the server was unsuccessful.”
这是由于模拟器响应太慢导致的，可通过改名法解决，首先把index.html更名为main.html，然后新建一个index.html页面，内容如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script> window.location='./main.html'; </script>
</head>
<body >

</body>
</html>
改名法的主要原理就是通过一个过渡页面，把加载首页的内容最小化。
3.在Android使用签名后的apk调试时提示“Android packages must be signed when debugging using the Release configuration.”
签名时需要的密码（storePassword和password）必须是在配置文件（build.json或ant.properties）中预填入的，不能是在对话框中交互输入的。
4.在Android中部署时提示“INSTALL_PARSE_FAILED_MANIFEST_MALFORMED”
包名（Package Name）的首字母必须小写。
5.在Android中编译时提示“No Java files found which extend CordovaActivity”
删除目录“platforms”后再编译，实际上另外两个动态生成的目录“bin”和“bld”也可以根据需要删除。
6.隐藏内嵌浏览器（InAppBrowser）地址栏和工具栏
将window.cordova.InAppBrowser.open的第三个参数设置为'location=no,toolbar=no'。

如果您是和我一样骨灰级的IT从业者，顺便提醒一下：时代真的变了，微软现在走open路线了，Visual Studio Community版是免费的，完全支持上述开发任务。

0 0