原生app与H5页面之间的交互

最新推荐文章于 2025-06-09 21:37:22 发布

KeroroLX

最新推荐文章于 2025-06-09 21:37:22 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：基础

本文链接：https://blog.youkuaiyun.com/github_38928905/article/details/86573964

基础专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了H5页面与App之间的登录交互流程。包括H5如何定义接收token的方法，通过app拦截url调用H5登录，以及H5如何触发app的登录方法并接收回调。适用于跨平台登录场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【需求，点击“个人中心”登录h5调app登录，app登录后回调h5方法传回来token】

定义H5用来接收token提供给app的方法：

window.h5JAMK_setOpenidCallback = function (openId) {
 localStorage.userinfo=JSON.stringify({openId:openId});
}

1 通过app拦截url，监听

点击“个人中心”，执行：

window.location.href ="linkjstooc://appJAMK_login?"+params;

格式可以跟app共同协定好；

大概步骤就是，点击“个人中心”，app拦截到上面的url后，调用window.h5JAMK_setOpenidCallback并传递参数

2 h5调用app提供的方法：

点击“个人中心”，执行：appJAMK_Login(params)

  appJAMK_Login:function(params){
  
    if (/android/i.test(navigator.userAgent)) {
      console.log('android');
      try {
        if(window.android.appJAMK_Login){
          window.android.appJAMK_Login(params)
        }else{
          alert('没找到android方法')
        }
      } catch (e) {
        console.log(e)
      }
    } else if (/ios|iphone|ipod|pad/i.test(navigator.userAgent)) {
      console.log('ios');
      try {
        if(window.webkit.messageHandlers.appJAMK_Login) {
          window.webkit.messageHandlers.appJAMK_Login.postMessage(params)
        }else{
          alert('没找到ios方法')
        }
      } catch (e) {
        console.log(e)
      }
    }
  },

appJAMK_Login是app提供的方法。

大概步骤就是，点击“个人中心”，h5触发app的appJAMK_Login方法，app方法被触发后执行一系列逻辑，饭后调用window.h5JAMK_setOpenidCallback并传递参数。