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

JavaScript015

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终于搞定了!

如果要做网站封装APP的话,其实非常简单的,网上很多开发者服务平台都有这个功能,操作非常简单,基本上一分钟不到就可以封装好。

在亥著开发者中心找到【产品概览】-【封装APP】

输入APP名称,网站网址,选择图标,也可以自己上传自己的图片。

然后根据自己的需要选择选择功能插件,像扫一扫、微信分享、下拉刷新这些功能都是免费添加的。

在着手利用AngularJS创建这款简单的小Web应用之前,大家首先需要下载angular-seed项目。下载完成之后,大家需要打开对应的下载目录并安装其中的关联性以实现运行。具体代码如下所示:

$ cd angular-seed $ npm install ## Install the dependencies

下一步则是利用以下代表启动节点服务器:

$ npm start ## Start the server

节点服务器启动并开始运行之后,我们需要打开浏览器并访问http://localhost:8000/app/index.html,此时其中会显示正在运行的默认应用。

接下来访问angular-seed项目文件夹下的该应用目录,应用程序的代码就保存在这里。

作为该应用程序的核心,app.js也将存放在该应用文件夹内。所有应用层级的模块与app.js内的路由都需要进行声明。

另外,大家还会在这里找到angular-seed的两个视图,即view 1与view 2。它们始终以默认形式存在。我们需要在应用文件夹中将这些视图删除。

现在开始我们要从零开始创建应用程序了:大家首先需要打开app.js并删除其中的全部已有代码。在app.js当中定义我们的应用程序路由,这要求大家使用ngRoute,AngularJS当中的模块之一。默认情况下app.js并不包含该模块,因此我们需要手动将其注入至应用程序当中从而加以使用。大家可以利用以下代码完成该AngularJS模块的添加工作:

angular.module('myApp', [

'ngRoute'

])

ngRoute模块将带来一项重要的组件,即$routeProvider,其能够完美地对路由进行配置。我们需要使用以下代码将$routeProvider注入至angular-module的配置方法当中,从而完成路由定义:

'use strict'

angular.module('myApp', [

'ngRoute'

]).

config(['$routeProvider', function($routeProvider) {

// Routes will be here

}])

完成以上步骤后,现在我们就可以打开index.html了。将index.html当中的全部内容清除,只保留脚本引用以及div。

每一次进行路由变更时,我们都需要按照以上方法对div内容进行调整。

在视图当中创建符号

我们需要在app目录当中创建一个新的文件夹并将其命名为home。在该文件夹当中,我们额外再创建两个文件夹,分别为home.js与home.html。首先打开home.html并将以下代码添加进去:

<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8"><link rel="icon" href="http://getbootstrap.com/favicon.ico"><title>AngularJS &Firebase Web App</title><link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"><link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet"><link href="justified-nav.css" rel="stylesheet"></head><body><div class="container"><div class="jumbotron" style="padding-bottom:0px"><h2>AngularJS &Firebase App!</h2></div><form class="form-signin" role="form"><input type="email" class="form-control" placeholder="Email address" required="" autofocus=""><input type="password" class="form-control" placeholder="Password" required=""><label class="checkbox"><a href="#">Sign Up</></label><button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button></form></div></body></html>

在home.js当中,我们则需要创建一套路由机制以访问home视图。另外还需要为由home视图创建的$scope设置一套控制器。控制器永远负责控制与之对应的特定视图。具体代码如下所示:

use strict'angular.module('myApp.home', ['ngRoute']) // Declared route .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/home', { templateUrl: 'home/home.html', controller: 'HomeCtrl' })}]) // Home controller .controller('HomeCtrl', [function() { }])

现在应用程序已经准备就绪。打开app.js,而后将myApp.home home模块添加到该应用当中。利用$routeProvider.otherwise方法为我们的应用程序声明一套指向home视图的默认路由,具体代码如下所示:

'use strict'angular.module('myApp', [ 'ngRoute', 'myApp.home' // Newly added home module ]). config(['$routeProvider', function($routeProvider) { // Set defualt view of our app to home $routeProvider.otherwise({ redirectTo: '/home' })}])

如果大家希望显示自己的home页面,则将home.js添加到该应用的主HTML模板文件当中。要完成这项操作,请打开index.html文件并湢以下代码:

<script src="home/home.js"></script>

现在一切工作已经完成,该应用随时准备加以运行了!要开始使用这款应用,我们需要重启服务器并将自己的浏览器指向http://localhost:8000/app/index.html以访问登入页面,在这里大家可以实现对该应用程序的访问。

如果大家需要使用Firebase(具体理由如前文所述),则需要首先创建一个Firebase账户。在账户创建完成后,我们将屏幕上所显示的已创建应用url添加进来,而后点击“管理该应用”。