Cordova: 仅使用HTMLJS即可制作一个Android或者iOS的App

JavaScript09

Cordova: 仅使用HTMLJS即可制作一个Android或者iOS的App,第1张

关于这个问题,还是看看官网是怎么说的吧:

翻译一下:

听上去蛮不错的,那么我们就开始用它来做一个app吧!

创建应用

如果按照Cordova( http://cordova.apache.org/ )官网所述,直接用npm全局安装 cordova ,并创建应用,你可能遇到以下错误:

此时不要紧张,卸载 cordova ,使用 yarn 重新安装一下,猜测可能和npm版本不兼容。

安装好 yarn 和 cordova 之后,使用cli命令 cordova create MyApp 创建project,此时你可能会遇到以下错误:

这是什么原因呢?

原来我们没有将 yarn 的bin目录加入到环境变量 path ,作为一个Windows僵尸粉,判断出这点还是不难的。执行以下命令,找到 yarn 的bin目录所在:

将 d:\Users\gy.wang\AppData\Local\Yarn\bin 此目录添加到windows环境变量 path

配置好环境,重新打开CLI窗口,我们终于可以顺利地创建 cordova 应用,cordova使用默认模板创建好一个Project。

添加Android平台

在项目根目录下,运行命令 cordova build android 来编译你的项目,你可能遇到以下错误:

原因是啥呢?当前cordova要求的Android版本比较高,需要安装 Android SDK Platform 25 才能顺利编译,怎么办? 装!

打开 Android Studio , 安装SDK

安装成功之后,执行命令 cordova build android ,这次终于成功了!

APK包成功打好,这次我们运行一下,执行命令:

这次我们会遇到 环境坑四

不急,仔细看报错信息的意思是没有可用的设备或模拟器。这个简单,打开Android Studio添加一个:

再次运行 cordova run android , 哈! 这次成功了!

什么!闪退!WTF!

运行命令 cordova run android ,将APK包安装到模拟器上结果又报错了!

离成功就差一步了,别泄气!我们慢慢查找原因~

至此,APP终于搞定了!

现在我使用angular5开发了一个工程。现在业务需求,希望程序能够以app的形式发布到市场上。为了方便就,直接将现有的程序使用cordova进行封装。

我的操作系统版本是:mac os High Sierra 10.13.1

我安装的androidstudio的版本是:android-studio-ide-171.4443003-mac.dmg

首先安装jdk。

然后在androidstudio里面安装android的sdk。注意cordova支持的版本号。具体查看:

https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-support

最后在.bash_profile文件里面配置JAVA_HOME。最后效果是

首先安装cordova

然后创建一个工程:

其中hello是工程文件夹的名字,com.example.hello是android需要的id,HelloWorld是应用的名字。

进入这个工程,添加需要平台

检测环境是不是配置对了

在检测cordova需要的环境是不是安装,之后出现这样的提示。

Could not find an installed version of Gradle either in Android Studio,

or on your system to install the gradle wrapper. Please include gradle

in your path, or install Android Studio

这是因为在android studio2.3.1 gradle的位置变了,导致找不到了。

这个时候需要手动安装了。

这样android的环境就配置好了。

将angular工程中所有的文件合并或者拷贝到cordova工程中。合并package.json文件的时候要小心,不要遗漏了什么。

我的package.json文件太长了,就不往上传了。借用一下别人的图片。

使用 ng serve 运行一下工程,发现报错:

Cannot read property 'config' of null TypeError: Cannot read property 'config' of null @angular/cli/tasks/serve.js @angular/cli/commands/serve.js

那是因为angular工程里面的一个隐藏文件.angular-cli没有拷贝到cordova里面去。拷过去之后,再次运行就好了。

在index.html文件里面添加

<script type=”text/javascript” src=”cordova.js”></script>

将index.html里面的base修改成:

<base href=".">

安装插件

cordova plugin add cordova-plugin-device

将.angular-cli.json的outDir属性改为“www”.

"outDir": "www"

打开android模拟器,运行命令

就可以出现步骤二的结果了。

img的src所对应的图片没有加载出来。那是因为cordova把img的src转成:

file:///assets/img/check-box-unchecked.png 在android手机里面没有找到这个图片,就报错了。

file:///assets/img/check-box-unchecked.png Failed to load resource: net::ERR_FILE_NOT_FOUND

可以使用插件: cordova-plugin-file 来解决问题

https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

https://medium.com/@nacojohn/convert-your-angular-project-to-mobile-app-using-cordova-f0384a7711a6

https://github.com/henotia/Angular5-Cordova

两者确实是不在一个层次可以比较的。

cordova是一个hybird模式的框架,可以用js去写native

app的东东,cordova本身封装了不同平台的底层代码,从而实现了跨平台;其利用js里的corfirm机制来实现js和cordova的通信,这

让前端开发人员可以实现写navtive的新技能,也可以自己实现扩展来实现自己的cordova的插件,但是本身html5的性能依赖于浏览器,所以手

机浏览器的性能差异决定了实现出来的页面体验。

再说说react.js,是fb在其应用的过程中实现的一个前端页面级的框架,对应

MVVM的V这一层,和angularjs专注点不同,react更偏重在页面层,将页面划分不同的类,数据的变化可以很好的响应页面的变化,不是一个大

而全的框架,更像是一个组件化的页面框架。可以和jquery,angularjs等共同使用。另外,最近fb在此基础上又扩展出了react

native来实现用react.js的方式来实现native

app的效果,也是为js又插上了一双翅膀,为前端又增加了想象空间,目前来说只有ios的实现,相信不久就会有android的实现。