Ionic クロスプラットフォーム アプリ開発に関するよくある質問

前に書かれています

ionic はクロスプラットフォーム アプリケーションを迅速に開発するためのフレームワークであり、多くの特徴があります:

• 低い学習コスト

  フロントエンド開発者にとって、学習コストはそれほど高くありません。Angular を使用したことがある場合、学習コストはほとんどかかりません。

• シンプルで使いやすい。

  強力な CLI、開始 -> プラットフォーム -> ビルド -> 実行、完全なサービス コマンド ラインの完了、F5 の必要なし>

• 多くの強力なコンポーネント
  プルダウン リフレッシュ (イオン リフレッシャー)、プルダウン リフレッシュ (イオン リフレッシャー)、プルダウン リフレッシュなどの人気のインタラクティブ効果を簡単に実現できる、多くの強力な既製コンポーネントを提供します。アップロード/ウォーターフォール フロー (ion-infinite-scroll)、タブ (ion-tabs)、サイドバー メニュー (ion-side-menu) などをアップロードすると、これらの一般的な効果を実現するには、少しのコードを記述するだけで十分です。ネイティブ開発よりも速い

• Cordova プラグインのサポート
  がこの扉を開きます。つまり、カメラを呼び出して撮影するなど、多数のネイティブ関数を使用できることになります。写真、戻るボタンへの応答、電話をかける、テキストメッセージを送る、電子メールを送る...すべてをわずか数行のコードで行うことができます

• 更新速度は速いです
  2015/11/1 は v1.1.0、現在 (2016/1/9) は v1.2.4、更新が速いということは、誰かがメンテナンスしていることを意味し、バグはすぐに修正できます

もちろん、欠陥もあります。そうでなければ、次のようにこのメモは存在しません:

• 新しいバージョンには完全な下位互換性がありません
  問題ではありません互換性がない場合は、問題を発見した後で詳細なドキュメントを提供しても問題ありません。

• バグを見つけるのは困難です
  どの部分に問題があるかを判断するのは困難です

• パフォーマンスの最適化は困難です
  アニメーションの遅延、低い 端末エクスペリエンスはさらに悪化しており、最適化対策では通常、次の使用を推奨しますアニメーションが減り、影が減り、グラデーションが減ります...しかし、使用しないとあまりにも醜く、エクスペリエンスはネイティブ アプリケーションとは大きく異なります

• その他
  変な質問の答えが見つからず、夜中にstackoverflowを覗いていたら…

1.jsonpのクロスドメイン、書き方php サービス

追記：これは angular の問題で、当時はメモを整理していなかったので、後でそのような問題に遭遇したことを忘れていました

angular の $http は送信できます。 jsonp リクエストであり、使用法は次のように jQuery と似ています:

// 请求数据$http.jsonp(sUrl).success(function(res){    // ...}).error(function(err){    // ...});

sUrl には特別な要件があり、コールバック パラメーターを指定する必要があります。パラメーター値は JSON_CALLBACK のみです。Angular ドキュメント:

リクエストの宛先を指定する相対 URL または絶対 URL コールバックの名前は文字列 JSON_CALLBACK である必要があります。

例:

var sUrl = http://www.ayqy.net/app/rsshelper/index.php?callback=JSON_CALLBACK

質問は、PHP サービスをどのように記述するかです。 JSON_CALLBACK()でラップされたjsonデータを直接返しますか?

いいえ、実際にリクエストされた URL のコールバック !== JSON_CALLBACK は密かに angular に置き換えられているため (ドキュメントでは説明されていません)、そのため背景は次のように記述する必要があります:

