ionic开发篇之那些年我们踩过的坑
2015-11-04 11:09
357 查看
一、API开发篇
1.接口无法访问
百度地图、自定义API无法访问,远程调试结果显示404原因是cordova 5.x的版本增加了“Content-Security-Policy”用于解决安全访问的问题。默认情况下,只能访问本机资源。
解决方法:
1.添加白名单插件,在项目目录下执行
ionic plugin add cordova-plugin-whitelist
2.在index.html头部增加
<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; connect-src * 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src *" >
2.无法跨域访问
服务端设置PHP代码
header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Credentials:true');
3.POST请求提交自动变成Options请求
当我们使用浏览器调试的时候,发现POST请求会自动变成Options请求,然后调用任意接口都提示不能跨域访问,即使服务端已经设置允许跨域访问。解决方法:
.config(function ( $stateProvider, $urlRouterProvider, $ionicConfigProvider, $httpProvider) { // Use x-www-form-urlencoded Content-Type $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; }
这个问题只出现在浏览器调试中,实际在手机里运行不需要这个配置。
二、调试篇
1.本地调试
电脑上本地调试,用ionic serve即可在浏览器中调试2.远程调试
1.在手机上运行debug版软件,在电脑上调试程序2.在启动手机上的APP后,在谷歌浏览器(其实360也行)上输入chrome://inspect/#devices,可以进入调试界面(如果出不来,请翻墙)
3.单击inspect,可以进入当前显示的页面调试,调试方法和和在浏览器上一致。
远程调试可以快速定位,在浏览器上没有发现的问题,方便调试手机API接口
三.应用开发篇
1.导航置底设置
好不容易按教程一步步建立了tabs样例工程,却发现安卓机上这个tab导航在顶部,浏览器和ios这个导航在顶部。解决方法:在app.js里添加以下代码
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) { $ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.position('bottom'); $ionicConfigProvider.platform.android.tabs.style('standard'); $ionicConfigProvider.platform.android.tabs.position('bottom'); $ionicConfigProvider.platform.ios.navBar.alignTitle('center'); $ionicConfigProvider.platform.android.navBar.alignTitle('center'); $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left'); $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back'); $ionicConfigProvider.platform.ios.views.transition('ios'); $ionicConfigProvider.platform.android.views.transition('android');
2.百度地图开发
坑1:使用了插件angular-BMap
这个插件功能并不完善,好多功能都没有,如果要使用需要继续开发(如果你有时间,有兴趣,有能力可以fork后继续开发)坑2:使用了百度地图实例代码,地图不显示
var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
其实只是在模拟手机的浏览器下不显示,在浏览器上不要选择任何手机型号,就能显示,而实际我在自己的手机上build后,也是能正常显示的。具体原因没有深究,如果有知道的朋友欢迎来信。
坑3:GPS位置偏移
使用$cordovaGeolocation.getCurrentPosition()获得的坐标,在百度地图上位置偏移。原因是GPS坐标和百度地图坐标并不是完全对应的,需要使用百度地图提供的GPS坐标转换接口进行转换function posToAddrByBaidu(lat, long){ var Ak = 'yourAK'; //你应用的AK var getUrl = 'http://api.map.baidu.com/geocoder/v2/?'+ 'ak=' + Ak +'&location=' +lat+ ',' + long + '&output=json&pois=0'; $http.get(getUrl) .success(function (data) { if (data['status'] == '0') { $scope.appeal.location = data.result.formatted_address; } else { return '定位失败'; } }).error(function () { alert("网络问题"); }); }
坑4 infowindow里面的a链接只能跳转一次
BMap中创建的infowindow,如果里面带有a链接,第一次跳转后,第二次进去就无法跳转了。这个问题目前不知道怎么解决,如果有人知道请告诉我,谢谢。(不断收集中……)
相关文章推荐
- 数据库图片导出
- 冒泡排序
- 判断所有的字符不相同
- EasyUI form success IE
- JavaScript闭包(closure)
- Android中Service(服务)详解
- Adobe Air 获取启动参数
- 【Leetcode】之Letter Combinations of a Phone Number
- 黑马程序员——java基础语法(一)---关键字、标识符、注释、常量、变量、运算符
- jQuery 控制input及select的应用
- JavaScript闭包(closure)
- Objective-C Blocks Quiz
- Android Hook框架Xposed原理与源代码分析
- 整理开源协议的比较(BSD,Apache,GPL,LGPL,AGPL,MIT,Zlib/Libpng协议)
- win7自带的截图工具在截图时怎么将截的图片发送到桌面上?
- 苹果向开发者发布OS X 10.11.2 El Capitan 第二个测试版
- 多线程讲解韩老师
- mybatis问题汇总
- Apache shutdown unexpectedly启动错误解决方法
- 数据库图片导入