用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.甚至肉身FQ.....然后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空间设计得好...)

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端的效果会变成:

非常的性感!

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是找的另一个同学开发的...

  (运行后的官方效果图...)

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,不管是后台还是后端。

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

posted on 2016-04-16 18:13 yanshanLove 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/Lxiaolong/p/5399008.html

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

  1. 多人对战小游戏快速开发实例分享(附源码)

    前言:该游戏项目主要是基于前端引擎Cocos Creator开发,涉及后端联网的部分,则通过接入Matchvs SDK完成快速开发工作. 准备工作:相关引擎工具引擎下载及指南 Matchvs Java ...

  2. 【Spring AOP】@Aspect结合案例详解(二): @Pointcut使用@within和within(已附源码)

    文章目录 前言 @within 完善打印日志案例 @within深入说明 within 匹配指定类 匹配指定包(package) 源码下载 总结 前言 在微服务流行的当下,在使用Spring Clou ...

  3. .Net6.0快速开发平台3.4新版源码(教程运行视频齐全),net敏捷开发

    .Net6.0快速开发平台3.4新版源码(教程运行视频齐全),net敏捷开发,全网最新有演示,报表设计,大屏设计,流程设计,实时通讯,动态表单,日程管理,APP端,双端代码生成全部具备,是你接外包的利 ...

  4. MultiRow发现之旅(六)- 使用MultiRow开发票据应用(附源码)

    前文回顾 MultiRow发现之旅(一)- 高效模板设计器 MultiRow发现之旅(二)- 详解属性管理器 MultiRow发现之旅(三)- 模板管理器和Table MultiRow发现之旅(四)- ...

  5. 暑期Android游戏开发——小兔子跳铃铛(附源码)

    暑期Android游戏开发--小兔子跳铃铛(附源码) 一. 背景说明 我在南京的一所高校学习软件工程.学院里每年会举行一次"创新杯"软件比赛,鼓励同学自主学习和创新.我和几个好兄弟 ...

  6. 航空机票APP的设计与实现【AS开发+SQLITE】【附源码】

    航空机票APP的设计与实现[附源码] 演示 学长带你飞之 航空机票小app 1 背景及意义 在信息技术和网络技术不断发展的当前社会,航空公司赖以生存的根本是提升自己的服务,只有以客户为本,企业才能保证 ...

  7. CTP接口开发案例(内附源码)

    CTP接口开发(内附源码) 提示:在看本博客之前建议先阅读上期所官方的开发文档(SimNow官网中去下载CTP接口文件),然后在SimNow官网注册模拟账号. 提示:股票CTP接口和期货CTP接口类似 ...

  8. Netty实战:Springboot+Netty+protobuf开发高性能服务器 (附源码下载)

    Springboot-cli 开发脚手架系列 Netty系列:Springboot使用Netty集成protobuf开发高性能服务器 文章目录 Springboot-cli 开发脚手架系列 简介 1. ...

  9. 测速源码_物联网之智能平衡车开发实战项目(附源码)

    自从上次分享了"适合练手的10个前端实战项目(附源码)"之后,很多小伙伴就私信问有没有物联网相关的实战项目教程,那么今天就给大家分享一个物联网工作初期经常接触的项目:智能平衡车开发 ...

最新文章

  1. 你可能不知道的Shell
  2. python初始化方法对应的变量是全局变量嘛_在Python中初始化全局变量的正确方法...
  3. 程序员基本功09 线性表
  4. ADO.NET常用命名空间
  5. AOP 详解 、AOP 中通知类型 、AOP 两种实现方式(Schema-base 和 AspectJ)
  6. 薪资不如 Java、C,BAT 需求大,揭秘 Python 程序员跳槽现状!
  7. 电脑办公技巧:他做了9小时的工作,我5秒就做完了
  8. 【IOS-COCOS2D游戏开发之十九】游戏数据存储的四种常用方式NSKEYEDARCHIVER/NSUSERDEFAULTS/WRITE写入/SQLITE3...
  9. 函数执行的作用域问题
  10. 冒泡排序超详细讲解C语言
  11. WP7手机Zune官方升级教程
  12. rnn--重新温习实现MNIST手写体识别
  13. 苹果appstore审核等待很长时间的解决方案
  14. 雅虎、领英接连退出中国,开发者:GitHub 也会受到影响吗?
  15. j2ee与j2se对比
  16. 免费在线条码二维码识别
  17. 产业“上链”至深处,京东云如何作为?
  18. 带符号整数中负数采用什么编码_转载:二进制编码--负数
  19. 九、奈氏准则和香农定理
  20. wszystkie hoopery Buty Adidas Crazy BYW sklep

热门文章

  1. idea从gitlab拉项目到本地_Git入门-基础命令,用github免费服务器域名部署小项目...
  2. 查看oracle连接数的消耗情况
  3. linux java程序启动脚本
  4. python tqdm进度条打印
  5. pxe装机dhcp获取不到_小白三步装机版重装系统
  6. 国二c语言操作题评分标准,全国计算机二级C语言操作题题库.doc
  7. php7连接oracle数据库,使用一个持久连接连到 Oracle 数据库 - PHP 7 中文文档
  8. ai如何旋转画布_「AI教程」使用AI制作3D立体文字效果
  9. sparkSQL 统计TopN
  10. java高并发(十三)并发容器J.U.C--AQS