收藏
回答

wx-open-launch-app 在真机上点击无效?

在微信开发者工具调试是可以提示打开应用弹窗,使用debug查看也是正确注册的了,在真机上也显示按钮了 就是点击后无反应:

真机debug显示

这是在开发者工具中显示的


部分代码如下

import { signature } from '@/api/shop';
import '@/components/OpenAppButton/index.scss';
import { Button, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useEffect, useState } from 'react';
import wx from 'weixin-js-sdk-ts';


// 🧭 App 唤起相关链接配置
const httpUrl = location.origin || location.host;
const universalLink = `${httpUrl}/home/consume`; //  Universal Link / App Link
const fallbackDownloadUrl = `${httpUrl}/download`; // 未安装 App 的跳转地址


// ✅ 判断设备 / 环境
const isWeChat = () => /micromessenger/i.test(navigator.userAgent);


const OpenAppButton = () => {
  const [wxReady, setWxReady] = useState(false);


  useEffect(() => {
    if (!isWeChat()) return;


    const url = window.location.href.split('#')[0];


    // ✳️ 请求后端接口,获取微信 JS-SDK 签名参数
    signature(encodeURIComponent(url))
      .then(res => {
        let data = res.data;
        wx.config({
          debug: true,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.nonceStr,
          signature: data.signature,
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
          openTagList: ['wx-open-launch-app'],
        });


        wx.ready(() => {
          console.log('✅ wx.ready');
          setWxReady(true);
        });
        wx.error(err => {
          console.error('❌ wx.config error', err);
        });
      })
      .catch(err => {
        console.error('❌ 获取微信签名失败', err);
      });
  }, []);


  // 非微信环境下打开 App
  const handleOpenApp = () => {
    if (isWeChat()) {
      Taro.showToast({ title: '请点击下方按钮打开 App', icon: 'none' });
      return;
    }


    // 👇 尝试唤起 App,若失败则跳转 fallback 下载地址
    const timer = setTimeout(() => {
      window.location.href = fallbackDownloadUrl;
    }, 2000);


    window.location.href = universalLink;


    // ⚠️ 清理定时器(理论上如果跳转成功,这行执行不到)
    window.addEventListener('visibilitychange', () => {
      if (document.hidden) clearTimeout(timer);
    });
  };


  return (
    <View className="openAppButton">
      {isWeChat() && wxReady ? (
        // ✅ 微信卡片内生效:wx-open-launch-app
        <wx-open-launch-app
          appid="xxxxxxxx"
          extinfo={`productId=125`}
          id="launch-btn"
          onerror={() => Taro.showToast({ title: '打开失败,请使用浏览器', icon: 'none' })}
          onlaunch={() => console.log('📲 App 已唤起')}
        >
          <script
            type="text/wxtag-template"
            dangerouslySetInnerHTML={{
              __html: `
                <div class="btn">打开xx优选 App</div>
              `,
            }}
          />
        </wx-open-launch-app>
      ) : (
        // ✅ 普通浏览器点击按钮跳转 App
        <Button onClick={handleOpenApp}>打开xx优选</Button>
      )}
    </View>
  );
};


export default OpenAppButton;

回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    2025-06-30

    你好,控制台一步一步Debug,打印config相关参数截图(别打码)

    2025-06-30
    有用
    回复 1
    • 张玉峰
      张玉峰
      2025-06-30
      排查到问题了,只在生产环境https://www.beeselect.net中生效,是因为服务号移动应用配置的的应用官网地址是https://www.beeselect.net的原因吗? 我看我pre环境走的fail 然后打开的APPStore 服务号移动应用可配置的应用官网只有一个地址
      2025-06-30
      回复
登录 后发表内容