ionic cordova使用笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/liufang1991/article/details/77529736

心得

 ionic生成的android app打开速度确实很慢，html5的视频播放在android上就是坑，很多机型不兼容html5的video

简单的页面不如用原生的Webview然后加载html实现即可，用腾讯的tbs服务来增强Webview的功能，也可以内嵌crosswalk浏览器

腾讯tbs网站上整理了很多移动开发的文章值得学习，如 Service Worker最佳实践等

复杂的app建议还是用原生android编写然后Webview加载一些html内容

已经有html项目了，直接用crosswalk-pkg命令打包生成APP也不错，虽然apk包有点大，但是兼容性比较好

ionic就是在cordova基础上加了一层，很多命令就是在cordova命令前面加上一个ionic，有时候没有加ionic也没问题，如cordova run android，我们执行ionic cordova run android

文档资料

http://cordova.apache.org/

http://cordova.axuer.com/docs/zh-cn/latest/

https://github.com/cfjedimaster/Cordova-Examples 一系列cordova的demo 

http://ionicframework.com/docs/

https://github.com/ionic-team/ionic-native  

安装

详细的安装、环境配置、使用说明请参考cordova和ionic的官方文档

npm install -g cordova ionic

android环境配置 安装jdk,android sdk，配置好环境变量JAVA_HOME,ANDROID_HOME,然后把jdk的bin，android sdk的tools,tools/bin,platform-tools目录全部添加到PATH环境变量中

利用模板快速生成项目

下面命令行最后的tutorial是官方最完善的APP模板，可以自行测试其余简单的模板

ionic start MyIonicProject tutorial

• tabs : a simple 3 tab layout
• sidemenu: a layout with a swipable menu on the side
• blank: a bare starter with a single page
• super: starter project with over 14 ready to use page designs
• tutorial: a guided starter project

生成ionic项目以后运行 ionic serve就可以打开一个服务，在浏览器中浏览了

给我的项目加上android平台，生成的android平台目录“项目/platforms/android”是可以直接用android studio打开当做android项目打开运行的

ionic cordova platform add android

给我的项目加上ios平台

ionic cordova platform add ios

调试运行发布

ionic serve     在本地启动一个http服务，支持热更新

ionic serve -lc  感觉ionic serve已经支持热更新了，好像没有必要加上-lc这个调试参数，谷歌浏览器本身就有APP模式，加上这个参数以后可以在地址后面加上平台参数来模拟平台如http://localhost:8100?ionicplatform=android

ionic cordova run android 在android模拟器或者真机上运行

ionic cordova run android -lc 可以在真机上远程调试

ionic cordova run android --device

ionic cordova run android --prod --release

ionic cordova build android --prod --release 生成发布的apk

发布生成的apk是没有签名的所以还需要自己去签名

生成签名
keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks android-release-unsigned.apk my-alias
优化apk
zipalign -v 4 android-release-unsigned.apk HelloWorld.apk

常用需求

开机启动，使用ionic-native插件cordova-plugin-autostart，使用手册请参照http://ionicframework.com/docs/native/autostart/

浏览在线网站  1）使用iframe ，简单的就这样用无所谓了，但是很多人说不安全什么的，模板生成的项目是加上了cordova-plugin-whitelist的需要设置白名单

2）用InAppBrower， 使用请参照http://ionicframework.com/docs/native/in-app-browser/，ios请使用SafariViewController

ThemeableBrower，使用请参照 http://ionicframework.com/docs/native/themeable-browser/

SafariViewController,使用请参照http://ionicframework.com/docs/native/safari-view-controller/

增量更新，只更新www中的静态资源 https://github.com/nordnet/cordova-hot-code-push
全量更新升级 https://github.com/markmarijnissen/cordova-app-loader，如果新增了native插件肯定需要全量升级的

视频播放，高版本android兼容video性能越来越好，我现在的需求是定制化的平板APP暂时就使用html5的video了，在android上不支持播放本地视频文件，但是用crosswalk后就支持了，但只支持mp4格式的视频，ogg的视频播放不出来

查阅了很多视频项目记录一下

