用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空间设计得好...)
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,不管是后台还是后端。
注:博主最近肉翻到了新西兰,想在这边工作一段时间。由于时差问题,所以一般的事情就直接在群里问就好了...
用ionic快速开发hybird App(已附源码,在下面+总结见解)的更多相关文章
- 微信小程序版博客——开发汇总总结(附源码)
花了点时间陆陆续续,拼拼凑凑将我的小程序版博客搭建完了,这里做个简单的分享和总结. 整体效果 对于博客来说功能页面不是很多,且有些限制于后端服务(基于ghost博客提供的服务),相关样式可以参考截图或 ...
- 【网站国际化必备】Asp.Net MVC 集成Paypal(贝宝)快速结账 支付接口 ,附源码demo
开篇先给大家讲段历史故事,博主是湖北襄阳人.襄阳物华天宝,人杰地灵,曾用名襄樊.在2800多年的历史文化中出现了一代名相诸葛亮(卧龙),三国名士庞统(凤雏),魏晋隐士司马徽(水镜先生),唐代大诗人孟浩 ...
- 3.NetDh框架之缓存操作类和二次开发模式简单设计(附源码和示例代码)
前言 NetDh框架适用于C/S.B/S的服务端框架,可用于项目开发和学习.目前包含以下四个模块 1.数据库操作层封装Dapper,支持多种数据库类型.多库实例,简单强大: 此部分具体说明可参考博客: ...
- cesium 入门开发系列地图鹰眼功能(附源码下载)
前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 结合 leaflet 实现 ...
- 基于S2SH开发学生考勤管理系统 附源码
开发环境: Windows操作系统开发工具:Eclipse+Jdk+Tomcat+mysql数据库 运行效果图 源码及原文链接:http://javadao.xyz/forum.php?mod=vie ...
- 基于Struts2+Hibernate开发小区物业管理系统 附源码
开发环境: Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+MySql数据库 运行效果图: 源码及原文链接:https://javadao.xyz/forum.php?mo ...
- 用GO语言开发editplus编辑器插件(附源码)
我要开发的插件功能极为简单,就是对用户选中的内容进行base64编码或解密工作. 其中所涉及的技术部分主要是GO语言程序开发和editplus插件配置的部分,首先我们来看一下GO语言代码的写法,如下: ...
- Cordova+ionic 开发hybird App --- 开发环境搭建
Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...
- 基于vuecli3构建一个快速开发h5 APP的模板
基于vuecli3构建的一个快速开发h5 APP的模板,集成了高德地图.mint-ui,以及antv-f2可视化框架 vue-cli3安装 查看vue cli版本 vue --version 要求no ...
随机推荐
- LEETCODE —— Binary Tree的3 题 —— 3种非Recursive遍历
Binary Tree Preorder Traversal Given a binary tree, return the preorder traversal of its nodes' valu ...
- requestAnimationFrame
(function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.lengt ...
- unity行为树制作AI简单例子(1)
用行为树来制作AI是非常方便的,今天就给大家简单介绍一下行为树的强大之处. 所用插件 Behavior Designer v1.421 最开始 我使用过Rain插件,不过用过Behavior Desi ...
- creature_template
entry 生物唯一编号 modelid_A 联盟模型ID,参考creature_model_info modelid_A2 同上 modelid_H 部落模型ID,参考creature_model_ ...
- OpenGL渲染管线
OpenGL渲染管线具有一系列顺序处理阶段.两个图形信息数据,顶点数据与像素数据,在管线中被处理.组合,最终写入帧缓存.注意,OpenGL可以将处理过的数据送回到你的程序中.(参考灰色区域) Open ...
- 【总结】matlab求两个序列的相关性
首先说说自相关和互相关的概念. 自相关 在统计学中的定义,自相关函数就是将一个有序的随机变量系列与其自身作比较.每个不存在相位差的系列,都与其都与其自身相似,即在此情况下,自相关函数值最大. 在信号 ...
- ExtJs 学习之开篇(二) Observable 给类添加监听
html:代码 DOCTYPE html><html><head><meta charset="UTF-8"><title>I ...
- [Linux] - CentOS 安装nginx
linux版本:CentOS 6.0+ 安装nginx方法: 1.下载nginx rpm包命令: wget http://nginx.org/packages/centos/6/noarch/RPMS ...
- JVM--标记-清除算法Mark-Sweep
前言 垃圾自动回收机制的出现使编程更加的简单,使得我们不需要再去考虑内存分配和释放的问题,而是更加的专注在我们产品功能的实现上.但是我们还是需要花时间去了解下垃圾收集机制是怎么工作的,以便后面能够更好 ...
- Windows消息机制详解
消息是指什么? 消息系统对于一个win32程序来说十分重要,它是一个程序运行的动力源泉.一个消息,是系统定义的一个32位的值,他唯一的定义了一个事件,向 Windows发出一个通知,告诉应用 ...