我来了……

Ionic2|PWA

ionic 3 中文教程

1

chalecao 发布于 2017-09-28

时隔三年,记得我最早翻译ionic中文教程的时候,是在2014年秋,一个偶然的机会接触到了ionic,我觉得这家伙简直就是未来。后来因为工作的原因,偏离了这个方向,主要去做web了。如今又回到H5的怀抱,决定重新翻译一下最新的ionic3教程,目前版本ionic 3.12.0, 大致规划一下教程内容(为了和之前的教程区分,这里统一为ionic3): 第一章 ionic3 起步 1.1 搭建ionic3环境 1.2 ionic3介绍 第二章 ionic3 组件   第三章 ionic3 API   第四章 ionic3 native   第五章 ionic3 主题   第六章 ionic3 优化 6.1 ionic3 使用 WKWeb...

阅读(2108)

ionic调试插件开发

2

chalecao 发布于 2017-08-28

其实ionic关于插件这块,主要可以参考cordova,cordova上面的所有插件可以稍作修改,应用到ionic中来,但是由于涉及到一个js注入的问题,所以目前还有另外一个开源项目ng-cordova(www.ngcordova.com ), 也就是组合了cordova和angular,已angular的方式封装注册了cordova的一些插件。 教程索引:(持续更新) ionic中文教程

阅读(1057)

ionic开发APP版本调试

1

chalecao 发布于 2017-08-28

学习前端,最基本的首先要学会调试。特别是js调试,当然我们做网页,都习惯用chrome或者firebug做调试,的确提供了不少便利。但是我们如今用js开发编译手机APP的时候,调试就显得无力了。皓眸哥我很少调试代码的,基本都是从错误原因反推定位可能出错的地方,基本上想一想就能解决。但是,难免会遇到一些神不知、鬼不觉的情况,比如版本冲突,类库冲突,等等没有报错,但就是不正确的情况,这时候真的需要调试一把。怎么办呢,看皓眸哥有哪些办法?

阅读(925)

Android浏览器Blob问题

1

chalecao 发布于 2017-08-28

如果你使用canvas导出图片,并将图片存储在uint8Array中,然后想通过blob构造之后上传到诸如aliyun oss服务器,或者个人文件服务器,那么你要注意了。在chrome早先版本和目前的android中,至少是andrid5.1之前的浏览器,包括微信浏览器等,都不支持blob的构造方法,需要使用BlobBuilder。

阅读(1334)

ionic在ios9中的bug修复

3

chalecao 发布于 2017-08-28

更新了ios9之后,在微信浏览器测试ionic,在tab导航栏,经常点击一下,跳不到对应页面,还会闪屏,tab导航图标一直闪,然后用Android手机测了一下,正常。还以为是我自己手机配置差的原因,后来发现并不是。 原来是ionic的一个bug。 教程索引:(持续更新) ionic中文教程

阅读(1120)

MAC下Android环境与cordova搭建

3

chalecao 发布于 2017-08-28

为什么需要在mac下用Android,这个主要是因为前几天手痒,哈哈,把系统装成了黑苹果。不过用起来还是蛮流畅的,所以就用这个,懒得换了。熟悉熟悉mac也挺好的,在一个就是现在在学习ionic和cordova,做完项目后可以同时编译生成Android和ios手机app,这样挺方便的。你是不是也心动了,快点动手吧。

阅读(1014)

手机网页调试工具weinre

1

chalecao 发布于 2017-08-28

调试手机网页一直很头疼,以前的做法全靠自己分析,用不同的浏览器打开做的网页,根据现象分析结果。貌似好不方便,要是能像浏览器开发者工具那样查看就好了。那么weinre来了。其实这个项目已经早有了。weiner主页:http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html 这里我们还是介绍一下怎么使用吧。当然调试ionic app也可以用到,所以就放到ionic系列教程里了。 教程索引:(持续更新) ionic中文教程

阅读(679)

ionic开发插件之ngCordova配置安装

1

chalecao 发布于 2017-08-28

开始学ionic的时候就嫌弃ionic做不了与手机硬件紧密结合的APP,今天无意中看到了另外一个项目ngCordova,福音啊。神马拍照啊,文件上传啊,地理位置啊,借助ngCordova插件都可以实现。ngCordova是结合cordova和angular包装了许多插件,诸如访问文件,摄像头,GPS等等,这些插件只需要简单配置就可以在ionic中使用。

阅读(827)

ionic工具类API和配置

