See the Pen by
列表是一个应用广泛在几乎所有移动app中的界面元素，可以包含的内容范围从基本文字到按钮，开关，图标和缩略图在内所有内容。
包含列表项的列表以及列表项自身都可以是任何的HTML元素。容器元素需要list类，并且每个列表项需要item类。
然而，使用ionList和ionItem可以很容易的支持各种交互方式，比如，滑动编辑，拖动排序，以及删除项。
相关阅读: ,
&ion-list&
&ion-item ng-repeat=&item in items&&
Hello, {{item}}!
&/ion-item&
&/ion-list&
高级用法: 缩略图，删除按钮，重新排序，滑动
&ion-list ng-controller=&MyCtrl&
show-delete=&shouldShowDelete&
show-reorder=&shouldShowReorder&
can-swipe=&listCanSwipe&&
&ion-item ng-repeat=&item in items&
class=&item-thumbnail-left&&
&img ng-src=&{{item.img}}&&
&h2&{{item.title}}&/h2&
&p&{{item.description}}&/p&
&ion-option-button class=&button-positive&
ng-click=&share(item)&&
&/ion-option-button&
&ion-option-button class=&button-info&
ng-click=&edit(item)&&
&/ion-option-button&
&ion-delete-button class=&ion-minus-circled&
ng-click=&items.splice($index, 1)&&
&/ion-delete-button&
&ion-reorder-button class=&ion-navicon&
on-reorder=&reorderItem(item, $fromIndex, $toIndex)&&
&/ion-reorder-button&
&/ion-item&
&/ion-list&
delegate-handle
该句柄定义带有的列表。
show-delete
列表项的删除按钮当前是显示还是隐藏。
show-reorder
列表项的排序按钮当前是显示还是隐藏。
列表项是否被允许滑动显示选项按钮。默认：true。ionic 自动更新APP - Ionichina
这家伙很懒，什么个性签名都没有留下。
发布于 2年前
24363 次浏览
一、准备工作
　　1.Cordova插件：
　　　　cordova plugin add
// 获取APP版本
　　　　cordova plugin add org.apache.cordova.file // 文件系统
　　　　cordova plugin add org.apache.cordova.file-transfer //文件传输系统
　　　　cordova plugin add
//文件打开系统
　　2.AngularJS Cordova插件
二、相关代码，app.js
.run(['$ionicPlatform', '$rootScope','$ionicActionSheet', '$timeout','$cordovaAppVersion', '$ionicPopup', '$ionicLoading','$cordovaFileTransfer', '$cordovaFile', '$cordovaFileOpener2', function ($ionicPlatform, $rootScope,$ionicActionSheet, $timeout,
$cordovaAppVersion, $ionicPopup, $ionicLoading, $cordovaFileTransfer, $cordovaFile, $cordovaFileOpener2) {
$ionicPlatform.ready(function ($rootScope) {
// 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();
//检测更新
checkUpdate();
document.addEventListener(&menubutton&, onHardwareMenuKeyDown, false);
function onHardwareMenuKeyDown() {
$ionicActionSheet.show({
titleText: '检查更新',
buttons: [
{ text: '关于' }
destructiveText: '检查更新',
cancelText: '取消',
cancel: function () {
// add cancel code..
destructiveButtonClicked: function () {
//检查更新
checkUpdate();
buttonClicked: function (index) {
$timeout(function () {
hideSheet();
// 检查更新
function checkUpdate() {
var serverAppVersion = &1.0.0&; //从服务端获取最新版本
//获取版本
$cordovaAppVersion.getAppVersion().then(function (version) {
//如果本地于服务端的APP版本不符合
if (version != serverAppVersion) {
showUpdateConfirm();
// 显示是否更新对话框
function showUpdateConfirm() {
var confirmPopup = $ionicPopup.confirm({
title: '版本升级',
template: '1.&/br&2.&/br&3.&/br&4.xxxxxx', //从服务端获取更新的内容
cancelText: '取消',
okText: '升级'
confirmPopup.then(function (res) {
if (res) {
$ionicLoading.show({
template: &已经下载：0%&
var url = &http://192.168.1.50/1.apk&; //可以从服务端获取更新APP的路径
var targetPath = &file:///storage/sdcard0/Download/1.apk&; //APP下载存放的路径，可以使用cordova file插件进行相关配置
var trustHosts = true
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts).then(function (result) {
// 打开下载下来的APP
$cordovaFileOpener2.open(targetPath, 'application/vnd.android.package-archive'
).then(function () {
}, function (err) {
$ionicLoading.hide();
}, function (err) {
alert('下载失败');
}, function (progress) {
//进度，这里使用文字显示下载百分比
$timeout(function () {
var downloadProgress = (progress.loaded / progress.total) * 100;
$ionicLoading.show({
template: &已经下载：& + Math.floor(downloadProgress) + &%&
if (downloadProgress & 99) {
$ionicLoading.hide();
// 取消更新
上面是一个简单实现方式，一些数据都在这里写死了，你可以将一些数据从服务端获取，比如最新版本号，最新版的下载路径，这里提供一个思路。
项目地址：
只需执行ionic build android即可
+1，也可以在存放apk的地方，添加一个xml文件，里面记载新版本的version和info，这样就不需要更新服务器端，app解析xml就可以了；现在还有一种做法是不更新apk，只更新其中的www/的文件
只更新www/怎么做到？这样是不是就能绕过apple store 审核了？
可以使用cordova-app-loader插件进行实现的，只更新需要更新的文件，不需要更新整个APP
是的，这样子版本更新就不会再等待审核了，现在很多ios上的游戏都是这样子，但不知道是不是这样子实现
求插件地址
很多是类似lua的脚本，不过苹果新的政策已经禁止这种方式升级了，不知道html这边之后苹果会不会采取什么限制
这种应该可以吧，启动先检查更新后才进入index页面
弱弱的问一句，从代码看，好象是针对ANDROID的，IOS的也适用这份代码吗？如果不适用，能否给个思路或示例？多谢。
没做过ios开发，很抱歉
ios的更新是不用下载安装的，最多只能做到提示有新版本，用户需要自行到appstore下载更新
我看到有的IOS软件的升级是这样子的，APP内有菜单，版本升级，一按这个菜单，它会检查有无新版本，如果有新版本，就一下跳到APPSTORE上软件新版本那个界面去了。 不知这个功能如何实现？
嗯，有可能是链接跳转，因为APPSTORE软件好象是一个超级链接的地址
这个其实很简单，就是通过审核后，会有一个固定的appstore的链接，然后你的代码里面设置就行了
感觉分享经验，目前比较合适的升级方案是：只更新www 和app全部更新配合使用。常规更新使用cordova-app-loader或ionic-deploy,需要更新plugin的时候使用楼主提供的这种方式。
cordova-app-loader可以支持版本回退吗？我看了下ionic-deploy可以支持回退，但是更新的时候必须www全部更新，不像cordova-app-loader可以只更新部分文件。
ps：ionic-deploy可以不走ionic.io,可以自己搭更新的服务器。
ionic-deploy不走ionic.io,自己搭更新的服务器怎么搞？有文档吗？
不错的分享，谢谢！
这边有个参考 ，服务端自己搭一个。
不错。之前是想找这样的解决方案的。谢谢分享。
使用 ionic 更新插件可以完成，可以参考
你好，这个插件我用的时候貌似有点问题，你有时间指导我一下不？谢谢了
这个是我qq
apk是gzip格式的，$cordovaFileTransfer无法读取gzip格式的文件的大小，所以progress.total 一直为0。
On both Android an iOS, lengthComputable is false for downloads that use gzip encoding.
可以在的最下面找到这句话。
+1，很好，谢谢分享
你好,我用你这个demo做了,下,但是我的app报错,是抱code:3的一个错误,请问怎么解决
服务器赞助商为
存储赞助商为
，由提供应用性能服务。大话调试学习前端，最基本的首先要学会调试。特别是js调试，当然我们做网页，都习惯用chrome或者firebug做调试，的确提供了不少便利。但是我们如今用js开发编译手机APP的时候，调试就显得无力了。皓眸哥我很少调试代码的，基本都是从错误原因反推定位可能出错的地方，基本上想一想就能解决。但是，难免会遇到一些神不知、鬼不觉的情况，比如版本冲突，类库冲突，等等没有报错，但就是不正确的情况，这时候真的需要调试一把。怎么办呢，看皓眸哥有哪些办法？
教程索引：(持续更新)
转载请注明出处：
APP调试关于ionic编译APP项目调试，其实没有特别好的方法，对于界面，我们可以通过浏览器直接调试，然而对于功能性的问题，调试就不是那么方便了。有两种方法可以做：
使用cordova提示控件，比如dialog，toast等等使用控制台打印到Android的logcat中比较推荐第二种方法来做，这样我们不管是用Android虚拟机还是真机调试，只要连接上logcat就可以查看调试信息。但是目前官方还没有提供这样的插件，我们下面就结合ionic插件开发的教程，和你一块编写一个console插件，插件中提供log方法，这样你安装这个插件之后，调试android应用时可以通过console.log方法将调试信息输出到logcat中。上面说的两种方法都属于离线调试的方法，如果你希望能像在浏览器中一行一行的调试代码，这几乎是不可能的。所以目前只有上面的方法调试。
插件开发关于插件开发，请移步 ionic插件开发
指定android版本如何指定编译的android版本，也就是API Level？修改项目下的 platforms/android/project.properties和platforms/android/CordovaLib/project.properties中的target=android-19 即可。修改成你想要的版本，前提是你已经安装了对应的api版本的sdk ，否则编译会出错
谢谢！转载请注明出处：
有问题请留言。T_T
皓眸大前端开发学习$ionicBackdrop
显示和隐藏UI上的背景，popups，loading，和其他覆盖层形式出现。
通常，多个UI组件需要一个背景，但是只有一个背景经常需要同时在DOM中。
因此，每个组件都需要显示背景，当它需要背景时，调用$ionicBackdrop.retain()，然后，当完成时，调用 $ionicBackdrop.release()。
每次retain被调用时，背景会显示出来直到调用release。
比如，如果 retain被调用三次，背景就会显示，知道release被调用三次。
function MyController($scope, $ionicBackdrop, $timeout) {
//一秒显示一个背景
$scope.action = function() {
$ionicBackdrop.retain();
$timeout(function() {
$ionicBackdrop.release();
保留背景。
释放背景。$ionicSideMenuDelegate
授权控制指令。
该方法直接触发$ionicSideMenuDelegate服务，来控制所有侧栏菜单。用方法控制特定情况下的ionSideMenus。
&body ng-controller=&MainCtrl&&
&ion-side-menus&
&ion-side-menu-content&
&button ng-click=&toggleLeftSideMenu()&&
切换左侧侧栏菜单
&/ion-side-menu-content&
&ion-side-menu side=&left&&
&ion-side-menu&
&/ion-side-menus&
function MainCtrl($scope, $ionicSideMenuDelegate) {
$scope.toggleLeftSideMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
toggleLeft([isOpen])
切换左侧侧栏菜单（如果存在）。
是否打开或关闭菜单。默认：切换菜单。
toggleRight([isOpen])
切换右侧侧栏菜单（如果存在）。
是否打开或关闭菜单。默认：切换菜单。
getOpenRatio()
获取打开菜单内容超出菜单宽度的比例。比如，一个宽度为100px的菜单被宽度为50px以50%的比例打开，将会返回一个比例值为0.5。
浮点 0 表示没被打开，如果左侧菜单处于已打开或正在打开为0 到 1，如果右侧菜单处于已打开或正在打开为0 到-1。
布尔值无论左侧或右侧菜单是否已经打开。
isOpenLeft()
布尔值左侧菜单是否已经打开。
isOpenRight()
布尔值右侧菜单是否已经打开。
canDragContent([canDrag])
设置是否可以拖动内容打开侧栏菜单。
布尔值是否可以拖动内容打开侧栏菜单。
$getByHandle(handle)
delegateInstance一个代表性的实例是用delegate-handle只控制指令来匹配指定的句柄。
例如: $ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();