小程序
小游戏
企业微信
微信支付
扫描小程序码分享
在uniapp中使用h5跳转小程序，组件引用报错，说没有注册组件，我都jssdk都可以使用，有没有官方的小哥哥小姐姐解答一下？？？？
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
<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;
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
已经解决
我现在是真机调试下ios能显示按钮，安卓机显示不了
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
<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>
已经解决
我现在是真机调试下ios能显示按钮，安卓机显示不了