ionic+cordova填坑

1.命令行更新 cordova，ionic。nodejs ，npm，bower等到新版本，不要在vs中更新

2.程序忽然白屏 由於拷貝其餘程序到js中，亂碼 ；a模擬器打開 f12看控制檯錯誤解決

3.注意多一個逗號 ，}，形成程序崩掉

 

4.沒法真機調試： a。手機沒連  b。重啓vs或機器  instead saw

 

5.增長插件，注意更新app.js 的 config注入

 

6.service不返回，用在return中寫函數

 

7.controller報錯，注意注入$插件

8.$scope.data在controller初始化{}，不然調用顯示未定義錯誤

9.真機調試

iphone  

 

anroid ：哈工大代理安裝avd，，刪除金山手機衛士，不然會佔用端口。。

10。fileupload  服務端接收方法見協同平臺

 

11. $state.go("tab.accountlistitem"); 的controller必須存在，只是app.js配置$state.go不會跳轉。

 

12.

升級到cordova 5.0後，在Android表現爲連接沒法打開

cordova 5.0須要手動添加whitelist插件，控制對外部連接的訪問權限

cordova plugin add cordova-plugin-whitelist

設置白名單便可。

 13.右鍵獲取程序目錄，

cmd cd到目錄，運行命令

1，查看全部已經安裝的插件

1	cordova plugin ls

2，安裝插件（以camera插件爲例）

1	cordova plugin add cordova-plugin-camera

 

3，刪除插件（以camera插件爲例）

1	cordova plugin rm cordova-plugin-camera

4，更新插件

1	cordova plugin update

二，經常使用的Cordova插件

1，Console（調試控制檯）

讓程序能夠在控制檯中打印輸出日誌。

1	cordova plugin add cordova-plugin-console

13No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.
解決辦法
index.html 中添加
《meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"》

1四、ionic 隱藏 nav-bar
文檔上來看，須要在controller中調用   $ionicNavBarDelegate
例如 .controller('DashCtrl', function ($scope, $ionicNavBarDelegate) {
    $ionicNavBarDelegate.showBar(false);
})
但沒起做用。最後在模板中使用標籤方法
hide- nav- bar = "true"
該方法起做用。

1五、 ng-model 與 input 值的問題
例如   input type="text" ng-model="querystr"
ng-model綁定到$scope.querystr 時，model會根據 text輸入自動變化，但在controller中將
$scope.querystr=''時 ，text input的值不會產生變化。
而且在使用ng-model時，沒法使用
angular.element(document).find(selector).val("some value");方式進行賦值。
解決方法是在controller 中，設置一個結構，如
$scope.queryMode ={querystr:''};
在input 中綁定  ng-model = "queryModel.querystr"
則controller中重設   $scope.queryMode.querystr = '';
綁定生效，input 清空。

1六、cordova插件 ,在ripple中彈出錯誤窗口
若是安裝cordova插件，如keyboard,statusbar 等， 會在ripple中拋各類錯，而且每次加載會彈出窗口，讓你寫JSON回調， 這個是ripple的BUG，不支持自定義插件， 去掉彈窗的辦法是在app.js上方，即定義angular.module（）的上方
寫

var annoyingDialog = parent.document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x('exec-dialog');

上句中的x_x 去掉，新浪自動添加的。

if (annoyingDialog) annoyingDialog.outerHTML = "";

彈窗將再也不出現，但輸出窗口中的ripple.js中的錯誤仍會，你能夠過濾，也能夠無論。

 

1七、使用極光推送，按照github上的說明文檔，加入插件後老是沒法編譯，查看

是因爲 platform/android/AndroidManifest.xml  中

meta-data android:name=JPUSH_APPKEY android:value=aaabbbbmn9QITAv0Oe

重複，每次build總會生成兩條鍵值

經查在plug/android.json 中，有兩條重複生成的語句，刪掉一個，便可。

1八、ionic關於IFAME的調用
由於使用第三方接口，會形成跑到應用外的地址，ionic沒法控制外部鏈接回到應用，所以通常使用iframe方式
打開外部鏈接，並加一個headbar用來返回到應用，如在modal中打開外部地址
如html中
 《script id="login.html" type="text/ng-template"》
        《ion-modal-view》
            《ion-header-bar align-title="center" class="bar-positive"》
                《div class="buttons"》
                    《button  class="button button-clear button-icon icon ion-ios-arrow-back"》《/button》
                    《button ng-click="closeModal()" class="button button-clear button-icon icon "》取消《/button》
                《/div》
                《h1 class="title"》LOGIN《/h1》
            《/ion-header-bar》
            《ion-content scroll="true" class="has-header no-padding"》
                《iframe id="ifmr2" data-tap-disabled="true" ng-src="{{chatStru.paySrc}}"》《/iframe》
            《/ion-content》
        《/ion-modal-view》
《/script》

controller中
$scope.tt = new Date().getMilliseconds();
$scope.chatStru = {
        paySrc: $sce.trustAsResourceUrl('http://xxx.om/testlogin.jsp?tt='+$scope.tt),
        token: "",
        hasToken: false
    };
