基于ionic1.7.16 & cordova 6.3.1
对应的ionic cli版本官方参考文档可以自己查找到
在npm安装的目录下ionic/README.md
C:\Users\Administrator\AppData\Roaming\npm\node_modules\ionic\README.md
发布签名版本
- 1.生成未签名版的apk -> android-release-unsigned.apk
ionic build --release android
- 2.生成签名文件 myapp.keystore
cd platforms\android\build\outputs\apk
keytool -genkey -v -keystore myapp.keystore -alias myapp.keystore -keyalg RSA -validity 20000
填写信息即可
- 3.使用签名文件给未签名的apk签名
myapp.keystore&生成未签名版的apk -> 生成签名的api
jarsigner -verbose -keystore myapp.keystore -signedjar android-release.apk android-release-unsigned.apk myapp.keystore
获取MD5签名
查看签名的MD5 （解压android-release.apk 取出META-INF 下的.RSA文件）
keytool -printcert -file MYAPP.RSA
证书指纹:
MD5: 6B:2B:83:81:18:E3:......
md5 小写 6b2b838118e3.....（秘钥需要转成小写去":",做微信cordova插件功能时需要配置）
自定义ionic默认css样式
安装编译scss所需依赖
npm install
ionic会添加gulp-sass等gulp插件
ionic setup sass
启动的时候会增加gulp任务,sass和watch
ionic serve
修改lib\ionic\scss_variables.scss
$calm: #11c1f3 !default;
再修改myapp/scss/ionic.app.scss
$calm: #11c1f3 !default;
----- save ok------
sass代码构建过程 参考作者：大猫Calvin
顺便扩展gulp任务 自定义style.scss
gulp.task('sass', function(done) {
// 再添加一个style.scss的配置
})；
gulp.src('./scss/style.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(cleanCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
自定义tabs 图标
以css background-image的方式实现
<ion-tabs class="tabs-icon-top tabs-color-active-calm">
<ion-tab title="首页" icon-off="cc_tab_pic cc_tab_off_1" icon-on="cc_tab_pic cc_tab_on_1" href="#/tab/home" style="">
<ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>
<ion-tab title="向导" icon-off="cc_tab_pic cc_tab_off_2" icon-on="cc_tab_pic cc_tab_on_2" href="#/tab/guide">
<ion-nav-view name="tab-guide"></ion-nav-view>
</ion-tab>
<ion-tab title="我的" icon-off="cc_tab_pic cc_tab_off_3" icon-on="cc_tab_pic cc_tab_on_3" href="#/tab/user">
<ion-nav-view name="tab-user"></ion-nav-view>
</ion-tab>
</ion-tabs>
// tabs
.cc_tab_pic {
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
&.cc_tab_off_1 {
background-image: url(../img/tabs/1.png);
}
&.cc_tab_on_1 {
background-image: url(../img/tabs/2.png);
}
&.cc_tab_off_2 {
background-image: url(../img/tabs/3.png);
}
&.cc_tab_on_2 {
background-image: url(../img/tabs/4.png);
}
&.cc_tab_off_3 {
background-image: url(../img/tabs/5.png);
}
&.cc_tab_on_3 {
background-image: url(../img/tabs/6.png);
}
}
登陆的做法
你要是愿意的话，可以在每个需要登录的页面中做未登录情况的处理，比如展示一些默认背景图片，登录提示等等，又由于ionic的路由会缓存曾经访问过的页面，所以当你登录成功后，需要去刷新这些被缓存的页面。可以使用如下代码
javascript 代码效果预览
1.每次进入页面前判断是否登录
$scope.$on("$ionicView.beforeEnter",function(){//每次进入页面前判断是否登录
//判断登录代码
});
监听页面进入事件，每次页面进入都判断当前是否已登录，来判断是否加载数据。或者用$ionicHistory.clearCache() 直接清除所有缓存。
2.每次进入页面前判断是否登录
最方便简单的方法，在.run 或者 .config 中监听state的变更事件，也就是在路由去加载每个页面之前就判断登录状态，来决定要不要加载该页面，还是跳转到登录页去。
javascript 代码效果预览
.run(function($ionicPlatform, $rootScope, $ionicHistory,$state) {
var needLoginView = ["myclass","mycomment","myfavorite","myquestion","orderlist"];//需要登录的页面state
$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams, options){
if(needLoginView.indexOf(toState.name)>=0&&!$rootScope.isLogin){//判断当前是否登录
$state.go("login");//跳转到登录页
event.preventDefault(); //阻止默认事件，即原本页面的加载
}
})});
这样只需要把所有需要登录的页面state名写入needLoginView 数组中，每次切换页面，就会自动判断是否要跳转到登录页面，并且登录页返回直接到当前页，减少很多麻烦。
$ionicModal 向左css动画 & 返回关闭Modal
官方的modal只有向上(slide-in-up)的动画
所以自己添加一个向左的slide-in-left
// ionic model ----增加slide-in-right 动画效果
.slide-in-right {
-webkit-transform: translateX(-100%);
transform: translateX(100%);
}
.slide-in-right.ng-enter,.slide-in-right > .ng-enter {
-webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
}
.slide-in-right.ng-enter-active,.slide-in-right > .ng-enter-active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-in-right.ng-leave,.slide-in-right > .ng-leave {
-webkit-transition: all ease-in-out 250ms;
transition: all ease-in-out 250ms;
}
.slide-in-left {
-webkit-transform: translateX(-100%);
transform: translateX(100%);
}
.slide-in-left.ng-enter,.slide-in-left > .ng-enter {
-webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
}
.slide-in-left.ng-enter-active,.slide-in-left > .ng-enter-active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-in-left.ng-leave,.slide-in-left > .ng-leave {
-webkit-transition: all ease-in-out 250ms;
transition: all ease-in-out 250ms;
}
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-left'
}).then(function(modal) {
$scope.modal = modal;
});
如果用户进入Model页面后 点击了返回按钮 这是需要关闭Model
//监听离开页面时关闭modal
$scope.$on("$ionicParentView.beforeLeave", function() {
console.info("yourPageCtrl--$ionicView.beforeLeave ");
$scope.modal.hide();
});
$http 请求格式问题
如果服务器拿不到请求的数据 应该是格式不对
配置$http参数，以表单形式 提交数据
var app = angular.module('myApp');
app.config(function ($httpProvider) {
// 配置$http请求
// 以表单形式 提交数据
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
$httpProvider.defaults.transformRequest = function(data) {
if (data === undefined) return data;
return $.param(data);
};
});
阻止事件冒泡
元素的父元素也有点击事件 点击子元素后子元素事件执行完父元素事件也执行了
<div ng-click="gohome()" >
<button ng-click="myalert('gg');$event.stopPropagation();">呵呵</button>
</div>
ionic使用iframe时在iOS上无法显示网页问题处理
近期在ionic项目中使用了iframe标签使用src属性展示一个网页,在Android设备上运行完全正常.
但是在iOS模拟器上去运行时却不显示网页.经查阅资料发现以下处理方法
- 在ionic项目根目录下,打开config.xml文件,在<access origin="" />后添加<allow-navigation href="" />即可
<allow-navigation href="*" />
ionic禁止手机自动旋转下横屏
1.安装cordova插件
ionic plugin add cordova-plugin-screen-orientation
2.添加屏幕配置（Config.xml文件)
<preference name="orientation" value="portrait" />
- orientation设置可以让你锁定应用程序屏幕方向以阻止屏幕自动翻转。可选的值有：default，landscape(横屏)，portrait(竖屏)。
网友评论