APPネイティブページを起動するH5インスタンスメソッド

長い間ブログを書いていませんでしたが、最近、H5 でアプリのネイティブ ページを立ち上げるという要望があり、その過程でいくつかの落とし穴に遭遇しましたので、特別にまとめてみました。

1. クライアントのプラットフォームとブラウザでアクセスするかどうかを判断する必要があります

1. クライアントの判断

Android はオープンなため、Android と IOS のシステムでは処理が異なります。ブラウザで タグとメタ タグを渡すと、ブラウザ アプリが携帯電話からアプリケーションを開く許可を取得してアプリを起動できます。

IOS 側では、IOS9 以降のシステムでは、APP 開発プロセス中に設定とロジック コードの記述を追加でき、ブラウザがドメイン名にアクセスしようとする前に、システムがドメイン名に対応する APP を開きます。 . 閉店するメリットはまだあります。

そのため、まずクライアントで Android システムか IOS システムかを判断する必要があります。判断コードは次のとおりです

function isInIos(){var userAgentInfo = navigator.userAgent ,
        Agents = ["iPhone" , "iPad", "iPod"];for(var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {          return true;
        }
    }return false;
}

2. どちらでも構いません。 WeChat でクライアント Android/IOS が動作している場合、プラットフォームにアクセスするときに問題が発生します。つまり、セキュリティ上の理由により、会社がスキーマ プロトコルをブロックすることになります。 WeChatのパートナーであり、ホワイトリストに参加している場合、IOSシステムのアプリに対応するアプリストアのダウンロードページにアクセスできますが、WeChatがアプリストアのURLをブロックしてアクセスできなくなることがよくあります。より便利な方法は、IOS であっても Android であっても、WeChat ブラウザで App Store のダウンロード ページを開くことです (IOS は最終的に

appstore に移動します)。ここでの要件は、ユーザーに「...」をクリックしてデフォルトのブラウザで開くように求めることです。

WeChat かどうかを判断するためのコードは次のとおりです:

function isInWx(){var agent = window.navigator.userAgent.toLowerCase();return agent.match(/MicroMessenger/i) == 'micromessenger';
}

2. 原則

まず、電話が Andorid であるか IOS であるかを判断することは不可能です。ブラウザ内の JS を介して特定のソフトウェアが搭載されている APP の場合、このブラウザがモバイル アプリケーション リストを読み取る権限を持っている場合でも、クエリするための固定の外部 API はありません。 H5 スタートアップ APP は、基本的に

URL スキームを通じて APP を開きます。APP は、1 つ以上の URL スキームを設定して、システムにこの APP がインストールされている場合、その URL スキームにアクセスします。このアプリを開く許可を要求します。実際、これはブラウザ アプリとみなすことができます

別のアプリを開くには、iOS では UIApplication の canOpenUrl メソッドを使用して、URL スキームが対応する APP を開けるかどうかを検出できます。Android も同様です。もちろん、JS ジャンプ URL スキームが応答しない場合は、携帯電話にこのアプリがインストールされていないことも意味します。

3. Android プラットフォーム

まず、AndroidManifest.xml を編集して、主に 2 番目の を追加します

<activity android:name=".activity.LoadingActivity"  android:label="${APP_NAME}"  android:screenOrientation="portrait"  android:theme="@style/FirstActivityTheme">  <intent-filter>  <action android:name="android.intent.action.MAIN" />　　　　　　<category android:name="android.intent.category.LAUNCHER" />  </intent-filter>  <intent-filter>  <action android:name="android.intent.action.VIEW" />　　　　　　<category android:name="android.intent.category.DEFAULT" />　　　　　　<category android:name="android.intent.category.BROWSABLE" />　　　　　　<data android:host="android"android:scheme="wushang" />  </intent-filter></activity>

たとえば、これはアプリの一意の識別子に最適です。それ以外の場合、H5 が起動すると、起動する APP を選択するための選択ボックスが表示されます。そして、ホストはページを開始することを意味します。実際には、これは com.android.sky のようなパッケージ名に置き換える必要があります。

この場合、完全な URL は wushang://android?data=sky で、その後にパラメーター転送が続きます。アクティビティでは、次のコードを使用してパラメーターを取得できます

public void onCreate(Bundle savedInstanceState) {             
     Uri uridata = this.getIntent().getData();             
     String mydata = uridata.getQueryParameter("data");            
}

。その後、文字列インターセプトなどを行うことができます。

次に、フロントエンド コードについて説明します。ここには 2 つの状況があります

1. ページが更新されたら、APP を呼び出す許可をリクエストします

これは比較的簡単で、メタ タグをただし、

