vue使用wx-open-launch-weapp
vue使用wx-open-launch-weapp
<template>
<div style="width: 100%; height: 100%;">
按钮按钮:
<wx-open-launch-weapp
username="gh_"
path="/pages/index/index.html"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px}</style>
<button class="btn">跳转小程序</button>
</script>
</wx-open-launch-weapp>
</div>
</template>
<script>
import {openWxmini} from '@/assets/js/api.js'
export default {
methods: {
wxmini(){
// 获取密钥
openWxmini({url:window.location.href}).then(res=>{
let {appId,nonceStr,signature,timestamp} = res.result
wx.config({ // eslint-disable-line
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId, // 必填,公众号的唯一标识
timestamp, // 必填,生成签名的时间戳
nonceStr, // 必填,生成签名的随机串
signature,// 必填,签名
jsApiList: ['onMenuShareTimeline'], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
/* eslint-disable */
wx.ready(function () {
console.log('ready')
});
})
}
},
created() {
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);
},
}
</script>
<style>
</style>
注:父元素 display:none;的情况下,会出现不渲染的bug。在wx-open-launch-weapp 标签上加 style=“display: inline-block;border: none;”
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· Vue3状态管理终极指南:Pinia保姆级教程