ionic cordova使用笔记

心得

 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(() =>{
  //....
 });

你可能感兴趣的:(android,网站)