我的操作系统版本是: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
4、ng-cordova安装与使用4.1、下载ng-cordova
bower install ngCordova
4.2、引入ng-cordova.js文件
把 ng-cordova.js 或者 ng-cordova.min.js引入index.html中并放在cordova.js之前, AngularJS Ionic 文件之后 (因为ngCordova d依赖AngularJS).
4.4、引入ng-cordova的依赖
在主程序的app.js中引入ng-cordova的依赖
angular.module('myApp', ['ngCordova'])
4.5、添加插件到你的Cordova CLI环境中
cordova plugin add ...
4.6、使用
要在检查设备准备完毕之后使用
document.addEventListener("deviceready", function () {
$cordovaPlugin.someFunction().then(success, error)
}, false)
// OR with IONIC
$ionicPlatform.ready(function() {
$cordovaPlugin.someFunction().then(success, error)
})
不过我测试过,因为已经run过了,你的各种功能肯定在这之后,所以之后在哪用都可以。不过要是有些功能是启动应用就要有,还是要写在这里面的。
?
angular.module('starter', ['ionic', 'route','config','global','commonJs','ngCordova'])
.run(['$ionicPlatform','$rootScope', '$location', '$timeout', '$ionicHistory','CommonJs','$cordovaToast',function($ionicPlatform,$rootScope, $location, $timeout, $ionicHistory,CommonJs,$cordovaToast) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
if (window.cordova &&window.cordova.plugins &&window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true)
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent()
}
})
}])
1、cordova3.0.0的命令行cordoava CLI和phonegap CLI在windows系统上开发android程序的注意事项‘a 首先要根据要求安装最新的android SDK,目前我的版本要求 SDk 17才能顺利进行
b 一定要配置好环境变量,把SDK's tools and platform-tools 目录配置到你的环境变量中去,
另外还要把ANT也要配置到系统环境变量中去,如
%JAVA_HOME%\bin%ANT_HOME%\bin
2、cordovan3.0.0的插件可以用命令行远程从git添加,也可以下载下来从本地用命令行添加,两种方法的命令
是一样的,只需要把最后参数的远程地址改成本地路径即可
3、npm install -g cordova@XXXXX 可以指定要安装的cordova版本
4、把老版本的3.0.0以前开发的程序升级到3.0.0的注意事项
a 需要新建一个cordova项目
b 把seerts里的www文件夹下的东西都复制过去,记住cordova.js文件不要替换,要用新创建的里面的cordova.js不要用旧的程序里的覆盖
c 把 src文件下的程序包都复制到新程序的src下面,需要修改所有的引用org.apache.cordova.api成org.apache.cordova,
这是新版本的cordova命名上的变化
d 先前程序中的android的访问权限设置需要在新程序中重新进行设置
e 把config.xml中添加的插件的格式在新的程序中按照新的格式重新进行整理