APPネイティブページを起動するH5インスタンスメソッド-H5 チュートリアル-php.cn

長い間ブログを書いていませんでしたが、最近、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 サイトの他の関連記事を参照してください。