h5跳转app以及微信小程序方法

本文介绍最新的H5与APP之间的跳转方法,包括微信开放标签的使用,如wx-open-launch-app和wx-open-launch-weapp,以及浏览器跳转APP的旧方法。通过详细示例,展示了如何在微信内置浏览器中实现跳转,并提供了跳转小程序的代码示例。

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

最新方法:

h5和app之间的跳转

微信开放标签
1.跳转APP:wx-open-launch-app
官方文档:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22

<div class="goods_xf" id="goods_xf">
  <wx-open-launch-app
    id="launch-btn"
    appid="wxfcc4c272c838f53d"
    extinfo=""
  >
    <template>
      <style></style>
      <div>打开app</div>
    </template>
  </wx-open-launch-app>
</div>

2.跳转小程序:wx-open-launch-weapp
官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

h5跳转小程序

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
wx.miniProgram.navigateTo({ url: '/packageActivity/redPacket/open' })

以下为旧的方法:

1.浏览器跳转app

	<div id="openApp"></div>
   <script type="text/javascript">
    document.getElementById('openApp').onclick = function(e) {
        //ios
        if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
 
            var browser = navigator.userAgent.toLowerCase();
 
            if(browser.match(/micromessenger/i)) {
                //微信内置浏览器
                window.location.href ="PigTrading://";  ios跳转app协议
                window.setTimeout(function() {
                    window.location.href = "https://itunes.apple.com/cn/app/zhu-yi-tong/id904595949?l=en&amp;mt=8"; 
                }, 1000)
                return
            } else {
                window.location.href ="PigTrading://";    // ios跳转app协议
                window.setTimeout(function() {
                    window.location.href = "https://itunes.apple.com/cn/app/zhu-yi-tong/id904595949?l=en&amp;mt=8";
                }, 2000)
                return
            }
        }
 
        if(navigator.userAgent.match(/android/i)) {
            //Android
            window.location.href = "zyt://zhuetong/wzydetail?aid=$aid";//android跳转协议
            window.setTimeout(function() {
                window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.lty.zhuyitong"
            }, 2000)
            return
        }
 
    };
</script>

2.微信端浏览器跳转app

使用微信开放标签
官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

<wx-open-launch-app
  id="launch-btn"
  appid="app的id"
  extinfo="传值给app (如果要调到指定页面可用)"
>
  <div></div>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </template>
</wx-open-launch-app>

<a href="https://www.zhue.cn/shop-sdlc.html" target="_blank">https://www.zhue.cn/shop-sdlc.html</a>

<script>

  url=location.href;
  $.ajax({
    type : "post",
    url : "获取信息的地址",
    data : {posturl:url},
    success : function(data){
      console.log(data)
        var data = eval("0,("+data+")");
        wx.config({
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            debug: false,
            signature: data.signature,
            jsApiList: [
                "onMenuShareTimeline"
            ],
            openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
        });
    }
  });

  var btn = document.getElementById('launch-btn');

  btn.addEventListener('launch', function (e) {
     alert('success');
  });

  btn.addEventListener('error', function (e) {
  // "launch:fail" 调用失败,或安卓上该应用未安装,或iOS上用户在弹窗上点击确认但该应用未安装
  // "launch:fail_check fail" 校验App跳转权限失败,请确认是否正确绑定AppID
    alert('fail111', e.detail);
  });
  
  btn.setAttribute('extinfo', `"${url}"}`)


</script>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SuTongA

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值