$ionicModal.fromTemplateUrl('login.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
            $scope.modal = modal;
    });

    $scope.openModal = function () {
          $scope.modal.show();
    };
     $scope.closeModal = function () {
        $scope.modal.hide();
    };

但這樣的問題是在於，頁面完成後，你必須經過手動點擊返回，而且沒法進行數據的傳遞，這個在html5中其實已經有了很是完美的解決方法就是postMessage()
在遠端的被iframe的頁面中，加入JS
window.onload=function(){
             window.parent.postMessage('logined','*');
        }

並在inoic的controller中加入
 window.addEventListener('message', function (e) {
        var data = e.data;
//這裏返回的是 logined,至關於傳遞參數回來。
        $scope.modal.hide();
    }, false);

  你會發現，你即接收到了data，同時又關閉了該modal ，而不須要手動關閉。

固然，你能夠將 addEventListener() 放到 $scope.openModal 

而後在 $scope.closeModal 中 removeEventListener()

如

 $scope.openModal = function () {

        var tt = new Date().getMilliseconds();

        $scope.chatStru.paySrc = $sce.trustAsResourceUrl('http://xxx.cn/oe/testlogin.jsp?tt=' + tt);

        $scope.modal.show();

        window.addEventListener('message', function (e) {

            var data = e.data;

            $scope.chatStru.hasToken = true;

            $scope.modal.hide();

 

        }, false);

    };

    // function to close the modal

    $scope.closeModal = function () {

        $scope.modal.hide();

        if ($scope.chatStru.hasToken) {

 

            window.removeEventListener('message', function () { }, false);

        }

    };

最終能夠這樣寫

 var handel = function (e) {

        var data = e.data;

        if (data.id > 0) {  // 傳回來的爲json{id:1,msg:'aaa'}

            if (!$scope.chatStru.hasToken) {

                $scope.chatStru.hasToken = true;

            }

            $scope.modal.hide();

        } else {

            $scope.chatStru.hasToken = false;

        }

    };

 

    $scope.openModal = function () {

        var tt = new Date().getMilliseconds();

        $scope.chatStru.paySrc = $sce.trustAsResourceUrl('http://xxx.cn/oe/testlogin.jsp?tt=' + tt);

        $scope.modal.show();

        if (!$scope.chatStru.hasToken) {

            window.addEventListener('message', handel, false);

        }

    };

    

    $scope.closeModal = function () {

        $scope.modal.hide();

        if ($scope.chatStru.hasToken) {

            window.removeEventListener('message', handel, false);

        }

    };

1九、使用android studio 運行cordova項目
直接使用platfrom目錄裏的gradle 能夠在android studio中直接導入 cordova的項目，但運行模擬器時出現
Cannot reload AVD list: cvc-enumeration-valid: Value '280dpi' is not facet-valid with respect to enumeration '[ldpi, mdpi, tvdpi, hdpi, xhdpi, 400dpi, xxhdpi, 560dpi, xxxhdpi]'. It must be a value from the enumeration.
Error parsing D:\sdkforas\android-sdk-windows\system-images\android-22\android-wear\armeabi-v7a\devices.xml
cvc-enumeration-valid: Value '280dpi' is not facet-valid with respect to enumeration '[ldpi, mdpi, tvdpi, hdpi, xhdpi, 400dpi, xxhdpi, 560dpi, xxxhdpi]'. It must be a value from the enumeration.
Error parsing D:\sdkforas\android-sdk-windows\system-images\android-22\android-wear\x86\devices.xml
解決方法 ：
用/sdk/tools/lib/devices.xml去替換 system-images\android-22\android-wear\x86\devices.xml和system-images \android-22\android-wear\armeabi-v7a\devices.xml中的devices.xml


20、 android studio 中 gradle 失敗
gradle project sync failed.Basic functionality(e.g.editing,debugging) will not work properly.
解決方法：android studio中，點擊 tools ->Android->sync project with gradles files.

2一、加載遠程js或css 出現  Refused  to  load  the script  或 Refused to load the stylesheet
because it violates  the following ....
例如 index.html中 加載字體
《link href='http://fonts.useso.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet'》
可在index.html添加安全許可
《meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline' http://fonts.useso.com ; script-src 'self' 'unsafe-inline' 'unsafe-eval';"》
直接加根域名便可，另外不要帶引號 js  須要添加在 script-src 中。

22 、 ionic 中 彈出鍵盤遮擋住輸入框
在config.xml 中修改全屏爲FALSE並添加  adjustPan  (adjstResize沒有成功)
 《preference name="Fullscreen" value="False" /》
  《preference name="android-windowSoftInputMode" value="adjustPan"/》

2三、ionic監聽滾動
網上的示例xxx.bind('scroll',function(){.....}),很容易將頁面跑死， 換個思路，使用監聽touch
var targetPos = window.screen.availHeight;
 $("#scdiv").on("touchend", function () {
if (currpos > 10 && currpos < targetPos / 4) {
                $ionicScrollDelegate.$getByHandle('homescroll').scrollTo(0, 0, true);
                      return false;
            } else if (currpos >= targetPos / 4 && currpos <= targetPos - 10) {
                $ionicScrollDelegate.$getByHandle('homescroll').scrollTo(0, targetPos - 64, true);
                       return false;
            }
})
當觸摸結束時，判斷當前的位移，來作一些操做。這樣在性能上提升了許多。
$ionicScrollDelegate.$getByHandle 操做的是在html中定義的delegate-handle
如《ion-content id="scdiv" delegate-handle="homescroll"》