1

chalecao 发布于 2017-08-28

哎,真是不好意思。之前翻译Ionic教程的时候,忘记翻译ionic工具类api和配置这一块了。之前一致比较忙,忘记了。很多朋友经常问一些配置问题,比如为什么android的tab导航在上面,ios的tab导航在下面?…等等。其实这些都可以在ionic里面配置的。下面看我一一道来。 教程索引:(持续更新) ionic中文教程

阅读(1121)

ionic发布APP的时候到了

1

chalecao 发布于 2017-08-28

开发完了你的APP项目,仿真器,模拟器都调试了,手机真机也调试了,那么,恭喜你,你快要成功了,只差最后几步了。这里我们一块学学打包发布android APP。

阅读(800)

ionic中文javascript API(3)

3

chalecao 发布于 2017-08-28

onic除了提供css框架以外,参看ionic中文详解CSS组件,还是提供了javascript UI库。许多组件都是需要通过javascript来产生比较炫的效果。ionic遵循了mvc的设计模式,这一点可以通过通过创建tab栏的官方例子项目来体会view之间的控制与切换。下面就是关于ionic的中文javascript API介绍。其实官方已经写的比较详细了,只是国内访问网速不好的地方,那个js菜单栏一直展不开,加载慢,所以自己做一个中文的,方便以后查找。 内容比较长,参看:教程索引:(持续更新) ionic中文教程

阅读(935)

Android最新SDK内容合集

1

chalecao 发布于 2017-08-28

打开android SDK manager,更新了半天,啥也没有。苦逼的android开发者,哎~~~喜讯来了,经过博主欢哥的不懈追求与研究,发现咱们可以手动操作,速度刚刚的。先配置好ANDROID_HOME环境变量,然后手动下载SDK以及需要的各个平台和相应的build tools等等,放到对应的目录就可以了,windows的应该直接覆盖或者放到对应目录就可以了。

阅读(1515)

reapp之用React开发hybrid app

3

chalecao 发布于 2017-08-28

用了这么久Ionic,是不是发现很多问题。我们来介绍一下Reapp吧。如果Ionic框架可以看成Angular与cordova的结合,那么Reapp可以看成是reactjs与cordova的结合。Reapp是一款使用React来开发混合应用的开源框架,为开发者提供了他们开发所需的一切,其中包括各式模块的集合、UI工具包、引导应用的CLI,以及一个预配置的构建服务器,支持Android、iOS。起先,Reapp的构建并不是以成为一个框架为目的,相反,它是作为一个UI工具包开始的。Reapp很简单,你甚至可以只是用其中的UI工具包就能构建出一款应用。首先,我们通过一张图表来看一下Reapp与其他几款框架的区别:

阅读(620)

Android不同API Level差异

1

chalecao 发布于 2017-08-28

Google每出一个Android版本,就对应一个API Level,不同的Level之间有些接口定义的不一样,按理说应该是向下兼容的。可是如果你在开发时用的API Level是17,然后从新开发,用API Level20,那么你就要注意了,这些接口还是有差别的。如果导入包的语句import报错,那么就是你导包的路径不对,这时候就要查查API了。官方各个Level API,本篇就搜集了作者开发过程中遇到的一些问题。

阅读(714)

基于Ionic+angular在线DIY定制蛋糕项目

11

chalecao 发布于 2017-07-10

最近工作总结,突然想起来自己之前创业独自做的在线DIY定制蛋糕的项目,基于HTML5 + Canvas + Ionic开发,可以在线设计蛋糕、下单购买。后来由于缺少资金,停止开发了。如果又对这方面感兴趣的朋友,可以和我联系。邮箱: 807991555@qq.com,可以在菜单栏找到我的工作室,和我联系。

阅读(959)

Hybrid_APP说一说

1

chalecao 发布于 2015-03-31

今年似乎正刮一阵Hybrid开发风,这里说说三款不同的Hybrid开发框架, Native.js , AppCan , Intel XDK,各自有不同的思路和实现,给Web开发者们提供了不同的App开发平台和能力,那就一个个分别说说。 教程索引:(持续更新) ionic中文教程

阅读(2975)

自动化测试之karma和jasmine

5

chalecao 发布于 2015-03-10