https://github.com/jaeger25/Html5Video
https://github.com/macdonst/VideoPlayer
https://github.com/moust/cordova-plugin-videoplayer
http://blog.csdn.net/lucy_100/article/details/51086749

https://github.com/videogular/videogular2 www.videogular.com  加强html5的video
https://github.com/nchutchind/cordova-plugin-streaming-media ，使用手册参照http://ionicframework.com/docs/native/streaming-media/，打开的是一个全屏的视频，以后有时间看是否可以改写为一个悬浮的Actvity，悬浮在webview浏览器上

全屏 cordova-plugin-fullscreen，使用手册http://ionicframework.com/docs/native/android-full-screen/ 和 http://blog.csdn.net/robert_cysy/article/details/62422323两种写法

锁定屏幕方向 cordova-plugin-screen-orientation，使用手册http://ionicframework.com/docs/native/screen-orientation/

自定义生成native插件

1）用plugman生成cordova插件，发布到github上面，这个插件在typescript中还用不了

2）可以参照@ionic-native里面的写法自己写typescript的用法，也可以参考native在github上的说明https://github.com/ionic-team/ionic-native/blob/master/DEVELOPER.md

下载git项目， npm install安装插件，然后用gulp plugin:create -n PluginName生成插件脚本，在 src/@ionic-native/plugins/plugin-name目录中的index.ts中配置好cordova项目的相关信息，最后执行npm run build就可以在dist目录生成编译后的native插件

将步骤1中生成的cordova插件拷贝到项目的node_modules中，步骤2中在dist目录中生成的native插件脚本拷贝到node_modules/@ionic-native中，然后package.json和config.xml中都进行配置就可以开始使用了

优化

在android上有兼容流畅的问题，可以用crosswalk插件打包，ionic cordova plugin add cordova-plugin-crosswalk-webview，这个插件有20几M，有lite版本10M左右，会生成x86和arm两个apk，arm的apk文件大小比x86的要打，但是x86基本上没有什么应用市场，并且从介绍上说x86指令CPU也是可以用arm指令的，所以我的做法就是不发布x86的apk，直接使用arm的apk

需要注意的是crosswalk打包生成的apk文件在genymotion模拟器中运行是不正常的，在真机上正常

遇到的问题

1.ionic cordova plugin add cordova-plugin-screen-orientation 安装失败，总是报git拉取PromisePlugin失败的错误，不晓得为什么，暂时先直接删掉命令行前面的ionic

2.ionic cordova resources命令需要登录才能使用，被坑了很长的时间，去官网注册的域名由ionic.io重定向到了ionicjs.com，也就是说注册的时候我们是在ionicjs.com上注册的，用命令行使用后会提示你登录，输入登录信息，会提示往api.ionic.io上post登录信息查询不到用户或邮箱，真心的操蛋，修改hosts把ionic.io的IP指向ionicjs.com但是没有用。

最终解决：登录到https://dashboard.ionicjs.com/apps上面创建一个app项目，然后用“ionic link --pro-id 项目的编码” 将本地项目和ionicjs上的项目进行关联，关联以后发现就可以使用ionic cordova resources命令了。需要安装openssh，从http://download.csdn.net/download/liufang1991/9954161下载setupssh-7.5p1-1.exe进行安装就好了，注意不要安装旧版本的openssh，看评论说1）有可能会破坏系统环境变量中的PATH 2）还需要去cygin上面下载两个dll文件覆盖才能使用，新版本就没有这个问题了。

在windows上修改了系统环境变量以后不需要重新启动电脑，只需要新打开一个cmd窗口就可以使用了，但是在visual studio code中新打开的终端无效，要用windows自带的cmd窗口。

3.ionic native插件应该要放到platform.ready()中使用

用了cordova-plugin-file，在--debug下安卓机上运行正常，但是用--prod模式以后，在安卓机上就提示“plugin_not_installed”的错误，在stack overflow上找到了一个评论说，你应该在platform.ready()中使用ionic native/cordova插件

import { Platform } from 'ionic-angular';
// Do:
constructor(private platform:Platform){}
// And in when you call the plugin:
this.platform.ready().then(() =>{
  //....
 });