h5页面打开手机app（跳转）详情页面

h5打开android App并跳转详情页面

android端代码配置

协议部分

   <intent-filter>
       <!-- 协议部分，随便设置 -->
       <data
       android:host="examplemain"
       android:pathPrefix="/yellowPage"
       android:scheme="exampleapp" />
       <!-- 下面这几行也必须得设置 -->
       <category android:name="android.intent.category.DEFAULT" />
       
       <action android:name="android.intent.action.VIEW" />
       
       <category android:name="android.intent.category.BROWSABLE" />
   </intent-filter>

android数据拦截代码(h5唤起app时，h5传递数据给app，这里传递的是id值)

if (Intent.ACTION_VIEW.equals(action)) {
  Uri uri = intent.getData();
  if (uri != null) {
      String value = uri.getQueryParameter("id");
      if (!TextUtils.isEmpty(value)) {
          id = value;
          LogUtils.e("value", value);
      }

   }
}

html代码

• 实际这里打开App方式跟打开一个web页面方式一致，但是需要注意的是打开App的url格式为android提供的[host]://[scheme]/[pathPrefix]?params
• 下面以打开App新闻页面为例：

let scheme = 'exampleapp://examplemain/news' 
            
let url = ${scheme}?id=${$route.query.id}

location.href = url

注意

• 这里面需要注意的是，打开App无论打开成功失败，h5都无法捕获，需要自己用定时器判断，200ms为宜，超时未打开添加提示信息！ 如有任何问题欢迎留言