用ionic快速开发hybird App(已附源码,在下面+总结见解)

时间:2021-04-12 19:12:15

用ionic快速开发hybird App(已附源码,在下面+总结见解)

1.ionic简介

ionic 是用于敏捷开发APP的解决方案。核心思路是:利用成熟的前端开发技术,来写UI和业务逻辑。也就是说,就是一个H5网站,这个区别于react-native,native。即是:“写一次,到处运行”。

从去年到现在,也是红得发紫,很多APP相继喷薄而出,至今也见过学多做得非常好的APP,当然,是指在iOS的机器上体验到的。android不敢恭维。

简介参见官网:
http://cordova.apache.org/http://ionicframework.com/ ionic其实是cordova的升级版,所以在使用的时候,很多命令都是相似的,而且,涉及到插件的开发,也是使用cordova的命令,具体开发后面介绍。

2.ionic安装

安装教程也非常简单,几条命令,可能会让人奔溃的,就是GWF。
我能提供的解决思路,就是:cnpm(淘宝镜像等镜像方式),vpn.vps.甚至肉身*..... 然后get start:http://ionicframework.com/getting-started/

3.ionic初步使用调试,源码查看:https://github.com/wfxiaolong/ionic-social-app 觉得有帮助的话,记得star.

1.如果ionic run 出来了 hello world那么恭喜你,可以考虑看下面的内容了.(还没到这步的同学,就只能快速当做小说一样的看下面的东西了)
2.接下来,要做的,就是常规的学习方式,看文档。遵循原生的CSS,JS组件,一些特别的provide,看着官网的一些小例子,甚至别人写得代码,然后参考着运行。就可以快速写出好看的界面,以及处理一些基本的逻辑了,加上网络请求,写两个小接口,登陆注册用户系统来一套,商品电商来一套....然后xxx,当当当的,不到两天,一个小应用就出来了。下面的图片演示:(长得好看,大部分是因为ionic的自带的UI空间设计得好...)

用ionic快速开发hybird App(已附源码,在下面+总结见解)用ionic快速开发hybird App(已附源码,在下面+总结见解)用ionic快速开发hybird App(已附源码,在下面+总结见解)用ionic快速开发hybird App(已附源码,在下面+总结见解)

3.调试:
读者可以试一下命令行:ionic serve -lc,这是ionic提供的一种调试模式。也就是:-l -c. 原话是:You can always run it from the command line using the live-reload and console flag.
a.在web端的效果会变成:

用ionic快速开发hybird App(已附源码,在下面+总结见解)

非常的性感!

b.如果是android机器,运行:ionic run android -lc.会发现android上面的web页面变成的远程电脑上地址。意味着你可以直接改代码,然后andorid上面会动态更新页面(即自动执行刷新F5),其实都是对代码的监控和watchman一样的逻辑。轮询...这个功能真的太方便了!!!天啊,我之前还笨笨的自己电脑搭建一个web serve,然后手动修改工程目录下的route文件,利用自带的路径拦截(route的装饰器模式)重定向所有的资源请求....
c.iOS的真机事实调试上:哈哈,反正我没在真机上成功过,模拟器一直没有更新...已经跳过。但是这里可以使用一种取巧的方式:就是直接用UC浏览器,二维码扫描上面的运行ionic run android -lc后生成的URL...调试UI也是没有问题的...
d.还有官网推荐的两种奇怪的(一点都不好用)真机调试方式:chrome 和safari的开发工具,搜搜设备,同一局域网下动态监听web内容... 如果掌握了上面的调试模式,写ionic项目将会变得非常平躺,舒服!不管是哪个平台!

 4.ionic进阶:插件开发,源码参考:https://github.com/wfxiaolong/ionic-plugin-damaiwechat

前言:ionic的插件开发是挺烦人的.如果你想自己开发插件,一定要认真看完下面的教程。
官方教程:http://ngcordova.com/docs/install/ https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html#plugin
这里就可以直白的看出来,ionic是继承自cordova的......
先直接上简单的开发教程,读者按照下面的步骤,都可以开发出一个hello world的插件:
1.使用plugman工具生成模板代码:
  a.install plugman
  b.plugman create --name helloWord --plugin_id com.plugin.helloWorld --plugin_version 1.0.0  //生成插件
会快速生成下面的目录结构:

