文档章节

ionic实践教程

java_speed
 java_speed
发布于 2015/04/04 18:00
字数 782
阅读 448
收藏 15

不准备做原生开发,就一直研究各种混合开发的框架,各种对比之后确定ionic框架,主要有几点理由:

  1. 漂亮的界面(基本就是模仿ios的UI来开发的)
  2. 入门简单,基本上根据官方提示,很快就进入demo
  3. 集成cordova简单(好像cordova官方说ionic贡献不少)
  4. 基本iOS和Android没什么差别
  5. 基本UI控件齐全
  6. 社区支持很到位。

ionic,http://ionicframework.com/ ,官方对他的定位是:HTML5前端混合框架(不是取代PhoneGap)。入门介绍可以直接参考官网,这里说一下,各种最佳实践。

工具

个人建议使用这个 HBuilder, http://www.dcloud.io/ ,功能绝对强过WebStorm,遗憾的是:妈的需要注册,而且密码居然是明文的,另外没有Linux发行版。但比较强大就忍了。

初始化

首先确定你的app大致框架,确定采用哪种模板,主要有blank、sidemenu、tabs三个模板

ionic start MyApp sidemenu # 我主要采用sidemenu来导航



修改您的项目信息,如app中文名、描述、作者等等
vi config.xml # 基本上一眼就能看出来哪些信息需要你重新改



修改iOS和Android可能在显示上不一致的地方,基本参考 http://ionicframework.com/docs/api/provider/$ionicConfigProvider/ ,我主要修改sidemenu title对齐问题,checkbox样式、tabs上下问题
vim www/js/app.js

.config(function($ionicConfigProvider, $stateProvider, $urlRouterProvider) {

    $ionicConfigProvider.form.checkbox("circle");
    $ionicConfigProvider.form.toggle("large");
    $ionicConfigProvider.tabs.position("bottom");
    $ionicConfigProvider.tabs.style("standard");



对齐问题:
<!-- 就是导航条居中对齐 -->

<ion-nav-bar class="bar-positive" no-tap-scroll="true" align-title="center">



浏览器测试

# 浏览器测试(默认iOS的样子)
ionic serve 
# 浏览器测试(iOS和Android同时测试)
ionic serve --lab


# iOS/Android 环境配置
# Android需要按照Android虚拟机,并创建4.2以上版本的模拟机
# iOS需要Xcode环境
ionic platform add ios/android
ionic run ios/android



几点建议

  1. 先看看别人踩过的坑:https://github.com/my101du/ionic-babythings
  2. iOS CORS跨域不行,没办法只能jsonp
  3. 尽量搞个Mac,提高工作效率
  4. iOS“无痕模式”不能写localstorage数据,这个只能提示用户不能使用
    # 在app就绪的时候提示,www/js/app.js
    
    
    .run(function($ionicPlatform) {
    	$ionicPlatform.ready(function() {
    		// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    		// for form inputs)
    		if (window.cordova && window.cordova.plugins.Keyboard) {
    			cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    		}
    		if (window.StatusBar) {
    			// org.apache.cordova.statusbar required
    			StatusBar.styleDefault();
    		}
    		
    		try {
    			window.localStorage.isBrowser = ionic.Platform.platforms[0] === 'browser';
    		} catch (_) {
    			alert("本地储存写入错误,请关闭“隐身模式”或“无痕浏览”。");
    		}
    	});
    })



  5. iOS真机测试,尽量搞个开发者账号,实在不行淘宝一个“开发者证书”,这样可以真机测试
    ionic build ios # 编译出xcode工程



  6. 根据《ionic action》一书说,如果ionic的某个组件在CSS和api中都有,请优先选用css
  7. 更改绑定IP
     
    ionic address # 重新选择绑定IP



PS:

附上我的网站:印象网盘搜索的Android版下载地址,iOS由于没开发者账号不发布。

Android: http://dl.impress.pw/impress-search.apk

wap: http://mobile.impress.pw 

样子基本一模一样。



© 著作权归作者所有

共有 人打赏支持
java_speed
粉丝 110
博文 44
码字总数 17031
作品 1
成都
程序员
Tonge/TongeNewsApp

注:此项目服务器已经关闭,接口已无法使用。 ###前言 这是一个系列文章,从环境搭建开始讲解,包括网络数据请求,将持续更新到项目完结。实战开发中遇到的各种问题的解决方案,也都将毫无保...

Tonge
2016/11/10
0
0
前端教程

IONIC(基于angular) 教程: 菜鸟教程:http://www.runoob.com/ionic/ionic-tutorial.html NPM: 1、安装依赖:npm install -g ionic cordova 2、创建项目:ionic start myIonicApp IONIC2......

jason_wu_2
2016/10/11
18
0
ionic-native-transitions让html5开发的app和原生一样快

Ionic(ionicframework)一款接近原生的Html5移动App开发框架 会html css js就可以开发跨平台的app 但是大家都知道 ionic在稍微低配置的android手机上面表现不是特别好。下面介绍的ionic-nat...

htzhanglong
2016/01/17
3.9K
2
Mobile first! Wijmo 5 + Ionic Framework之:Hello Wor

本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World。 Ionic是什么? Ionic是一个HTML5框架、免费、开源,用于帮助生成hybird mobile Apps (混合移动应用)。 Ioni...

葡萄城控件技术团队
2014/10/28
0
2
Angularjs ionic免费视频教程-html5微信wap跨平台app开发教程【免费】

【Angularjs ionic免费视频教程】html5微信wap跨平台app开发教程【免费】 IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开...

htzhanglong
2016/02/29
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

可爱的python测试开发库(python测试开发工具库汇总)

欢迎转载,转载请注明来源: github地址 谢谢点赞 本文地址 相关书籍下载 测试开发 Web UI测试自动化 splinter - web UI测试工具,基于selnium封装。 链接 selenium - web UI自动化测试。 链...

python测试开发人工智能安全
今天
2
0
Shiro | 实现权限验证完整版

写在前面的话 提及权限,就会想到安全,是一个十分棘手的话题。这里只是作为学校Shiro的一个记录,而不是,权限就应该这样设计之类的。 Shiro框架 1、Shiro是基于Apache开源的强大灵活的开源...

冯文议
今天
1
0
linux 系统的运行级别

运行级别 运行级别 | 含义 0 关机 1 单用户模式,可以想象为windows 的安全模式,主要用于修复系统 2 不完全的命令模式,不含NFS服务 3 完全的命令行模式,就是标准的字符界面 4 系统保留 5 ...

Linux学习笔记
今天
2
0
学习设计模式——命令模式

任何模式的出现,都是为了解决一些特定的场景的耦合问题,以达到对修改封闭,对扩展开放的效果。命令模式也不例外: 命令模式是为了解决命令的请求者和命令的实现者之间的耦合关系。 解决了这...

江左煤郎
今天
3
0
字典树收集(非线程安全,后续做线程安全改进)

将500W个单词放进一个数据结构进行存储,然后进行快速比对,判断一个单词是不是这个500W单词之中的;来了一个单词前缀,给出500w个单词中有多少个单词是该前缀. 1、这个需求首先需要设计好数据结...

算法之名
昨天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部