<meta http-equiv="refresh" content="0;url=wushang://android?data=sky">

がマークされており、ページが更新されると、このリンクにアクセスしてアプリを起動できます。ただし、Apple システムの Safari ブラウザの場合、このメタを使用してヘッダーにアクセスするとエラー メッセージが表示されるため、ページをレンダリングするときにクライアントの

一般クラスを介してこのヘッダーを追加できます。バックエンド。

2. クリック イベントを通じて APP を呼び出す最も簡単な方法は、もちろん、次のように a タグを直接使用することです

<a href="wushang://android">open Android app</a>

しかし、実際の使用では、クライアントのプラットフォーム タイプと、それがクライアントであるかどうかを知る必要があります。 WeChat の組み込みブラウザ内で判断する必要があるため、このアプローチは絶対に受け入れられません。

次に、開発プロセス中に遭遇した問題について話し、記録しましょう。というのも、ここでモバイル端末で使用しているツールライブラリがzeptoで、使用しているクリックイベントがtapなのですが、tapを処理に使用する場合、APPを起動するために何度もクリックする必要があることがよくあります

<script type="text/javascript">
  $('#go').tap(function(){
      window.location.href = "wushang://android";
  });</script>

。具体的な理由は、タップイベントかもしれません。その後、いくつか調べた後、クリックイベントを使用するか、a タグでハンドラー関数を直接マークしてこの問題を回避しました

<a id="go" >open Android app</a><a href="javascript:startApp()">
   open</a><script src="../res/lib/zepto.min.js?1.1.11"></script><script src="../res/lib/public.js?1.1.11"></script><script>$('#go').click(function () {       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    });function startApp(){       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    }</script>

。そこで、今後この種の問題が発生した場合は、これら 2 つの方法を使用することにしました。以下が実際の処理関数です

 window.startApp = function(){     //启动APP if(publicFun.isInWx()){     //微信中alert("请在浏览器中打开");
     }else{      //非微信中if(publicFun.isIos()){　　　　//IOS系统，直接去itunes中，既可以下载也可以打开window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";
        }else{      //android系统，通过定时器的方式，判断是否安装有APPvar hasApp = true , t = 1000;
            setTimeout(function () {  //没有安装APP则跳转至应用宝下载，延时时间设置为2秒  if(!hasApp) window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=[name]";
            } , 2000);var t1 = Date.now();
            window.location.href = "wushang://android";
            setTimeout(function () {    //t的时间就是出发APP启动的时间，若APP启动了，再次返回页面时t2这行代码执行，hasApp即为true。反之若APP没有启动即为false  var t2 = Date.now();
              hasApp = !(!t1 || t2 - t1 < t + 150);
            } , t);
        }
     }
  }

実際には、アプリに直接ジャンプするという非常に簡単な方法があります。 Android であろうと IOS であろうと、また WeChat であろうと非 WeChat であろうと。 App Store のダウンロード ページには、ダウンロードと開く 2 つの機能があります (IOS プラットフォーム上の場合は、App Store に接続して行います)

4. IOS プラットフォーム

ios9 と実際、iOS 9 ではユニバーサル リンクというより良い解決策が提供されています。

これは、iOS9 で導入された機能です。アプリがユニバーサル リンクをサポートしている場合、従来の HTTP リンクを通じて簡単にアプリを起動できます (アプリが既に iOS デバイスにインストールされている場合は、追加の判断などは必要ありません)。 、または Web ページを開きます (アプリが iOS デバイスにインストールされていません)。もっと簡単に説明すると、iOS9 より前は、Safari、UIWebView、WKWebView などのさまざまなブラウザから APP を起動する必要がある場合、通常はスキームを使用することしかできませんでした。

上記は、インターネット上のユニバーサル リンクについての説明から来ています。簡単に言うと、この URL に開発プラットフォームに送信した設定ファイルのルールに一致するコンテンツが含まれている場合に、この URL にアクセスします。アプリを開けない場合、iOS システムはブラウザーでアクセスしたいリンクにリダイレクトします。これは非常に優れた属性です。この属性を通じて WeChat の傍受を回避し、iOS9 でアプリを開くことができるからです。

つまり、上記のクリック イベントは、アプリ ストアにアクセスするためのものです。アプリがインストールされている場合、ブラウザーがアクセスした時点ですでにアプリ内にあるからです。

これらはすべて IOS の設定に関するものなので、これ以上は書きません。パラメータの受け渡しとページの方向に関しては、実際には UIWebView で現在接続されている URL を取得し、文字列の分割と検証を実行してどのページに移動するかを決定してパラメータ値を取得するのと同じです。

以上がAPPネイティブページを起動するH5インスタンスメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。