关于vue3，使用wx-open-launch-weapp，提示... ＜wx-open-launch-weapp＞ is missing

最新推荐文章于 2025-09-30 09:56:42 发布
原创 最新推荐文章于 2025-09-30 09:56:42 发布 · 1.3k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文讲述了作者在将Vue项目从Vue2升级到Vue3.1.0以上版本后遇到的问题，即官方文档针对Vue2，而在Vue3中需使用内置组件。作者分享了解决方案，即如何在Vue3的template中正确插入script标签。

折腾了好久，终于搞定了，

官方文档是针对vue2的，vue3要使用component内置组件，尤其是vue3的版本超过3.1.0的

<wx-open-launch-weapp username="" path="">
  <component :is="'script'" type="text/wxtag-template">
    <div style="width: 40rem; height: 5rem" />
  </component>
</wx-open-launch-weapp>

之前可能是我升级了vue的版本，导致超过了3.1.0导致的。

感谢原帖子给的思路：vue.js - Vue3如何在template插入script标签 - SegmentFault 思否

qianduan22
关注
vue3项目wx-open-launch-weapp使用
xueyawuhai的博客
06-23 2804
wx-open-launch-weap 第一步：weixin-js-sdk 第二步：拉取wx.config的权限验证配置 点击跳转微信jssdk配置文档例如H5中要跳转对应的小程序去，使用小程序跳转标签wx-open-launch-weapp 第三步：使用示例v-is指令渲染script标签 由于实际情况wx-open-launch-weapp 的样式不好调试，并且实际情况按钮往往是一张图片，所以把上面的代码做成组件，绝对定位覆盖在按钮图片上面。...
微信h5环境使用开放标签（wx-open-launch-weapp）打开三方小程序
YBWarmYoung的博客
02-05 2266
业务域名配置：在微信公众平台中正确配置 H5 页面使用的业务域名。小程序原始 ID：确保在标签的 username 属性中填写小程序的原始 ID。HTTPS 环境：H5 页面必须在 HTTPS 环境下运行，否则会导致功能无法使用。微信 JSSDK 配置：确保正确调用 wx.config。确保调取的公众号接口有开放标签（wx-open-launch-weapp）或其他功能的权限 注：本人踩过坑。。
Vue使用wx-open-launch-weapp跳转小程序
Mr_C_C的博客
08-26 1万+
最近遇到个需求，公众号没有授权手机号的操作，所以需要跳转到小程序获取手机号，查看了微信的官方文档，翻到了这个wx-open-launch-weapp h5跳转小程序。 奉劝各位，看文档一定要仔细啊????。 看了半天文档，又在网上折腾了一番，终于搞出来了，废话不多说，直接上代码。 官方给出的demo是这个样子的： <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index?
uniapp vue3跳转微信小程序：wx-open-launch-weapp
最新发布
===
09-30 252
【代码】uniapp vue3跳转微信小程序：wx-open-launch-weapp。
vue3中使用wx-open-launch-weapp
qq_40039641的博客
06-26 3496
vue3中公众号跳转小程序的开放标签使用
vue3使用小程序的wx-open-launch-weapp
大赚万万亿
02-11 2475
理论是vue3需要显示配置需要被忽略的标签,但实际测试下来,就算注释之,也可以正常使用. 忽略标签方法说明全局 API | Vue.js const vueIns = Vue.createApp({}) vueIns.config.compilerOptions.isCustomElement = tag => tag.startsWith('wx-open-launch-weapp') 在.vue文件中,按下方格式编写,关键点就是vue3要用v-is <wx-open-lau...
h5网页跳转微信小程序的方法，wx-open-launch-weapp按钮不显示
xyphf的博客
03-25 8901
最近踩了一条大坑啊，h5页面跳转微信小程序wx-open-launch-weapp下面的按钮一直不显示，琢磨了好久，查看微信开发者社区差不多有30页同问？ 微信h5页面是怎么跳转微信小程序的？ 1、打开微信开发者jssdk文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21 2、看 2.1 跳转小程序：wx-open-launch-weapp 3、我在看一下JS-SDK的说明文
＜wx-open-launch-weapp＞ 失效不显示问题（已解决）
宇珩的博客
06-06 4092
失效不显示问题（已解决）
wx-open-launch-app微信浏览器打开指定app app指定页面 vue3
05-17
主要适用于 微信中的分享 在微信浏览器中 打开指定app 一般是用于uniapp的开发的app 当然其他的原生开发的app 也可以作为参考 都是源码 请自行参考 注释的都是可以自行替代 已经上线 源码没有bug
h5跳转到微信小程序--wx-open-launch-weapp
impossible1994727的博客
05-26 1192
说明： 记录的是我做过的项目，各位仅供参考。 参考文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 官方使用步骤： 绑定域名，登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 引入j s文件：在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https） 通过con
微信公众号跳转小程序 wx-open-launch-weapp(h5)
liu_genggeng的博客
10-21 1047
wx-open-launch-weapp(h5)跳转小程序
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
10-14
主要介绍了VUE使用 wx-open-launch-app 组件开发微信打开APP功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue3项目中使用微信开放标签wx-open-launch-weapp实现点击跳转到微信小程序
Annie的博客
08-22 7326
一、vue.config.js配置 在vue项目中，直接使用微信开放标签会报错，所以要配置忽略对微信标签的校验，在 vue.config.js 中增加如下配置。 module.exports = { //...其他配置 chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .tap(options => { options.compile...
vue使用wx-open-launch-weapp
热门推荐
CherryCola_zjl的博客
12-14 1万+
页面报错找不到模板wx-open-launch-weapp,可以在main.js配置下面是实测可用代码，替换接口就ok。username替换成你的小程序原始IDstylewidth100%;height100%;paddingclass"btn"
微信公众号跳转小程序 wx-open-launch-weapp，在vue3+vite中使用 (多个问题集锦)
DTCloud
03-29 904
写这篇文章为了解决现在没有⼀个合集 ，所以我参考其他文档， 及自己的测试最后得出完整的方案。
uni-app vue3 微信公众号h5使用wx-open-launch-weapp 跳转打开微信小程序
qq_33220172的博客
11-24 1164
uni-app vue3制作的微信公众号h5打开指定的微信小程序
wx-open-launch-weapp 缺少id 信息不完整无法启动
sam的博客
09-06 733
找了各种方法，已经裂开了，经过各种测试，原因是：客户提供的username="原始id"错误
H5跳转小程序按钮不显示（wx-open-launch-weapp），坑应该全部在这里了
chaishen10000的专栏
10-11 9572
1、开发使用者必须是已认证的服-务-号（服务号可以置顶，订阅号不能），服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 2、开发使用者必须是已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。 3、必须部署到正式服务器，测试公众号不显示图标。 4、必须是在已认证的服务号中做JS接口安全域名验证，“JS接口安全域名”和“IP白名单”都要，IP是指获取微信签名的服务器的IP。 注意：1、2两个条件必须满足其中一个；3
wx-open-launch-weapp 按钮显示不出来，怎么回事
細水、長流√的专栏
12-22 4431
<wx-open-launch-weapp id="launch-btn" username="gh_1ac06b5a8f4e" path="/pages/index/index?cityCode=4401&ysschannel=2019DSGZHCDL_61034_gz"> <template> <style>.
vue中使用<wx-open-launch-weapp >
09-15
在 Vue 中使用 `<wx-open-launch-weapp>` 组件时，你需要按照以下步骤进行操作： 1. 首先，确保已经在项目中引入了微信小程序的相关 SDK。 2. 在 Vue 组件中，可以直接使用 `wx-open-launch-weapp` 标签来包裹需要触发打开小程序的内容。 ```html <template> <div> <wx-open-launch-weapp :appid="appId" :path="path" :extra-data="extraData"> <!-- 包裹需要触发打开小程序的内容 --> <button>打开小程序</button> </wx-open-launch-weapp> </div> </template> ``` 3. 在 Vue 组件的 `data` 中定义必要的参数，例如 `appId`、`path` 和 `extraData`： ```javascript <script> export default { data() { return { appId: &#39;yourAppId&#39;, // 小程序 AppID path: &#39;pages/index&#39;, // 小程序页面路径 extraData: {} // 打开小程序时传递的额外参数 } } } </script> ``` 4. 根据实际需求，可以对 `<wx-open-launch-weapp>` 组件进行自定义配置，例如可以添加 `bindsuccess` 和 `bindfail` 事件来处理打开小程序成功和失败的情况。 ```html <wx-open-launch-weapp :appid="appId" :path="path" :extra-data="extraData" @bindsuccess="onLaunchSuccess" @bindfail="onLaunchFail" > <!-- 包裹需要触发打开小程序的内容 --> <button>打开小程序</button> </wx-open-launch-weapp> ``` ```javascript <script> export default { // 其他代码... methods: { onLaunchSuccess() { // 打开小程序成功时的回调 console.log(&#39;小程序打开成功&#39;); }, onLaunchFail(e) { // 打开小程序失败时的回调 console.log(&#39;小程序打开失败&#39;, e); } } } </script> ``` 以上是在 Vue 中使用 `<wx-open-launch-weapp>` 组件的基本方法，根据自己的实际需求进行配置即可。注意，还需要在微信小程序后台配置好相应的参数，例如 AppID 和页面路径等。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值