2四、 APP開啓檢測網絡並提示開啓
須要三個插件
一、https://github.com/apache/cordova-plugin-network-information
二、https://github.com/apache/cordova-plugin-dialogs
三、https://github.com/deefactorial/Cordova-open-native-settings

而後在APP.JS中，divicesReady中
$ionicPlatform.ready(function () {
if (navigator.connection) {
            var tmptypes = navigator.connection.type;
            if (tmptypes.toUpperCase().indexOf('NONE') > -1 || tmptypes.toUpperCase().indexOf('UNKNOWN') > -1) {
                if (navigator.notification) {
                    navigator.notification.confirm(
                    '您的設備未開啓網絡',
                       function (buttonIndex) {
                             if (buttonIndex == 1) {
                               if (cordova.plugins.settings) {
                                   cordova.plugins.settings.openSetting("wifi", function () { console.log("network setting openning"); }, function () { console.log("open network setting failed"); });
                               }
                           }
                         },            // callback to invoke with index of button pressed
                       '提示',           // title
                       ['開啓', '取消']     // buttonLabels
                               );
                }
            }
        }
}）

其中openSettings中可設置如下本地設置

var settingNames = array(

    "open",

    "accessibility",

    "add_account",

    "airplane_mode",

    "apn",

    "application_details",

    "application_development",

    "application",

    "bluetooth",

    "captioning",

    "cast",

    "data_roaming",

    "date",

    "device_info",

    "display",

    "dream",

    "home",

    "input_method",

    "input_method_subtype",

    "internal_storage",

    "locale",

    "location_source",

    "manage_all_applications",

    "manage_applications",

    "memory_card",

    "network_operator",

    "nfcsharing",

    "nfc_payment",

    "nfc_settings",

    "print",

    "privacy",

    "quick_launch",

    "search",

    "security",

    "settings",

    "show_regulatory_info",

    "sound",

    "sync",

    "usage_access",

    "user_dictionary",

    "voice_input",

    "wifi_ip",

    "wifi",

    "wireless");

其中相關網絡的爲wifi  移動數據開啓未找到。誰試出了是哪一個請告訴我

1三、$sate.go  和 $stateParams 傳參及收參
在 controller1 中使用  $state.go('statename',{id:1}) ;傳遞參數
在 statename 相對應的  controller2 中接收參數
$scope.id = $stateParams.id;
注意，此處必須在router.js 中設置 statename 的參數形式
如.state('statename ', {
    url: '/statename ',
    params: { 'id': null },
    templateUrl: 'templates/Users/statename .html',
    controller: 'controller2 '
})
其中params: { 'id': null }, 對應$state傳的參，若不設，則必爲undefined

2五、關於ionic中想底部加一長按鈕，隨頁面滾動位置不變，例如


最初的方案是在 ion-content  外 ion-view 內添加一層
div .....style= ..... position:fixed    bottom:0px;之類，但最終發現，在不一樣分辨率下位置並不正確
基本可肯定是由於statusbar等的緣故，仔細看了下ionic.css最終發現，太簡單了
div class="tabs"  就能夠了。

2六、php中取值問題
ionic中用的$http  method:post ，params........在PHP中用$_POST取不到值， 改爲 $_Request 就好了。

2七、使用vs2015 release
會提示使用發佈配置進行調試時，Android 程序包必須已簽名。要配置 Android 簽名，請按照 http://go.microsoft.com/fwlink/?LinkID=613579 中的說明操做（該網頁很難打開）
實際須要在項目根目錄的build.json中添加生成的keystore
{
     "android": {
      "release": {
        "keystore": "E:\\Projects\\android.keystore",
        "storePassword": "*******",
        "alias": "********",
        "password": "*******",
        "keystoreType": ""
      }
     }
 }
至於生成keystore 請百度，只要有jdk 運行命令就OK

2八、ionic 的滾動優化
在app.js中的config 塊中，加入
$ionicConfigProvider.scrolling.jsScrolling(false);
默認全部的滾動使用native，會比js的滾動快不少，而且很平滑，
但這樣作的話，沒法使用一些效果，如has-bouncing="true"（仿蘋果的一種上下拉顯示背景的彈性效果）
那你能夠在特定的view中，ion-content中加入overflow-scroll="false"，則該view保持js滾動

2九、微信支付
支付寶支付很是簡單，文檔也很豐富，微信的相對來講低了不止一個檔次，固然最鬱悶的一件事是
通過了數天的查錯，發現微信的totalfee 竟然是以分爲單位，換句話來講，你傳價格時，只會有整數
若是出現0.01，那必然出錯。

30 ion-header-bar 下老是有條橫線，即便設爲border:none也沒有做用。經查，添加background-size: 100% 0px; 便可解決。

分享：