小程序
小游戏
企业微信
微信支付
扫描小程序码分享
按照官方文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 配置后出现如下问题
1、vue中提示组建未注册
2、页面按钮不显示
有踩完坑的吗 分享一下经验
12 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
<view v-html="html"></view>
setTimeout(function() {
that.html = '<wx-open-launch-weapp id="launch-btn" username="xxx">\
<template>\
<button>小程序跳转</button>\
</template>\
</wx-open-launch-weapp>'
}, 2000)
我这边出现同样问题,处理了下,得等加载完配置后再载入就可以了
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
vue提示组件未注册:
// 3.0之前 Vue.config.ignoredElements = ['wx-open-launch-weapp'] // 3.0之后 const app = createApp({}) app.config.compilerOptions.isCustomElement = tag => tag.startsWith('wx-open-launch-weapp') 微信开放标签 发布了才会显示 微信开发者工具也会显示
亲测可以 https://blog.csdn.net/CherryCola_zjl/article/details/111165702
<template>
<div class="content">
<img class="logo" src="~assets/images/logo.png" alt="">
<p class="text">正在打开“花生大学”微信小程序</p>
<div class="open" @click="isWeixin ? open : ''">打开小程序</div>
<div class="weapp" v-if="isWeixin" >
<wx-open-launch-weapp username="gh_2986a360565d" path="/pages/index/index.html">
<script type="text/wxtag-template">
<style>
.btn {
height: 4000px; !impoartant;
width: 5000px; !important;
background-color: #f04146;
color: #ffffff;
}
</style>
<div class="btn">跳转小程序</div>
</script>
</wx-open-launch-weapp>
</div>
</template>
<script>
export default {
data() {
return {
isWeixin: false,
wxData: {}
},
methods: {
async wxmini(){
const res = await fetch('/clawApi/getShareConfig', {
method: 'POST',
headers: { 'Content-Type': 'application/json; charset=utf-8' },
body: JSON.stringify({
url: window.location.href
})
}).then(response => response.json())
.then(data => {
return data
});
console.log(res)
this.wxData = res?.data
const { timestamp, appID, nonceStr, signature } = this.wxData
wx.config({ // eslint-disable-line
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: appID, // 必填,公众号的唯一标识
timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: ['onMenuShareTimeline'], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
/* eslint-disable */
wx.ready(function () {
console.log('ready')
mounted() {
const ua = navigator.userAgent.toLowerCase()
const isWXWork = ua.match(/wxwork/i) == 'wxwork'
this.isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
if(this.isWeixin) {
const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
oScript.onload = this.wxmini
document.body.appendChild(oScript);
head() {
script: [
{
src: "https://changba.com/njwap/stats/index/entry?id=1212",
type: "text/javascript",
charset: "utf-8"
]
<style lang="scss" scoped root-value="37.5">
.content {
width: 375px;
height: 100vh;
margin: 0 auto;
overflow: hidden;
font-family: PingFangSC-Regular;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
.logo {
width: 150px;
height: 150px;
margin-top: -50px;
.text {
width: 100%;
font-size: 20px;
text-align: center;
.open {
width: 200px;
height: 50px;
margin-top: 30px;
border-radius: 30px;
color: #fff;
font-size: 18px;
.weapp {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100000;
font-size: 100px;
opacity: 0;
请问是必须要在微信浏览器才能用是吧?其他浏览器或者app中的h5页中是拉不起小程序的吧?
https://www.dengwz.com/archives/137 看这篇文章
<template> <div class="home"> <wx-open-launch-weapp id="launch-btn" username="gh_" @launch="handleLaunchFn" @error="handleErrorFn" > <script type="text/wxtag-template"> <style>.btn { display: flex;align-items: center; }</style> <button class="wx-btn">跳转小程序</button> </script> </wx-open-launch-weapp> </div> </template> <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> export default { data () { return { } }, mounted () { }, methods: { handleLaunchFn (e) { console.log(e) }, handleErrorFn(e){ console.log('fail', e.detail); } } } </script>
https://www.jianshu.com/p/559c29c80fd9
react中使用wx-open-launch-weapp不显示?
解决了么?
正在加载...
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
<view v-html="html"></view>
setTimeout(function() {
that.html = '<wx-open-launch-weapp id="launch-btn" username="xxx">\
<template>\
<button>小程序跳转</button>\
</template>\
</wx-open-launch-weapp>'
}, 2000)
我这边出现同样问题,处理了下,得等加载完配置后再载入就可以了
vue提示组件未注册:
// 3.0之前 Vue.config.ignoredElements = ['wx-open-launch-weapp'] // 3.0之后 const app = createApp({}) app.config.compilerOptions.isCustomElement = tag => tag.startsWith('wx-open-launch-weapp') 微信开放标签 发布了才会显示 微信开发者工具也会显示
亲测可以 https://blog.csdn.net/CherryCola_zjl/article/details/111165702
<template>
<div class="content">
<img class="logo" src="~assets/images/logo.png" alt="">
<p class="text">正在打开“花生大学”微信小程序</p>
<div class="open" @click="isWeixin ? open : ''">打开小程序</div>
<div class="weapp" v-if="isWeixin" >
<wx-open-launch-weapp username="gh_2986a360565d" path="/pages/index/index.html">
<script type="text/wxtag-template">
<style>
.btn {
height: 4000px; !impoartant;
width: 5000px; !important;
background-color: #f04146;
color: #ffffff;
}
</style>
<div class="btn">跳转小程序</div>
</script>
</wx-open-launch-weapp>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isWeixin: false,
wxData: {}
}
},
methods: {
async wxmini(){
const res = await fetch('/clawApi/getShareConfig', {
method: 'POST',
headers: { 'Content-Type': 'application/json; charset=utf-8' },
body: JSON.stringify({
url: window.location.href
})
}).then(response => response.json())
.then(data => {
return data
});
console.log(res)
this.wxData = res?.data
const { timestamp, appID, nonceStr, signature } = this.wxData
wx.config({ // eslint-disable-line
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: appID, // 必填,公众号的唯一标识
timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: ['onMenuShareTimeline'], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
/* eslint-disable */
wx.ready(function () {
console.log('ready')
});
}
},
mounted() {
const ua = navigator.userAgent.toLowerCase()
const isWXWork = ua.match(/wxwork/i) == 'wxwork'
this.isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
if(this.isWeixin) {
const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
oScript.onload = this.wxmini
document.body.appendChild(oScript);
}
},
head() {
return {
script: [
{
src: "https://changba.com/njwap/stats/index/entry?id=1212",
type: "text/javascript",
charset: "utf-8"
}
]
}
}
}
</script>
<style lang="scss" scoped root-value="37.5">
.content {
width: 375px;
height: 100vh;
margin: 0 auto;
overflow: hidden;
font-family: PingFangSC-Regular;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.logo {
width: 150px;
height: 150px;
margin-top: -50px;
}
.text {
width: 100%;
font-size: 20px;
text-align: center;
}
.open {
width: 200px;
height: 50px;
background-color: #f04146;
margin-top: 30px;
border-radius: 30px;
color: #fff;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
}
.weapp {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100000;
font-size: 100px;
overflow: hidden;
opacity: 0;
}
</style>
请问是必须要在微信浏览器才能用是吧?其他浏览器或者app中的h5页中是拉不起小程序的吧?
https://www.dengwz.com/archives/137 看这篇文章
<template> <div class="home"> <wx-open-launch-weapp id="launch-btn" username="gh_" @launch="handleLaunchFn" @error="handleErrorFn" > <script type="text/wxtag-template"> <style>.btn { display: flex;align-items: center; }</style> <button class="wx-btn">跳转小程序</button> </script> </wx-open-launch-weapp> </div> </template> <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> export default { data () { return { } }, mounted () { }, methods: { handleLaunchFn (e) { console.log(e) }, handleErrorFn(e){ console.log('fail', e.detail); } } } </script>
https://www.jianshu.com/p/559c29c80fd9
react中使用wx-open-launch-weapp不显示?
解决了么?