│- plugin.xml     // 插件的配置脚本,可以实现各种操作,例如xcode plist中添加type,项目中添加lib等各种操作,甚至提示<info>什么的..
├─src         // android以及iOS工程文件的存放目录
└─www
  │-helloWord.js  // 暴露出来,在ionic上使用的直接接口
  c.plugman platform add --platform_name ios       //src目录下生成iOS插件的代码(就一个.m文件...)    
  d.plugman platform add --platform_name android     //src目录下生成android插件的代码(还是一个源码文件...) 2.修改helloWord.js文件
var exec = require('cordova/exec');
var helloWorld = {
  // echo接口,msg为传入的参数,success, error为回调函数
  echo : function(msg, success, error) {
    exec(success, error, "helloWorld", "echo", [msg]);
  }
}; window.hello = helloWorld; 注意:这里直接把对象直接赋值到window上,其实是为了:1.调试调用方便 2.ngcordova不会每次都自动创建一个factory...
官方的做法:是直接放到exports上的...

 3.分别修改java和xcode文件中的代码...(这里不在解释.插件的开发本来就是需要有原生开发经验的.具体可以对比查看上面的插件源码)

4.cordova plugin add xxx(把插件通过绝对路劲直接引用,可以放在github上,git地址引用...)

5.代码中引用...

6.我自己开发了一个插件:继承支付宝以及微信支付,还有友盟社会会组件(分享,认证登陆功能)的插件...也开发了一个星期左右,android是找的另一个同学开发的...

  用ionic快速开发hybird App(已附源码,在下面+总结见解)(运行后的官方效果图...)

5.前端的修改

这一部分想讲的东西太多了,例如css使用scss? 异步加载requireJS? 抑或是js中的解耦?页面复用?......
东西挺多的,一个一个讲了。 1.使用scss,是因为可以让css支持各种花式写法,能更加具有可读性性。加上一些工具压缩打包:http://koala-app.com/
能快速的满足业务逻辑需求,多快好省的完成各种花式页面,例如,一元夺宝电商什么的? 2.使用ionic框架后,为了避免初始化的时候加载太多东西,我们可以用requireJS异步加载一些资源.
等到使用的时候才去加载显示出来,当然,程序使用一段时间后,资源还是不能释放的。
这是前端的问题,毕竟是网页,可做各种优化。例如少用图片。复用dom(这也是reactjs做的最大的优化,虚拟dom树)等等... 3.页面的复用以及js的解耦。我会将每个页面都独立分开来控制,用单独的js来写。每个js单独一个controler.而不是全部写在一个js文件中,官网的毕竟只是demo。
这样的好处就是代码管理会方便直观很多,提高移植性,便于复用。
例如,一些内容展示页面,结构是一样的,只是内容文字不同。如果有多个页面的时候,我们一般可以直接根据传入的url的加上一个变量来判断。
但是,如果页面还是有很多逻辑不同的话,我们至少还是可以复用html页面的。根据自己定制的路由规则来决定。我一般会连js文件都复用了。
亦或者是一些工具类,util方法,至少不用再多造*。有时候甚至是控件也能多写一些,写成一些小的html,然后直接用。虽然我也觉得是奇怪的写法,但是很多人会这么做。真奇怪。 4.补充一条,关于jQuery lite. ionic毕竟是不推荐使用jQuery的,推荐响应式的写法。但是有时候jQuery使用还是挺方便的,所以引入了一个轻量级jQuery.
其实还是有一些人不习惯,喜欢用jQuery(其实在一些业务逻辑下,使用还是更加方便的,而且一些UI库都是依赖jQuery的写法)这里推荐用zepto.比jQury轻量,更加适用于移动端。
但是基本的功能都有的。 5.还有其它各种优化也好,写法等等,各位读者需要自己敢于尝试去探索了...毕竟学无止境...

6.绘制冰山图

ionic框架就像一座冰山,浮在水面上的10%看起来并不危险,最终让你船毁人亡的是隐藏在下面的那90%。

实际上更合适的一个比喻是,学习ionic框架就像对一座冰山绘图。

为了使用框架你必须学会框架里所有的内容,花精力去把所有的内容对应到传统的UI原生适配,甚至于是原生代码的辅助改写!

这个过程对于开发者的个人能力要求比较高,甚至于全栈化趋势,有时候会略显得不偿失。

从长期来看这个过程毫无意义,因为冰山最终都会融化。我已经准备跳出这个坑,敬而远之......

注.如果有遇到问题的同学:欢迎加QQ群讨论学习:238911405
可以联系我,一起交流,
找我做外包都可以,质量用APP Store分类商品 排行第一的APP来保证....不管是原生的,还是hybird APP,不管是后台还是后端。

注:博主最近肉翻到了新西兰,想在这边工作一段时间。由于时差问题,所以一般的事情就直接在群里问就好了...