{"id":13750205,"url":"https://github.com/my101du/ionic-babythings","last_synced_at":"2025-05-09T15:31:50.967Z","repository":{"id":23695463,"uuid":"27067454","full_name":"my101du/ionic-babythings","owner":"my101du","description":"A cross-platform(iOS,Android) APP based on ionic framework and AngularJS","archived":false,"fork":false,"pushed_at":"2018-09-19T03:43:43.000Z","size":2331,"stargazers_count":276,"open_issues_count":0,"forks_count":91,"subscribers_count":23,"default_branch":"v2","last_synced_at":"2024-11-16T02:32:47.958Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/my101du.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-24T08:37:17.000Z","updated_at":"2024-07-24T09:02:34.000Z","dependencies_parsed_at":"2022-08-22T04:10:44.424Z","dependency_job_id":null,"html_url":"https://github.com/my101du/ionic-babythings","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/my101du%2Fionic-babythings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/my101du%2Fionic-babythings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/my101du%2Fionic-babythings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/my101du%2Fionic-babythings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/my101du","download_url":"https://codeload.github.com/my101du/ionic-babythings/tar.gz/refs/heads/v2","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253275609,"owners_count":21882336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T08:00:23.767Z","updated_at":"2025-05-09T15:31:50.242Z","avatar_url":"https://github.com/my101du.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","And A Bunch More! (I am in the process of sorting these)"],"sub_categories":[],"readme":"# 关于\r\r--------------------------------------------------------------   \r使用HTML5和CSS来开发手机应用，一直是广大前端开发者的理想，并且已经有不少解决方案了。例如\r- PhoneGap（用javascript来调用设备原生API）\r- JQuery Mobile（UI库）\r- Titanium（混合方式）\r- AppCan（国产的开发工具）\r\rIonic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。\r\r\u003c!-- more --\u003e\r\r[资源](http://learn.ionicframework.com/resources/)\r[案例展示](http://showcase.ionicframework.com/)\r[实例](http://ionicframework.com/examples/)\r\r\r# 快速开始\r\r--------------------------------------------------------------\r## 安装环境\r\r首先应该安装好 node.js (略)，然后安装cordova、ionic等\r```bash\rsudo npm install -g cordova ionic ios-sim\r```\r## 创建不同类型的项目\r\r目前可以用blank，tabs，sidemenu三种\r```bash\rionic start myApp tabs\r```\r\r## 常用插件\r\rcordova plugin add com.ionic.keyboard \u0026\u0026\rcordova plugin add org.apache.cordova.console \u0026\u0026\rcordova plugin add org.apache.cordova.device \u0026\u0026\rcordova plugin add org.apache.cordova.device-motion \u0026\u0026\rcordova plugin add org.apache.cordova.file \u0026\u0026\rcordova plugin add org.apache.cordova.file-transfer \u0026\u0026\rcordova plugin add org.apache.cordova.geolocation \u0026\u0026\rcordova plugin add org.apache.cordova.inappbrowser \u0026\u0026\rcordova plugin add org.apache.cordova.network-information \u0026\u0026\rcordova plugin add org.apache.cordova.splashscreen \u0026\u0026\rcordova plugin add org.apache.cordova.camera \u0026\u0026\rcordova plugin add com.google.cordova.admob\r\r## 测试运行\r\r```bash\rcd myApp\rionic platform add ios\rionic build ios\rionic emulate ios #会打开ios的模拟器\rionic run andoird #真机测试，需要先platform add andoird和build android\rionic serve #也可以先在浏览器里看效果，如果chrome安装了livereload插件，可以实现代码编辑时界面即时变化\r```   \r\r## 直接编辑IOS或Android工程   \r\r可以直接用xcode或其他IDE来编辑 /platforms/xxxx/ 下的工程，但要注意的是，应该以项目根目录下的 /www/ 文件为主，而不要编辑/platforms/ios/www/ 里的文件。\r运行下面的命令会自动用 /www/ 覆盖 /platforms/ios/www 里的文件\r```bash\rcordova prepare ios\r```\r\rwww文件夹结构与文件分析\r\r\r开发项目\r\r\r发布应用\r在生成之前，去掉不需要的插件\r```bash\rcordova plugin rm org.apache.cordova.console \r```\r发布到android\r\u003capplication android:debuggable=\"true\" android:hardwareAccelerated=\"true\" android:icon=\"@drawable/icon\" android:label=\"@string/app_name\"\u003e\r未完\r签名。\r\r\r\r# 常用/关键代码\r\r-------------------------------------------------------------- \r## sidemenu布局\r\r框架主界面 menu.html\r```html\r\u003cion-side-menus\u003e\r \r  \u003cion-pane ion-side-menu-content\u003e\r    \u003cion-nav-bar class=\"bar-positive nav-title-slide-ios7\" animation=\"no-animation\"\u003e\r      \u003cion-nav-back-button class=\"button-clear\"\u003e\u003ci class=\"icon ion-ios7-arrow-back\"\u003e\u003c/i\u003e 返回\u003c/ion-nav-back-button\u003e\r    \u003c/ion-nav-bar\u003e\r    \u003cion-nav-view name=\"menuContent\" animation=\"slide-left-right\"\u003e\u003c/ion-nav-view\u003e\r  \u003c/ion-pane\u003e\r \r  \u003cion-side-menu side=\"left\"\u003e\r    \u003cheader class=\"bar bar-header bar-light\"\u003e\r      \u003ch1 class=\"title\"\u003e导航\u003c/h1\u003e\r    \u003c/header\u003e\r    \u003cion-content class=\"has-header\"\u003e\r      \u003cdiv class=\"list\"\u003e\r        \u003cdiv class=\"item item-divider\"\u003e更多\u003c/div\u003e\r        \u003ca class=\"item item-icon-left\" nav-clear menu-close ng-href=\"#/app/setting\"\u003e\r          \u003ci class=\"icon ion-android-settings\"\u003e\u003c/i\u003e\r          设置\r        \u003c/a\u003e\r      \u003c/div\u003e\r \r    \u003c/ion-content\u003e\r  \u003c/ion-side-menu\u003e\r\u003c/ion-side-menus\u003e\r```\r关键：\r1. 页面整体用`\u003cion-side-menus\u003e`容器包裹\r2. 主界面容器用`\u003cion-pane ion-side-menu-content\u003e`包裹，内部用`\u003cion-nav-view\u003e`来实现多个界面切换（ 注意这个属性name=\"menuContent\"在app.js的.state方法里使用）。\r3. 显示导航条`\u003cion-nav-bar\u003e` 和内部的`\u003cion-nav-back-button\u003e`返回按钮（默认只有在进入二级界面时才显示，在子页面模板里通过 `\u003cion-nav-buttons side=\"left\"\u003e`来“注入”一个“展开菜单”的按钮）\r4. 侧滑菜单容器用`\u003cion-side-menu side=\"left\"\u003e`包裹，side表示方向，注意内部的元素加上 nav-clear menu-close  属性，确保点击后会触发隐藏侧滑菜单\r5. 可以设置ion-nav-view的animation属性实现界面切换的动画效果（设为no-animation提高性能）\r\r然后在 `templates/` 目录里添加多个用于切换的模板文件，通过 `app.js` 里的路由来设置切换逻辑\r模板文件的标准格式为：（以一个带导航条按钮和底部tab的模板为例），如果是次一级的页面，不要添加 `ion-nav-buttons` 元素，系统会默认显示在 menu.html 里定义好了的 返回按钮\r```html\r\u003cion-view title=\"{{typeDetail.title}}\"\u003e\r\r  \u003cion-nav-buttons side=\"left\"\u003e\r    \u003cbutton menu-toggle=\"left\" class=\"button button-icon icon ion-navicon\"\u003e\u003c/button\u003e\r  \u003c/ion-nav-buttons\u003e\r\r  \u003cion-content class=\"has-header\"\u003e\r    内部\r  \u003c/ion-content\u003e\r \r  \u003cdiv class=\"tabs-top tabs-striped tabs-background-positive tabs-color-light\"\u003e\r    \u003cdiv class=\"tabs tabs-icon-top\"\u003e\r      \u003ca class=\"tab-item active\"\u003e\r        \u003ci class=\"icon ion-home\"\u003e\u003c/i\u003e\r        正在使用\r      \u003c/a\u003e\r    \u003c/div\u003e\r  \u003c/div\u003e\r \r\u003c/ion-view\u003e\r```\r\r## app.js 参考\r\r```javascript\r.config(function($stateProvider, $urlRouterProvider) {\r  $stateProvider\r\r    //主框架（侧滑菜单）\r    .state('app', {\r      url: \"/app\",\r      abstract: true,\r      templateUrl: \"templates/menu.html\",\r      controller: 'AppCtrl'\r    })\r\r    //物品详情\r    .state('app.item-detail', {\r      url: \"/itemDetail/:typeId/:itemId\",\r      views: {\r        'menuContent' :{\r          templateUrl: \"templates/itemDetail.html\",\r          controller: 'ItemDetailCtrl'\r        }\r      }\r    })\r```\r\r__注意`app.item-detail`页面__\r- 设置了url格式`url: \"/itemDetail/:typeId/:itemId\",`，表示可以可以传入两个参数，名称分别为typeId和itemId。\r- 在该页面对应的 controller `ItemDetailCtrl `中，可以通过`$stateParams.typeId`来获取参数的值；另外在html模板中，href要设置成类似`\u003ca  ng-href=\"#/app/itemDetail/{{typeDetail.id}}/{{item.id}}\"\u003e`格式，参数的位置要对应准确\r- `views`的 `menuContent` 键值，和模板`menu.html`中 `\u003cion-nav-view name=\"menuContent\"\u003e\u003c/ion-nav-view\u003e` ，ion-nav-view 的name属性值是对应、相等的。\r\r\r## service.js 参考\r\r用sublime text的angular自动完成插件，智能完成的 .factory 方法代码无法运行，必须按如下的格式\r\r```javascript\rangular.module('babyThings.services', [])\r.factory('Types', function() {\r  var types = [\r    {id: 1, title: '食品与喂养', icon: 'android-battery'},\r    {id: 3, title: '尿裤湿巾', icon: 'woman'},\r    {id: 4, title: '喂养用品', icon: 'woman'},\r  ];\r \r  return {\r    all:function(){\r      return types;\r    },\r    getLastActiveTypeIndex: function(){\r      return parseInt(window.localStorage['lastActiveTypeIndex']) || 0;\r    },\r    setLastActiveTypeIndex: function(index){\r      window.localStorage['lastActiveTypeIndex'] = index;\r    },\r    getTypeDetail: function(typeid){\r      return types[typeid-1];\r    },\r    allDefault: function() {\r      var projectString = window.localStorage['projects'];\r      if(projectString) {\r        return angular.fromJson(projectString);\r      }\r      return [];\r    },\r    newProject: function(projectTitle) {\r      // Add a new project\r      return {\r        title: projectTitle,\r        tasks: []\r      };\r    },\r  };\r})\r```\r\r注意`newProject `的return，返回了一个比较复杂一点的对象。`allDefault `还处理了默认返回空数组。\r\r## controllers.js参考\r\r__controller参考__\r```javascript\rangular.module('babyThings.controllers', [])\r.controller('ItemsCtrl', function($scope, $stateParams, Types, Items) {\r  var storedTypeId= Types.getLastActiveTypeIndex();\r \r  var selectTypeId = $stateParams.typeId;\r  console.log('typeid:', selectTypeId);\r \r  $scope.typeDetail = Types.getTypeDetail(selectTypeId);\r  $scope.items = Items.getItemsOfType(selectTypeId);\r \r})\r```\r在浏览器控制台输出参数`console.log('typeid:', selectTypeId);`\r读取url里传递过来的参数 `var selectTypeId = $stateParams.typeId;`，参数名在 app.js 里和 ng-href=\"\" 里要名称对应（见后面）\r\r__定时消失的modal对话框__\r```javascript\r.controller('AppCtrl', function($scope, $ionicModal, $timeout, Types) {\r  // Form data for the login modal\r  $scope.loginData = {};\r\r  // Create the login modal that we will use later\r  $ionicModal.fromTemplateUrl('templates/login.html', {\r    scope: $scope\r  }).then(function(modal) {\r    $scope.modal = modal;\r  });\r\r  // Triggered in the login modal to close it\r  $scope.closeLogin = function() {\r    $scope.modal.hide();\r  };\r\r  // Open the login modal\r  $scope.login = function() {\r    $scope.modal.show();\r  };\r\r  // Perform the login action when the user submits the login form\r  $scope.doLogin = function() {\r    console.log('Doing login', $scope.loginData);\r\r    // Simulate a login delay. Remove this and replace with your login\r    // code if using a login system\r    $timeout(function() { \r      $scope.closeLogin();\r    }, 1000);\r  };\r})\r```\r\r## 一些关键代码\r\r### 跨域解决\r\r服务器端CORS（php为例，注意不要有代码错误，如果代码错了，下面的跨域处理会无效）\rheader(\"Access-Control-Allow-Origin: *\");\recho json_encode($data);\r\rionic内可以用$.ajax（jQuery），也可以用$http.get来发出请求\r\r# 颜色、图标、padding、动画\r\r--------------------------------------------------------------  \r按钮、toggle、footer、导航条背景等可以通过修改class来实现几种通用的颜色\r\r可赋予颜色的元素，以蓝色 `positive`为例\r- Tab背景 class=\"tab tabs-top tabs-background-positive\"\r- 按钮、toggle 颜色 class=\"button button-positive\",  class=\"toggle toggle-assertive\"\r- 数值拉动条 class=\"item range range-positive\"\r- 顶部/底部通栏条 class=\"bar bar-header  bar-positive\"（或 bar-footer）\r- 文本/链接字颜色 class=\"item positive\" \r\r__颜色后缀__\r- 不带任何后缀   默认\r- light   白色\r- stable 浅灰色\r- positive 蓝色\r- calm 青色\r- balanced 绿色\r- energized 黄\r- assertive 橙/红\r- royal 紫\r- dark 黑\r\r__图标__\r显示方式：通过 `\u003ci class=\"icon ion-[图标名称]\"\u003e\u003c/i\u003e` 来显示\r\r图标名称来源\r1. 打开 [ionicon的图标库页面](http://ionicons.com/) ，点击页面里的图标找到名称\r2. 还可以下载上面页面里的 ionicons-1.5.2.zip 压缩包，解压后找到里面的 png/512 对着文件名来修改\r\r__padding__\r可以为元素增加padding\rpadding\rpadding-vertical\rpadding-horizontal\rpadding-top Adds\rpadding-right\rpadding-bottom\rpadding-left\r\r__动画效果__\rfade-in\rnav-title-slide-ios7\rno-animation\rreverse\rslide-in-left\rslide-in-right\rslide-in-up\rslide-left-right-ios7\rslide-left-right\rslide-out-left\rslide-out-right\rslide-right-left-ios7\rslide-right-left\r\r# 样式\r\r--------------------------------------------------------------  \r## 头部与底部\r\r头部带大标题，可修改颜色\r\r```html\r\u003cdiv class=\"bar bar-header\"\u003e\r  \u003ch1 class=\"title\"\u003ebar-assertive\u003c/h1\u003e\r\u003c/div\u003e\r```\r\r子头部（在头部下面）\r\r```html\r\u003cdiv class=\"bar bar-subheader\"\u003e\r  \u003ch2 class=\"title\"\u003eSub Header\u003c/h2\u003e\r\u003c/div\u003e\r```\r\r底部/底部带按钮、标题，如果只有一个居右的按钮，需要给button的class添加一个pull-right属性\r```html\r\u003cdiv class=\"bar bar-footer\"\u003e\r  \u003cbutton class=\"button button-clear\"\u003eLeft\u003c/button\u003e\r  \u003cdiv class=\"title\"\u003eTitle\u003c/div\u003e\r  \u003cbutton class=\"button button-clear\"\u003eRight\u003c/button\u003e\r\u003c/div\u003e\r```\r\r## 按钮\r\r```html\r\u003cbutton class=\"button\"\u003ebutton\u003c/button\u003e\u003c!--普通，添加 button-[颜色] 实现不同色彩 --\u003e\r\u003cbutton class=\"button button-block\"\u003ebutton\u003c/button\u003e\u003c!--有padding的全宽按钮--\u003e\r\u003cbutton class=\"button button-full\"\u003ebutton\u003c/button\u003e\u003c!--无padding的全宽按钮--\u003e\r\u003cbutton class=\"button button-small\"\u003ebutton\u003c/button\u003e\u003c!--尺寸不同的按钮 button-large--\u003e\r\u003cbutton class=\"button button-outline\"\u003ebutton\u003c/button\u003e\u003c!--只有边框色，无背景色--\u003e\r\u003cbutton class=\"button button-clear\"\u003ebutton\u003c/button\u003e\u003c!--只显示文本，没有边框和背景的干净按钮--\u003e\r\u003cbutton class=\"button icon-left ion-home\"\u003ebutton\u003c/button\u003e\u003c!--带图标、文本的按钮，ion-chevron-left，ion-chevron-right用于显示一个小箭头--\u003e\r\u003cbutton class=\"button icon ion-navicon\"\u003e\u003c/button\u003e\u003c!--放在bar-header中的头部导航按钮--\u003e\r\u003cbutton class=\"button icon ion-gear-a\"\u003e\u003c/button\u003e\u003c!--纯图标，没有文本的按钮（但有边框）--\u003e\r\u003ca class=\"button button-icon icon ion-settings\"\u003e\u003c/a\u003e\u003c!--纯图标，且没有边框--\u003e\r\u003cdiv class=\"button-bar\"\u003e\u003ca class=\"button\"\u003eFirst\u003c/a\u003e\u003ca class=\"button\"\u003eSecond\u003c/a\u003e\u003c/div\u003e\u003c!--按钮组--\u003e\r```\r\r## 列表\r\r普通列表（无padding）通过`\u003cdiv class=\"list\"\u003e`容器来包裹\r有padding和边框的list，通过`\u003cdiv class=\"list list-inset\"\u003e`容器包裹\r有“卡片”的边框阴影效果的list，通过`\u003cdiv class=\"list card\"\u003e`容器包裹\r\r```html\r\u003cdiv class=\"item item-divider\"\u003e  \u003c!--不同组列表项之间的分割条--\u003e\r\u003ca class=\"item\" href=\"#\"\u003eButterfinger \u003c/a\u003e \u003c!--普通--\u003e\r\u003ca class=\"item item-icon-left\" href=\"#\"\u003e\u003ci class=\"icon ion-email\"\u003e\u003c/i\u003eText \u003c/a\u003e \u003c!--带左侧图标--\u003e\r\u003ca class=\"item item-icon-left item-icon-right\" href=\"#\"\u003e\u003ci class=\"icon ion-email\"\u003e\u003c/i\u003eText \u003ci class=\"icon ion-email\"\u003e\u003c/i\u003e\u003c/a\u003e \u003c!--带左侧、右侧两个图标--\u003e\r\u003ca class=\"item item-icon-left\" href=\"#\"\u003e\u003ci class=\"icon ion-email\"\u003e\u003c/i\u003eText \u003cspan class=\"item-note\"\u003enote\u003c/span\u003e\u003c/a\u003e \u003c!--带左侧图标、右侧灰色文本--\u003e\r\u003ca class=\"item item-icon-left\" href=\"#\"\u003e\u003ci class=\"icon ion-email\"\u003e\u003c/i\u003eText \u003cspan class=\"badge badge-assertive\"\u003e0\u003c/span\u003e\u003c/a\u003e \u003c!--带左侧图标、右侧彩色badge--\u003e\r\u003cdiv class=\"item item-button-right\"\u003eCall Me \u003cbutton class=\"button button-positive\"\u003e\u003ci class=\"icon ion-ios7-telephone\"\u003e\u003c/i\u003e\u003c/button\u003e\u003c/div\u003e\u003c!--带右侧按钮--\u003e\r\u003ca class=\"item item-avatar\" href=\"#\"\u003e\u003cimg src=\"venkman.jpg\"\u003e\u003ch2\u003eVenkman\u003c/h2\u003e \u003cp\u003eBack off, man. I'm a scientist.\u003c/p\u003e\u003c/a\u003e\u003c!--头像/用户名/简介列表外观--\u003e\r\u003ca class=\"item item-thumbnail-left\" href=\"#\"\u003e\u003cimg src=\"venkman.jpg\"\u003e\u003ch2\u003eVenkman\u003c/h2\u003e \u003cp\u003eBack off, man. I'm a scientist.\u003c/p\u003e\u003c/a\u003e\u003c!--缩略图/用户名/简介列表外观 可改为right--\u003e\r```\r\r\r## 卡片（边框有阴影效果）\r\r下面的例子可以去掉头部和底部，只保留中间部分的文本\r\r```html\r\u003cdiv class=\"card\"\u003e\r  \u003cdiv class=\"item item-divider\"\u003e  I'm a Header in a Card! \u003c/div\u003e\r  \u003cdiv class=\"item item-text-wrap\"\u003e\r    This is a basic Card with some text.\r  \u003c/div\u003e\r  \u003cdiv class=\"item item-divider\"\u003e  I'm a Footer in a Card! \u003c/div\u003e\r\u003c/div\u003e\r```\r\r漂亮的大图片card效果（顶部有个item-avatar的的item，底部有个彩色带图标的item）\r实际上来自于list和card的结合改造\r\r```html\r\u003cdiv class=\"list card\"\u003e\r \r  \u003cdiv class=\"item item-avatar\"\u003e\r    \u003cimg src=\"avatar.jpg\"\u003e\r    \u003ch2\u003ePretty Hate Machine\u003c/h2\u003e\r    \u003cp\u003eNine Inch Nails\u003c/p\u003e\r  \u003c/div\u003e\r \r  \u003cdiv class=\"item item-image\"\u003e\r    \u003cimg src=\"cover.jpg\"\u003e\r  \u003c/div\u003e\r \r  \u003ca class=\"item item-icon-left assertive\" href=\"#\"\u003e\r    \u003ci class=\"icon ion-music-note\"\u003e\u003c/i\u003e\r    Start listening\r  \u003c/a\u003e\r \r\u003c/div\u003e\r```\r\r中间有图、文本结合，底部有功能按钮(如分享)的复杂card，可用于文章显示\r\r```html\r\u003cdiv class=\"list card\"\u003e\r \r  \u003cdiv class=\"item item-avatar\"\u003e\r    \u003cimg src=\"mcfly.jpg\"\u003e\r    \u003ch2\u003eMarty McFly\u003c/h2\u003e\r    \u003cp\u003eNovember 05, 1955\u003c/p\u003e\r  \u003c/div\u003e\r \r  \u003cdiv class=\"item item-body\"\u003e\r    \u003cimg class=\"full-image\" src=\"delorean.jpg\"\u003e\r    \u003cp\u003e\r      This is a \"Facebook\" styled Card. The header is created from a Thumbnail List item,\r      the content is from a card-body consisting\r    \u003c/p\u003e\r    \u003cp\u003e \u003ca href=\"#\" class=\"subdued\"\u003e1 Like\u003c/a\u003e \u003ca href=\"#\" class=\"subdued\"\u003e5 Comments\u003c/a\u003e \u003c/p\u003e\r  \u003c/div\u003e\r \r  \u003cdiv class=\"item tabs tabs-secondary tabs-icon-left\"\u003e\r    \u003ca class=\"tab-item\" href=\"#\"\u003e \u003ci class=\"icon ion-thumbsup\"\u003e\u003c/i\u003e  Like \u003c/a\u003e\r    \u003ca class=\"tab-item\" href=\"#\"\u003e \u003ci class=\"icon ion-chatbox\"\u003e\u003c/i\u003e Comment \u003c/a\u003e\r  \u003c/div\u003e\r \r\u003c/div\u003e\r```\r\r## 表单\r\r实际上也是用`\u003cdiv class=\"list\"\u003e`来包裹的，为表单添加缩进和边框`\u003cdiv class=\"list list-inset\"\u003e`\r\r__输入框input、textare__\r```html\r\u003clabel class=\"item item-input\"\u003e\u003cinput type=\"text\" placeholder=\"First Name\"\u003e\u003c/label\u003e\u003c!--普通输入框，没有左侧文本label--\u003e\r\u003clabel class=\"item item-input\"\u003e\u003cspan class=\"input-label\"\u003eUsername\u003c/span\u003e\u003cinput type=\"text\u003e\u003c/label\u003e\u003c!--普通输入框，左侧有文本label--\u003e\r\u003clabel class=\"item item-input item-stacked-label\"\u003e\u003cspan class=\"input-label\"\u003eUsername\u003c/span\u003e\u003cinput type=\"text\u003e\u003c/label\u003e\u003c!--文本label在上，输入框在下--\u003e\r\u003clabel class=\"item item-input  item-floating-label\"\u003e\u003cspan class=\"input-label\"\u003eUsername\u003c/span\u003e\u003cinput type=\"text\u003e\u003c/label\u003e\u003c!--默认文本label在上，但不显示，输入框在下，输入文本后label出现--\u003e\r```\r__特殊的外观__\r```html\r\u003c!--图标label--\u003e\r\u003cdiv class=\"list list-inset\"\u003e\r  \u003clabel class=\"item item-input\"\u003e\r    \u003ci class=\"icon ion-search placeholder-icon\"\u003e\u003c/i\u003e\r    \u003cinput type=\"text\" placeholder=\"Search\"\u003e\r  \u003c/label\u003e\r\u003c/div\u003e\r \r\u003c!--输入框放入item的内部（有个背景色的“块”，而不是前面的“融合”），并可以添加按钮等元素--\u003e\r\u003cdiv class=\"list\"\u003e\r  \u003cdiv class=\"item item-input-inset\"\u003e\r    \u003clabel class=\"item-input-wrapper\"\u003e\r      \u003cinput type=\"text\" placeholder=\"Email\"\u003e\r    \u003c/label\u003e\r    \u003cbutton class=\"button button-small\"\u003e\r      Submit\r    \u003c/button\u003e\r  \u003c/div\u003e\r\u003c/div\u003e\r \r\u003c!--bar顶部的搜索框，把上面代码的list和item容器改为bar即可--\u003e\r\u003cdiv class=\"bar bar-header item-input-inset\"\u003exxxxx\u003c/div\u003e\r```\r\r__toggle__\r```html\r\u003cli class=\"item item-toggle\"\u003e\r     HTML5\r     \u003clabel class=\"toggle toggle-assertive\"\u003e\r       \u003cinput type=\"checkbox\"\u003e\r       \u003cdiv class=\"track\"\u003e\r         \u003cdiv class=\"handle\"\u003e\u003c/div\u003e\r       \u003c/div\u003e\r     \u003c/label\u003e\r  \u003c/li\u003e\r``` \r\r__checkbox__\r```html\r\u003cli class=\"item item-checkbox\"\u003e\r     \u003clabel class=\"checkbox\"\u003e\r       \u003cinput type=\"checkbox\"\u003e\r     \u003c/label\u003e\r     Flux Capacitor\r  \u003c/li\u003e\r```\r \r__radio__\r```html\r\u003clabel class=\"item item-radio\"\u003e\r    \u003cinput type=\"radio\" name=\"group\"\u003e\r    \u003cdiv class=\"item-content\"\u003e\r      Go\r    \u003c/div\u003e\r    \u003ci class=\"radio-icon ion-checkmark\"\u003e\u003c/i\u003e\r  \u003c/label\u003e\r```\r\r__range__\r```html\r\u003cdiv class=\"item range range-positive\"\u003e\r    \u003ci class=\"icon ion-ios7-sunny-outline\"\u003e\u003c/i\u003e\r    \u003cinput type=\"range\" name=\"volume\" min=\"0\" max=\"100\" value=\"33\"\u003e\r    \u003ci class=\"icon ion-ios7-sunny\"\u003e\u003c/i\u003e\r  \u003c/div\u003e\r```\r\r## tab\r\r最完整的顶部、底部都有tab。\r可调整的项目：\r- 不使用icon的纯文本tab\r- 不使用文本的纯图标tab\r- icon方向在左边 `\u003cdiv class=\"tabs tabs-icon-left\"\u003e`，上方是 top（默认）\r\r```html\r\u003cdiv class=\"tabs-striped tabs-top tabs-background-positive tabs-light\"\u003e\r    \u003cdiv class=\"tabs\"\u003e\r      \u003ca class=\"tab-item active\" href=\"#\"\u003e\r        \u003ci class=\"icon ion-home\"\u003e\u003c/i\u003e Test \r    \u003c/a\u003e\r      \u003ca class=\"tab-item\" href=\"#\"\u003e\r        \u003ci class=\"icon ion-star\"\u003e\u003c/i\u003e Favorites \r    \u003c/a\u003e\r    \u003c/div\u003e\r  \u003c/div\u003e\r  \u003cdiv class=\"tabs-striped tabs-background-dark tabs-color-assertive\"\u003e\r    \u003cdiv class=\"tabs\"\u003e\r      \u003ca class=\"tab-item active\" href=\"#\"\u003e\r        \u003ci class=\"icon ion-home\"\u003e\u003c/i\u003e  Test\r      \u003c/a\u003e\r      \u003ca class=\"tab-item\" href=\"#\"\u003e\r        \u003ci class=\"icon ion-star\"\u003e\u003c/i\u003e  Favorites\r      \u003c/a\u003e\r    \u003c/div\u003e\r  \u003c/div\u003e\r```\r\r## Grid\r\r好像只有几种标准的比例数字 10,20,25,33,50,67,75,80,90\r```html\r\u003cdiv class=\"row\"\u003e\r  \u003cdiv class=\"col col-33 col-offset-67\"\u003e.col\u003c/div\u003e\r\u003c/div\u003e\r```\r\r多个col的对齐设置，可为top、center、bottom\r```html\r\u003cdiv class=\"row row-bottom\"\u003e\r  \u003cdiv class=\"col\"\u003e.col\u003c/div\u003e\r  \u003cdiv class=\"col\"\u003e.col\u003c/div\u003e\r  \u003cdiv class=\"col\"\u003e.col\u003c/div\u003e\r  \u003cdiv class=\"col\"\u003e1\u003cbr\u003e2\u003cbr\u003e3\u003cbr\u003e4\u003c/div\u003e\r\u003c/div\u003e\r```\r\rResponsive Grid\r没看懂。\r\r## 自定义扩展样式\r\r在开发中经常用到一些ionic没有提供的样式\r\r#### 左侧avatar和大小标题，右侧图标/按钮的列表项\r如果右侧是图标\r\u003e![](http://itjiaoshou.qiniudn.com/image/mobile/ionic_style_item_avatar_icon.png)\r\r```html\r    \u003ca class=\"item item-avatar-left item-icon-right\"\u003e\r            \u003cimg ng-src=\"img/item_icons/naifen.png\"\u003e\r            \u003cdiv\u003e\r                \u003ch2\u003e美素佳儿3段\u003c/h2\u003e\r                \u003cp\u003e喂养-奶粉 还能用 3 天\u003c/p\u003e\r            \u003c/div\u003e\r            \u003ci class=\"icon ion-ios7-cart\"\u003e\u003c/i\u003e\r        \u003c/a\u003e\r```\r\r如果右侧是按钮\r\u003e![](http://itjiaoshou.qiniudn.com/image/mobile/ionic_style_item_avatar_button.png)\r\r将上面部分代码改成`\u003ca class=\"item item-avatar-left item-button-right\"\u003e` 和 `\u003cbutton classs=\"button button-clear\u003e按钮\u003c/button\u003e`\r\r#### 左侧大小标题，右侧文本标签的列表项（以及强制左右分离的处理）\r\u003e![](http://itjiaoshou.qiniudn.com/image/mobile/ionic_style_item_title_right_badge.png)\r\r```html\r\u003ca class=\"item row\" ng-href=\"#/app/buyHistory\"\u003e\r\t\t\t\u003cspan class=\"col\"\u003e\r\t\t\t\t\u003ch2\u003e2014年7月5日\u003c/h2\u003e\r\t\t\t\t\u003cp\u003e婴唯爱母婴店 帮宝适 XXL\u003c/p\u003e\r\t\t\t\u003c/span\u003e\r\t\t\t\u003cspan class=\"badge badge-positive\"\u003e324元\u003c/span\u003e\r\t\t\u003c/a\u003e\r```\r\r# 技巧\r\r## 如何让tab在某些页面里隐藏\r\rhttp://stackoverflow.com/questions/23991852/how-do-i-hide-the-tabs-in-ionic-framework\r\r下面的方法有问题，会导致黑屏\rI know that this is answered already, but there's a more \"angular way\" of doing this that might be helpful. It's done by using a custom directive that you can apply on views that you don't want to show the bottom tab bar.\r\rMy solution to this on my app was:\r\r1 - Use ng-hide binded to a rootScope variable on the tab bar, so I can hide/show it in any Controller/View of my app:\r\r\u003cion-tabs ng-hide=\"$root.hideTabs\" class=\"tabs-icon-only\"\u003e\r    \u003c!-- tabs --\u003e\r\u003c/ion-tabs\u003e\r2 - Create a custom directive that, when present, will hide the tab bar (and will show the tab bar again when the view is destroyed/dismissed:\r\rvar module = angular.module('app.directives', []);\rmodule.directive('hideTabs', function($rootScope) {\r    return {\r        restrict: 'A',\r        link: function($scope, $el) {\r            $rootScope.hideTabs = true;\r            $scope.$on('$destroy', function() {\r                $rootScope.hideTabs = false;\r            });\r        }\r    };\r});\r3 - Apply it to specific views that don't need the tab bar visible:\r\r\u003cion-view title=\"New Entry Form\" hide-tabs\u003e\r    \u003c!-- view content --\u003e\r\u003c/ion-view\u003e\rps: I think this can be improved even further avoiding the need of the ng-hide on the \u003cion-tabs\u003e declaration, letting the directive do all the \"dirty work\".\r\r\r# 问题\r\r--------------------------------------------------------------    \r## 在ionic platform add ios时提示“no such file or directory '/xxxxxxxxx/plugins/ios.json'”\r\r运行\r```bash\rsudo rm -rf platforms\rsudo mkdir plugins\rsudo ionic platform add ios\r```\r## 运行 ionic emulate ios 报错，改用 ios-sim 命令来启动模拟器\r\r#### 错误摘要\r\r\u003eios-sim[8517:168747] stderrPath:……\r……\rUsage of '--family' is deprecated in 3.x. Use --devicetypeid instead.\rUsage of '--retina' is deprecated in 3.x. Use --devicetypeid instead.\r过一段时间后提示 Simulator session timed out\r\r#### 解决步骤\r\r- 清空模拟器数据：\r打开模拟器，点击菜单 IOS Simulator - Reset Contents and Settings\r\r- 重装ios-sim \r```bash\rsudo npm uninstall -g ios-sim\rsudo npm install -g ios-sim\rsudo npm install -g ios-deploy #首先安装这个。可能不需要，在查资料实验的过程中发现有网友提到这个，就顺便安装了\r```\r\r- 删除 /platform/，重新添加 ios 和 build\r```bash\rrm -rf platforms\rsudo ionic platform remove ios\rsudo ionic platform add ios\rsudo ionic build ios\r```\r\r- 直接使用 ios-sim launch 命令启动app\r后来查到 [ios-sim的完整命令行说明](https://github.com/phonegap/ios-sim),\r以及网友遇到的 sudo 权限导致无法启动模拟器的问题 [phonegap/ios-sim \"Simulator session timed out\" error](https://github.com/phonegap/ios-sim/issues/15)\r记住，__千万不要使用 sudo __\r```bash\rios-sim launch platforms/ios/build/emulator/your_ionic.app\r```\r发现默认启动了 iPhone4S 模拟器\r\r- 手动指定iphone模拟器的型号/屏幕尺寸\r因为我不想使用 iPhone4S 模拟器的3.5寸屏幕来观察应用运行，又不知道怎么调整默认启动的模拟器为4寸的 5S，因此在模拟器管理界面里删掉了 4s 这个设备。\r后来发现  ios-sim 命令还有很多参数，其中 --devicetypeid  可以指定设备型号\r参考 [查看ios-sim支持的所有的设备型号字符串](http://stackoverflow.com/questions/25799403/ios-sim-command-to-start-iphone-6-or-ipad-6)\r我们选5s作为启动的模拟器，而且通过修改这个参数的值，随时可以切换不同的设备\r```bash\rios-sim showdevicetypes #会列出所有支持的设备型号字符串\rios-sim launch platforms/ios/build/emulator/tigtag_life.app --devicetypeid com.apple.CoreSimulator.SimDeviceType.iPhone-5s\r```\r为了方便，你可以把这段命令存为一个 sh 文件，便于快速启动\r```bash\recho 'ios-sim launch platforms/ios/build/emulator/tigtag_life.app --devicetypeid com.apple.CoreSimulator.SimDeviceType.iPhone-5 --retina' \u003e\u003e emulate.sh\rchmod +x emulate.sh #允许执行\r./emulate.sh #在需要启动模拟器的时候\r```\r希望 ionic 官方尽快解决  ionic emulate ios 命令报错的问题\r\r## ionic build android 报错\r\r在添加了系统变量\rANDROID_HOME\r/Applications/android-sdk-macosx/tools/\r以及解决ANT找不到问题后\rbrew update\rbrew install ant\r\r仍然报错找不到 ANDROID_HOME 目录或 android 命令，但直接运行android -list 命令又正常\r\r找到http://stackoverflow.com/questions/23960763/error-on-adding-platform-in-ionic-framework-on-windows\r```bash\r\u003evi .bash_profile\rexport ANDROID_HOME=/home/coutinho/android-sdk\rexport ANDROID_TOOLS=/home/coutinho/android-sdk/tools/ \rexport ANDROID_PLATFORM_TOOLS=/home/coutinho/android-sdk/platform-tools/\rPATH=$PATH:$ANDROID_HOME:$ANDROID_TOOLS:$ANDROID_PLATFORM_TOOLS:.\r```\r\r然后删除/platform/android目录，重新add和build即可\r\r## 真机环境下，图片无法加载\r\r把\u003cimg src=\"img/xxxx\" 改成  \u003cimg ng-src=\"img/xxxx\"即可\r\r## 安装和启动livereload server这个软件后，运行 ionic serve报错\r\r\u003e... Uhoh. Got error listen EADDRINUSE ...\rError: listen EADDRINUSE\r    at errnoException (net.js:904:11)\r    at Server._listen2 (net.js:1042:14)\r    at listen (net.js:1064:10)\r    at Server.listen (net.js:1138:5)\r    at Server.listen (/usr/local/lib/node_modules/ionic/node_modules/tiny-lr-fork/lib/server.js:138:15)\r    at Object.IonicTask.start (/usr/local/lib/node_modules/ionic/lib/ionic/serve.js:157:16) 略\r\r- 可以退出livereload软件，释放端口\r- 可以通过 ionic serve 8101 35739 指定端口\r\r## 生成包（product archive）后，使用organizer的验证/提交提示图标错误的问题\r\r主要是提示文件找不到，或itunes store 要求120x120图标的问题\r\r首先使用Appicon(从app store下载)或在线工具，生成所有文件（icons和splash screen）。\r\r删除原cordova自动在resources里生成的文件，替换\r\r在文件管理器里删除原来的文件（因为直接删掉了，变成红色），然后Add Files To,把新文件添加进去\r\r编辑 plist文件，修改原来的iphone和ipad图标、启动图\n\r```xml\r\u003cstring\u003eappicon.png\u003c/string\u003e\r    \u003ckey\u003eCFBundleIcons\u003c/key\u003e\r    \u003cdict\u003e\r      \u003ckey\u003eCFBundlePrimaryIcon\u003c/key\u003e\r      \u003cdict\u003e\r        \u003ckey\u003eCFBundleIconFiles\u003c/key\u003e\r        \u003carray\u003e\r            \u003cstring\u003eappicon@2x.png\u003c/string\u003e\r            \u003cstring\u003eappicon.png\u003c/string\u003e\r            \u003cstring\u003eappicon-Small.png\u003c/string\u003e\r            \u003cstring\u003eappicon-Small@2x.png\u003c/string\u003e\r            \u003cstring\u003eDefault.png\u003c/string\u003e\r            \u003cstring\u003eDefault@2x.png\u003c/string\u003e\r            \u003cstring\u003eappicon-72.png\u003c/string\u003e\r            \u003cstring\u003eappicon-72@2x.png\u003c/string\u003e\r            \u003cstring\u003eappicon-Small-50.png\u003c/string\u003e\r            \u003cstring\u003eappicon-Small-50@2x.png\u003c/string\u003e\r            \u003cstring\u003eDefault-Landscape.png\u003c/string\u003e\r            \u003cstring\u003eDefault-Landscape@2x.png\u003c/string\u003e\r            \u003cstring\u003eDefault-Portrait.png\u003c/string\u003e\r            \u003cstring\u003eDefault-Portrait@2x.png\u003c/string\u003e\r            \u003cstring\u003eappicon-60.png\u003c/string\u003e\r            \u003cstring\u003eappicon-60@2x.png\u003c/string\u003e\r            \u003cstring\u003eappicon-76.png\u003c/string\u003e\r            \u003cstring\u003eappicon-76@2x.png\u003c/string\u003e\r        \u003c/array\u003e\r        \u003ckey\u003eUIPrerenderedIcon\u003c/key\u003e\r        \u003cfalse/\u003e\r      \u003c/dict\u003e\r    \u003c/dict\u003e\r    \u003ckey\u003eCFBundleIcons~ipad\u003c/key\u003e\r    \u003cdict\u003e\r      \u003ckey\u003eCFBundlePrimaryIcon\u003c/key\u003e\r      \u003cdict\u003e\r        \u003ckey\u003eCFBundleIconFiles\u003c/key\u003e\r        \u003carray\u003e\r          \u003cstring\u003eappicon-Small.png\u003c/string\u003e\r          \u003cstring\u003eappicon-Small-50.png\u003c/string\u003e\r          \u003cstring\u003eappicon-76\u003c/string\u003e\r          \u003cstring\u003eappicon-60\u003c/string\u003e\r          \u003cstring\u003eappicon\u003c/string\u003e\r          \u003cstring\u003eappicon@2x\u003c/string\u003e\r          \u003cstring\u003eappicon-72\u003c/string\u003e\r          \u003cstring\u003eappicon-72@2x\u003c/string\u003e\r        \u003c/array\u003e\r        \u003ckey\u003eUIPrerenderedIcon\u003c/key\u003e\r        \u003cfalse/\u003e\r      \u003c/dict\u003e\r    \u003c/dict\u003e\r```\n\r\r在project 和 target 里把 code Sigining修改成发布版、配置文件等\r\rproduct-\u003escheme-\u003eedit scheme ,修改archive的名称，\r\r要上线的app必须application loader提交(先用Organizer的experot导出ipa)，用Organizer的submit，会进入prerelease\r\r\r## 应用被打回后（例如 APS服务权限未勾选）的一些问题\r\r最新的 itunes connect 用了一个叫“prerelease”，提交上去后，再次打包提交会提示二进制文件版本重复\r这个可以通过xcode修改应用的build 版本号（不用改version）来重新打包\r\r有时候修改了证书，重新生成发布配置文件（development和distribution）后，删除旧的发布配置文件后，无法向设备（如iphone）导入distribution发布配置文件（从而导致无法修改 project和target的code signing相关配置)\r这时候打开xcode的preference，account，viewDetails，点一下左下角刷新按钮，即可看到实际上已经导入了。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmy101du%2Fionic-babythings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmy101du%2Fionic-babythings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmy101du%2Fionic-babythings/lists"}