ionic开发篇之那些年我们踩过的坑

一、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链接，第一次跳转后，第二次进去就无法跳转了。这个问题目前不知道怎么解决，如果有人知道请告诉我，谢谢。

（不断收集中……）