HTML5打开本地app应用的示例代码

百变鹏仔 3个月前 (10-18) #H5教程

文章标签示例

这篇文章主要介绍了html5打开本地app应用的方法，如果你的手机上安装有支付宝，那么在访问支付宝手机网页时就会自动打开支付宝app，否则在页面上会提示你进行下载app，这是如何实现的？感兴趣的小伙伴们可以参考本文

本文为大家分享了HTML5打开本地app应用的方法，具体内容如下

首先为了保证能够打开你的app，你必须要在androidManifest.xml中配置的filter中data的属性表述。 androidManifest.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>  <manifest xmlns:android="http://schemas.android.com/apk/res/android"      package="com.taoge"      android:versionCode="2"      android:versionName="3.24.03" >      <uses-sdk          android:minSdkVersion="8"          android:targetSdkVersion="17" />      <application          android:allowBackup="true"          android:configChanges="orientation|screenSize"          android:icon="@drawable/logo"          android:label="@string/app_name"          android:logo="@drawable/logo"          android:sharedUserId="android.uid.system"          android:theme="@android:style/Theme.Light.NoTitleBar" >          <activity              android:name="xttblog.WelcomeActivity"              android:excludeFromRecents="true"              android:screenOrientation="portrait"              android:theme="@android:style/Theme.Light.NoTitleBar" >              <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.BROWSABLE" />                  <category android:name="android.intent.category.DEFAULT" />                  <data android:pathPrefix="/taoge/open"                      android:scheme="xttblog" />              </intent-filter>          </activity>          <activity              android:name="xttblog.AntRepairActivity"              android:label="@string/title_activity_ant_repair" >          </activity>      </application>  </manifest>

其次，你要在你的网页中访问xttblog://taoge/open。可以使用的元素有很多，如：script，iframe，img等。使用它们的src属性，访问xttblog://taoge/open。html5代码如下：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE HTML>  <html>  <script>   function openapp(){     document.getElementById(&#39;xttblog&#39;).innerHTML=&#39;<iframe src="xttblog://taoge/open"></iframe>&#39;;    }   </script>  <body>   <p style="display:none;" id="xttblog"></p>   <input type="button" value="打开app" onclick="openapp();">  </body>  </html>

文章推荐

HTML5打开本地app应用的示例代码

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集