IonicFramework入门总结

update@2014-12-29

在用ionic开发一个app,中间遇到了各种小问题,总结下来利人利己。


  1. 环境搭建
  2. 开始一个项目
  3. 遇到的问题和解决方法
  4. 参考资料


1 环境搭建

我是在mac下开发的,使用命令行操作,首先去nodejs.org下载mac下的nodejs并安装。然后执行下面的命令

cd ${HOME} && mkdir appdev && cd appdev

sudo npm install -g ionic

sudo npm install -g cordova

下载android-sdk,将android可执行文件的路径加到PATH变量里,编辑/etc/profile文件,将如下内容写入,注意修改成自己的路径

PATH=$PATH:${HOME}/Downloads/android-sdk-macosx/tools

执行android,打开android sdk manager,选中Android4.4.2(API 19),然后安装.建议使用vpn,这样安装会快很多,推荐vpnonly

执行下面的命令安装ant

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install ant

2 开始一个项目

通过执行下面的命令你可以快速开始一个新项目

cd ${HOME}/appdev/

ionic start demo tabs

在浏览器里打开和调试项目

ionic serve

在ios或者andorid模拟器中打开项目

ionic platform add ios

ionic platform add android

ionic emulate ios

ionic emulate android

3 遇到的问题和解决方法

3.1 执行ionic emulate ios, ios模拟器一直黑屏,在网上找到的解决方法如下。

cordova platform rm ios

cordova platform add ios

ionic emulate ios

3.2 执行ionic emulate android,编译时总报错,根据报错信息,报错的小箭头一直指着我的项目名,这时意识到可能是我的项目名前带有数字的原因,于是新建了一个项目,用全英文的项目名,问题解决

3.3 我添加了个登陆页面,怎么让app启动的时候直接到登陆页面呢?修改/path/to/your/project/www/js/app.js 中的 $urlRouterProvider.otherwise('login'); 这行,修改成登陆的state即可

3.4 执行ionic emulate ios 是看不到代码里console.info等打出的log的,要想看log可以执行 ionic run ios -l -c -s

3.5 后端是用RESTFUL写的api,直接用$http.get来调,一直不成功,换$resource,注意$resource是一个单独的js文件,需要单独加载

3.6 tab在android下显示在了上方,很不和谐,解决方法如下

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
    var androidConfig = {
        tabs: {
            style: 'standard',
            position: 'bottom'
        }
    };
    $ionicConfigProvider.setPlatformConfig('android',androidConfig);
});

3.7 因为需要将用户的登录信息保存起来,找到了window.localStorage这个东西,但是取值的时候总取不出来,最终发现了一个trick,用toJson和fromJson互转一下就可以了

window.localStorage.clear();
window.localStorage.global = angular.toJson({hehe: 'testme'});
var t = angular.fromJson(window.localStorage.global);
console.info(t,t.hehe);

3.8 js数组怎么在开头插入数据?新建一个数组,然后用concat拼接就行了

参考资料