相信大家都知道测试的必要性,测试先行的概念。不过,写了这么多年的代码,除了之前用java的时候写过一些测试用例,还真的很少写过前端的测试用例,或者做一些自动化测试。感觉做单元测试还是很有必须的,它能帮助你整理思路,换个角度思考问题,发现bug。最近正好研究一下,之前了解到jasmine是做js单元测试的利器,karma是用来自动化运行分析统计单元测试的,结合karma-coverage还能统计代码覆盖率,这么牛的神器,一定要试一试。另外最后会介绍另外一个端到端的测试神器protractor,不过目前只能测试angular的应用。

阅读(2396)

ionic文件选择与上传

2

chalecao 发布于 2015-01-07

采用ionic开发hybrid app混合应用,自然少不了使用文件选择和上传操作,经过皓眸哥左看看,右瞅瞅,有两种可以实现的方法: 1.采用cordova插件,需要使用js绑定事件操作,无法使用angular 2.使用ngCordova插件,这个是结合cordova与angular封装的,更多介绍参考ionic开发插件之ngCordova配置安装 本文给出一个使用ionic和ngCordova插件制作图片文件选择与上传的综合实例工程,并放在github上,你可以down下载作为种子项目开发,本人已经在android 4.4和ios 7.1上测试过,完美运行。

阅读(3163)

phoneGap之Android环境搭建

chalecao 发布于 2015-01-05

PhoneGap,一早就听说有这么一个神奇的应用,它可以把WEB项目打包成各种移动平台的应用程序。这里我就研究一下,把之前开发的WebRTC项目打包成Android平台的apk文件试一下。正好公司现在比较缺少Android应用开发人员,看来web应用还是很有前景的。不过在网上看过不少评论说PhoneGap打包的程序运行比较慢,用户体验差,和native应用没的一比,这里也算是是做个小实验,自己看看到底怎么样。

阅读(2374)

ionic中文javascript API(2)

3

chalecao 发布于 2014-10-20

ionic除了提供css框架以外,参看ionic中文详解CSS组件,还是提供了javascript UI库。许多组件都是需要通过javascript来产生比较炫的效果。ionic遵循了mvc的设计模式,这一点可以通过通过创建tab栏的官方例子项目来体会view之间的控制与切换。下面就是关于ionic的中文javascript API介绍。其实官方已经写的比较详细了,只是国内访问网速不好的地方,那个js菜单栏一直展不开,加载慢,所以自己做一个中文的,方便以后查找。 教程索引:(持续更新) ionic中文教程

阅读(1617)

ionic中文详解CSS组件(2)

13

chalecao 发布于 2014-10-09

接着上一篇ionic中文详解CSS组件(1),我这里将一些相关组件的介绍合在一起,给出综合例子和显示效果,方便自己查阅。另外官网的JS API介绍文档有问题,国内访问不能跳转,请参考我的另一篇ionic中文javascript API.

阅读(2382)

ionic中文教程

1

chalecao 发布于 2014-10-06

做前端的同学有福了,学完比较热火的angular,你就可以开始动手做静态的WebApp了,这是多么幸福的一件事啊。静态的WebApp,你可以做任何的Demo,甚至可以做一些通关小游戏这个先不谈。做完了WebApp之后,神器IonicFramework来了,只要你的App没有涉及像多媒体处理,特殊传感器的处理,你都可以通过ionic打包成apk或ios应用,不用改写或者改写小部分代码。这是多么神奇哈!

阅读(6618)

ionic中文javascript API(1)

4

chalecao 发布于 2014-08-11

ionic除了提供css框架以外,参看ionic中文详解CSS组件,还是提供了javascript UI库。许多组件都是需要通过javascript来产生比较炫的效果。ionic遵循了mvc的设计模式,这一点可以通过通过创建tab栏的官方例子项目来体会view之间的控制与切换。下面就是关于ionic的中文javascript API介绍。其实官方已经写的比较详细了,只是国内访问网速不好的地方,那个js菜单栏一直展不开,加载慢,所以自己做一个中文的,方便以后查找。 内容很长,参看: ionic中文javascript API(1) ionic中文javascript API(2) 教程索引:(持续更新) ionic中文教程

阅读(2621)

ionic中文详解CSS组件(1)

34

chalecao 发布于 2014-08-09

本来不想写这个的,因为毕竟官网已经列的很详细了css component,国内的网络由于种种原因,有时候右边并不会显示一个手机框用于展示效果。我这里将一些相关组件的介绍合在一起,给出综合例子和显示效果,方便自己查阅。另外官网的JS API介绍文档有问题,国内访问不能跳转,请参考我的另一篇ionic中文javascript API.

阅读(6540)