<?phpif (strpos($_SERVER["REQUEST_URI"], 'callback')) {    $res = json_encode($res);    // echo $_SERVER["REQUEST_URI"];    // /angular/test/http/main.php?callback=angular.callbacks._0    // $res = 'JSON_CALLBACK('.$res.')';    // 错的    $res = $_GET['callback'].'('.$res.')';}?>

もちろん、これは比較的単純な取得状況です。投稿の場合は、他の方法でコールバックを取得する必要があります。

<?php// getif ($_SERVER['REQUEST_METHOD'] === 'GET') {    $res = '{';    // arg    if (isset($_GET['arg'])) {        $res .= '"arg": "'.$_GET['arg'].'", ';    }    // method    if (strpos($_SERVER["REQUEST_URI"], 'callback')) {        // echo $_SERVER["REQUEST_URI"];        // /angular/test/http/main.php?callback=angular.callbacks._0        $res .= '"arg": "'.$_GET['arg'].'", ';        $res .= '"method": "jsonp"}';        // $res = 'JSON_CALLBACK('.$res.')';        // 错的        $res = $_GET['callback'].'('.$res.')';    }    else {        $res .= '"method": "get"}';    }    echo $res;}// postelse if ($_SERVER['REQUEST_METHOD'] === 'POST') {    // 直接拿拿不到，因为传过来的是json串    // echo $_POST['arg'];    $jsonArg = file_get_contents('php://input');    if (isset($jsonArg)) {        echo substr($jsonArg, 0, strlen($jsonArg) - 1).', "method": "post"}';    }    else {        echo '{"method": "post"}';    }}?>

2. ion-content のダンピング リバウンド エフェクトがなくなりました

ionic v1.2 では、ion-content のデフォルトのダンピング エフェクトとリバウンド エフェクトがキャンセルされます。明らかに同じコードですが、その後はリバウンド エフェクトがありません。長い間探した結果、公式ブログのコメントで発見しました。

素晴らしいニュースです。ありがとうございます。 「has-bouncing='true'」はネイティブ スクロールでは機能しません。back go jsscroll (overflow-scroll="false")

ブラウザで確認しただけなので、ネイティブスクロールでバウンスが解消されることを誰かが確認できれば、それは素晴らしいことです。

この機能は、私が持っていたカスタムの「プルリフレッシュ」メソッドに必要です。

3.複数のビュー間のデータ共有

これは、複数のコントローラー間のデータ共有の問題です (通常、異なるビューは異なるコントローラーに対応します) もちろん、最も簡単な方法はグローバル変数 ($rootScope) を使用することですが、これは次のとおりです。より合理的な方法は、サービスまたはファクトリーを自分で作成し、必要に応じてデータ アクセス インターフェイスと依存関係の挿入 (

など) を提供し、URL データ共有を実現することです。非常にクリーンな sKey を渡すことで

<ion-content overflow-scroll="false" has-bouncing="true"></ion-content>

4. ビューの更新を通知

データ表示はテンプレートに記述されていますが、ページを開いた後にデータが到着していない場合、テンプレートはデータがないため、しばらくしてデータが到着すると、ビューが更新されておらず、空白のままであることがわかります。例:

.service('DataServ', ['$http', 'UIServ', function($http, UIServ) {    // ...    // 字典    var oDir = {        // key: value    };    function save(val) {        var sKey = Date.now() + '';        oDir[sKey] = val;        return sKey;    }    function get(sKey) {        return oDir[sKey];    }    return {        // ...        save: save,        get: get    };}]);

データに値を割り当てる操作はコントローラーの範囲外になるため、現時点では次のようにビューの更新を通知する必要があります。

もちろん、手動通知は一般的には行われます。非同期で返されたデータであっても、それはスコープに関連するだけであるため、必要ありません。つまり、ビューを手動で更新する必要があることがわかった場合は、$apply を追加すれば大丈夫です

。

五.php原生xml扩展如何获取 里的内容

rss格式中会有 b431de50fa5351b2a067c1b6c05073e8 标签，直接取 content 取不到，需要特殊的方式：

$content = (string)$item->children("content", true);// $encodedContent = $content->encoded;// $content->encoded返回转义过的html，比如把&转成&，一般用于<pre class="brush:php;toolbar:false">直接展示

当然，前提是使用原生xml扩展（ $xml = simplexml_load_file($url); ）解析xml才会遇到这个问题，更多用法请查看 php – How to parse CDATA HTML-content of XML using SimpleXML? – Stack Overflow

六.在浏览器中打开外部页面

需要使用一个cordova插件，cd进项目文件夹，然后：

ionic plugin add cordova-plugin-inappbrowser

安装完成后就可以调用了，不用修改配置文件，不用引入其他js，如下：

// openInBrowserwindow.open(‘http://example.com’, ‘_system’);   Loads in the system browserwindow.open(‘http://example.com’, ‘_blank’);    Loads in the InAppBrowserwindow.open(‘http://example.com’, ‘_blank’, ‘location=no’); Loads in the InAppBrowser with no location barwindow.open(‘http://example.com’, ‘_self’); Loads in the Cordova web view// testwindow.open(url, '_system'); // 系统默认浏览器// window.open(url, '_blank');  // 很丑的安卓内置浏览器// window.open(url, '_self');  // 同上

一般都用 _system ，另外两个实在太丑，更多内容请查看 Cordova InAppBrowser Plugin Example using ionic framework

七.splash screen黑屏白屏

P.S.黑屏白屏其实是同一个问题，但这个问题相当难解决，笔者花了快1天才搞定

ionic默认集成了 splashscreen 插件，这个cordova插件效果不是很完美，默认配置只在首次打开app时显示splash screen，但实际效果是：

When the app starts the splash screen shows for a few seconds as expected, and then the screen goes black for @1 second and then white for @2 seconds and then the main app page appears.

Is there any way to prevent the black and white pages appearing? I read somewhere that a black page appears when there is no splash page but I do have a splash page and it appears fine.

在 stackoverflow 找到了这个问题描述，简直太贴切了，但是单靠问题下面的回答无法解决白屏问题，还需要改配置文件

最初发现的现象是黑屏（把上面英文描述里的white换成黑），后来找到了原因：主视图容器 ion-nav-view 是空的，而它的背景色是 #000 ，所以修复方法是给里面塞个 ion-view ：

<!-- 内容 --><ion-nav-view>    <!-- 防止启动时黑屏 -->    <ion-view></ion-view></ion-nav-view>

或者添css，把 ion-nav-view 的背景色改成白色。但问题还没解决，黑屏问题变成白屏问题了，解决方案比较麻烦

1. 把splashscreen插件降级到v2.0.0

   v2.0.0之后的版本有bug，目前（2016/1/9）自带的版本是v3.0.0。先cd到项目文件夹，然后命令行：

   // 删掉现有版本cordova plugin rm cordova-plugin-inappbrowser// 安装v2.0.0cordova plugin add cordova-plugin-inappbrowser

2. 改配置文件MyApp/config.xml

   <preference name="SplashScreen" value="screen"/><preference name="AutoHideSplashScreen" value="false"/><preference name="auto-hide-splash-screen" value="false"/><preference name="ShowSplashScreenSpinner" value="false"/><preference name="SplashMaintainAspectRatio" value="true" /><preference name="SplashShowOnlyFirstTime" value="false"/><preference name="SplashScreenDelay" value="10000"/>

   取消自动隐藏（改为代码控制隐藏），把持续时间改为较大的值（10秒），设置每次打开应用都显示splash screen

   P.S.默认只有 SplashScreen 和 SplashScreenDelay ，需要把其它的（ SplashMaintainAspectRatio 可选）都添上

3. 改app.js

   手动隐藏splash screen，在run里面添上

   .run(['$rootScope', function($rootScope) {        // init        // $rootScope.isLoading = false;        // hide splash immediately        if(navigator && navigator.splashscreen) {            navigator.splashscreen.hide();        }    });}])

   这样就好了，不要延时调用hide，否则仍然会出现白屏（有些解决方案要求$timeout 50毫秒hide，仍然会出现白屏，不要这样做）

最怨念的问题结束了，看似简单的功能，想要有 完美的原生体验 却很难，奇奇怪怪的问题很难解决，目前可行的解决方案可能过段时间就不行了，可以查看 White page showing after splash screen before app load 感受一下

八.安卓版本签名发布

各种签名方法都过时了，目前（2016/1/9）可以用的签名方法如下：

1. 在MyApp\platforms\android创建keystore

   具体步骤请查看： Ionic toturial for building a release.apk

2. 创建release-signing.properties文件

   具体步骤请查看： How to automatically sign your Android apk using Ionic framework and Crosswalk

3. build

   cd到项目文件夹，然后命令行 ionic build --release android ，成功后会生成2个东西，在MyApp\platforms\android\build\outputs\apk下，分别是android-armv7-release.apk和android-x86-release.apk，一般平板和PC用x86，手机用arm7，如果要上传google play的话，2个都要传，下载时有自动识别

至于crosswalk，提供了chrome内核，能让低端机支持高端东西，但会让apk 变大很多 （3.5M->23M），添上crosswalk后，感觉。。。嗯，变卡了，但为了支持低端机用户，一般都会添上crosswork

九.总结

怎么说呢，快速开发很棒，后遗症很伤。

笔者从1月3号开始搞，1月8号中午release v1.0.0，靓照如下：

rsshelper

rsshelper

看着还不错吧，非卖品，不赠送~