H5跳转app

@随时WIFI

已于 2024-09-02 13:11:29 修改

阅读量159

点赞数 2

分类专栏：前端小tips 文章标签： javascript 前端

于 2024-08-22 10:31:57 首次发布

本文链接：https://blog.csdn.net/m0_71371266/article/details/141420688

版权

前端小tips 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

接到一个需求，是通过小程序跳转jd app，我这里做的是通过h5作为中转跳转app，我感觉是更方便的，以下是简易的跳转

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>接收参数示例</title>
  </head>
  <body>
    <h1>接收到的参数</h1>
    <p id="param1"></p>
    <a href="" id="jd2" onclick="handleJdUrl">跳转1</a>
    <a href="" id="jd4" onclick="TurnToJD">跳转2</a>
    <script>
      // 需要跳转的链接
      // https://item.jd.com/100109471508.html
      var url = window.location.href;

      function handleJdUrl() {
        let url = "https://item.jd.com/100109471508.html";
        var openUrl = `openApp.jdMobile://virtual?params={"category":"jump","des":"m","sourceValue":"babel-act","sourceType":"babel","url":"https://u.jd.com/3I1C9vl","M_sourceFrom":"h5auto","msf_type":"auto"}`;
        document.location.href = openUrl;
      }


      ///跳转至京东商品详情页或店铺页
      function TurnToJD() {
        var id = "100109471508";
// 这里直接使用URLencode加密了
// "openapp.jdmobile://virtual?params={"sourceValue":"0_productDetail_97","des":"productDetail","skuId":"100109471508","category":"jump","sourceType":"PCUBE_CHANNEL"}"
        window.location.href =
          "openapp.jdmobile://virtual?params=%7B%22sourceValue%22:%220_productDetail_97%22,%22des%22:%22productDetail%22,%22skuId%22:%22" +
          id +
          "%22,%22category%22:%22jump%22,%22sourceType%22:%22PCUBE_CHANNEL%22%7D";
      }
    </script>
  </body>
</html>

这里有两个方法

handleJdUrl 跳转到app首页
TurnToJD 跳转到商品详情页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>接收参数示例</title>
  </head>
  <body>
    <h1>接收到的参数</h1>
    <p id="param1"></p>
    <a href="" id="jd4" onclick="TurnToJD">跳转4</a>
    <script>

      let jdDict = { category: "jump", des: "getCoupon", url: "" };
      let url3 =
        'openApp.jdmobile://virtual?params={"category":"jump", "des":"getCoupon", "url":"https://item.jd.com/100109471508.html"}';

      document.getElementById("jd4").href = url3;
      document.getElementById('param1').textContent = url3
    </script>
  </body>
</html>

这种也是可以的

补充：

以上的存在一个限制，那就是有些浏览器支持跳转，有些浏览器不支持，例如在移动端百度浏览器就不支持跳转，所以这里我重新做了另一个方案

就是通过将小程序（我这里本来是做的小程序）打包为h5
将h5部署到服务器（这是为了简单，也可以不部署）
新建一个5+app项目
配置相关的信息
然后直接打包即可

以下是修改后的代码

toJDDetail(url) {
// url ：https://item.jd.com/10103374642969.html
    console.log(url)
    if (process.env.UNI_PLATFORM === 'h5') {
        // 当前是H5环境  
        var skuId = url.split('/').pop().split('.html')[0] // 获得商品id 10103374642969
        var shopUrl =
                "openapp.jdmobile://virtual?params=%7B%22sourceValue%22:%220_productDetail_97%22,%22des%22:%22productDetail%22,%22skuId%22:%22" +
                skuId + "%22,%22category%22:%22jump%22,%22sourceType%22:%22PCUBE_CHANNEL%22%7D"
        // window.location.href = shopUrl
        // 判断是否安装了京东app
        var isApp = plus.runtime.isApplicationExist({
                pname: "com.jingdong.app.mall",
                action: "openApp.jdMobile://"
        })

        if (isApp) {
                plus.runtime.openURL(shopUrl, function(error) {
                        alert(JSON.stringify(error))
                }, 'com.jingdong.app.mall');

        } else {
                // 没有则跳转到应用市场安装
                plus.runtime.openURL("market://details?id=com.jingdong.app.mall");
        }
    } else if (/^mp-/.test(process.env.UNI_PLATFORM)) {
        // 当前是小程序环境  
        console.log('运行在小程序环境', process.env.UNI_PLATFORM);
        uni.navigateTo({
                url: '/pagesA/webview/webView?url=' + url
        })
    }
}

这里注意，plus是5+ 自带的一个api，这里需要通过这个去判断当前是什么端

以上就是我对于小程序唤起app，这个需求的不断迭代，后面也就变成了app->app的唤起了

上面讲的挺简略的，哪里有问题的欢迎交流哈！！！

补充：如果是APP，那么通过这个process.env.UNI_PLATFORM，判断的是app-plus