y***@yuexiang365.cn
y***@yuexiang365.cn
  • 发布:2026-05-25 19:56
  • 更新:2026-05-25 19:57
  • 阅读:67

【报Bug】wx-open-launch-app 使用uniapp 编译的h5代码报的错误

分类:HTML5+

产品分类: HTML5+

HBuilderX版本号: 5.07

手机系统: Android

手机系统版本号: Android 14

手机厂商: 小米

手机机型: 红米K80

打包方式: 云端

App下载地址或H5⽹址: https://test.huanjuai.net/pages/share/draw?id=&sharepage=1

示例代码:

<wx-open-launch-app
id="launch-btn"
appid="wx0b04c58cf16e673"
extinfo="huanjuapp://pages/index/index"
style="width: 200px; height: 60px;"

<script type="text/wxtag-template">
<!-- 模板内容也需要设置样式来撑开 -->
<style>
.btn {
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #07C160;
color: #fff;
border-radius: 8px;
}
</style>
<div class="btn">打开App</div>
</script>
</wx-open-launch-app>

操作步骤:

1

预期结果:

1

实际结果:

1

bug描述:

使用uniapp 编译的h5代码报的错误[WXTAG] [JSCORE] The slot <template> or <script type="text/wxtag-template"> of <wx-open-launch-app> is missing

2026-05-25 19:56 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

缺少平台分类,请补充安卓、iOS、鸿蒙Next或小程序。需提供HBuilderX版本及完整示例代码以便排查渲染尺寸问题。
欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

好的,我们来评审一下这个 bug 反馈。

评审人视角(DCloud 官方人员)

1. 反馈内容完整性评价

这份 bug 反馈在内容上严重不完整,无法支撑官方人员进行有效的分析和复现。

  • BUG 描述
    描述本身是清晰的,指出了错误信息 [WXTAG] [JSCORE] The slot <template> or <script type="text/wxtag-template"> of <wx-open-launch-app> is missing。但是,它缺少了最关键的环境上下文:这个错误是在什么环境下出现的?是在 HBuilderX 内置浏览器预览时,还是在微信开发者工具中,或是在真机微信客户端内打开的网页中?这个信息对于判断问题至关重要。

  • 代码示例
    提供的代码片段是标准的微信开放标签写法,从语法上看没有明显错误。然而,它不是一个可独立运行的完整代码。它缺少了在 uni-app 的 H5 项目中,如何正确引入和使用微信 JS-SDK(jweixin-module)、配置 wx.config 并验证 openTagList 的完整逻辑。官方人员拿到这段代码,无法直接运行测试。

  • 复现步骤
    “1” 不是一个有效的复现步骤。开发者没有说明在什么情况下会出现这个错误,例如:项目编译为 H5 后,在微信开发者工具中打开报错?还是部署到服务器后在手机微信中打开报错?这导致官方人员无法根据描述成功复现问题。

  • 预期结果与实际结果
    均为 “1”,这属于无意义的填充。没有说明期望看到什么(例如:期望显示“打开App”的按钮并成功唤起App),也没有描述实际看到了什么(例如:页面空白、按钮不显示、控制台报错等)。

  • 分类信息
    提供了 HBuilderX 版本号(5.07)、手机平台(Android)和设备信息,这部分相对完整。但缺少了更关键的项目创建方式(Vue 2 还是 Vue 3)、浏览器环境(Chrome 还是微信内置浏览器)等复合问题核心的分类。

2. 问题是否成立分析

这个问题是否成立取决于具体场景,但由于反馈信息不足,目前无法直接判定。我们可以从两个层面来分析:

  • 场景一:在非微信客户端环境(如 PC Chrome 浏览器)下开发调试
    如果你是在普通的 Chrome 浏览器中运行 uni-app 编译的 H5 代码,看到这个错误,那么这不是一个 bugwx-open-launch-app 是微信的开放标签,它必须且只能在微信客户端内置的浏览器环境中才能被正确解析和唤起。在普通浏览器中没有微信的运行环境,自然会报错。

  • 场景二:在微信客户端内打开时出现此问题
    如果是在手机微信里打开网页时出现这个错误,那么问题可能成立,但原因复杂。根据 ask 社区的经验,uni-app 的 Vue 模板编译器可能会与微信标签内的 <script type="text/wxtag-template"> 产生冲突,导致内容被忽略或编译异常,从而引发“slot missing”的错误。

3. 是否为基本概念问题及解决方案

这很可能是一个基础概念和特定环境配置的问题。

  • 基本概念:开发者需要明确,wx-open-launch-app 这类微信开放标签,仅在微信客户端内生效。在普通浏览器或 HBuilderX 内置浏览器中开发调试时,它们无法工作,这是预期行为,不是框架的 bug。

  • 解决方案与替代思路
    根据知识库中 ask 社区的类似问题(如 wx-open-launch-weapp),在 uni-app 的 H5 项目中处理微信开放标签时,一个常见且有效的做法是使用 v-html 来绕过 Vue 的模板编译。你可以将标签和插槽内容动态渲染到页面上。

    参考代码如下

    <template>  
    <view>  
      <!-- 使用 v-html 动态渲染微信开放标签 -->  
      <view v-html="wxOpenLaunchApp"></view>  
    </view>  
    </template>  
    
    <script>  
    export default {  
    data() {  
      return {  
        wxOpenLaunchApp: ''  
      };  
    },  
    onReady() {  
      // 在合适的时机(如 wx.config 配置成功后)动态生成标签内容  
      this.wxOpenLaunchApp = `  
        <wx-open-launch-app  
          id="launch-btn"  
          appid="wx0b04c58cf16e673"  
          extinfo="huanjuapp://pages/index/index"  
          style="width: 200px; height: 60px;"  
        >  
          <script type="text/wxtag-template">  
            <style>  
              .btn {  
                width: 200px;  
                height: 60px;  
                line-height: 60px;  
                text-align: center;  
                background-color: #07C160;  
                color: #fff;  
                border-radius: 8px;  
              }  
            </style>  
            <div class="btn">打开App</div>  
          <\/script>  
        </wx-open-launch-app>  
      `;  
    }  
    };  
    </script>  

    本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
    关键点提醒

    1. JS 安全域名:确保你的网页域名已绑定到微信公众号的“JS接口安全域名”下。
    2. 微信 JS-SDK 配置:确保已正确引入 jweixin-module,并通过后端获取签名完成 wx.config 配置,且在 openTagList 中包含了 ['wx-open-launch-app']
    3. 真机测试:所有微信开放标签的功能,都必须在真机微信客户端内打开网页进行测试,微信开发者工具的模拟器环境可能不准确。

总结建议

请开发者首先确认你的测试环境是否为手机微信客户端。如果不是,那么该报错属于正常现象,请切换到真机微信环境测试。如果是在真机微信内测试仍然报错,建议你参考上述 v-html 的方案来规避 Vue 模板编译层的冲突,并完善本 bug 反馈的描述、复现步骤、预期/实际结果,以便我们做进一步的跟踪。

内容为 AI 生成,仅供参考

要回复问题请先登录注册