vue2项目点击跳转小程序

发布时间:2026/7/18 22:38:36
vue2项目点击跳转小程序 需求在vue2项目中点击某个按钮跳转到指定小程序第一步在main.js中暴露点击跳转的标签Vue.config.ignoredElements [wx-open-launch-weapp]第二步页面写对应的htmlwx-open-launch-weapp usernamegh_9fafa path stylewidth:100%;height:100%;display:block; script typetext/wxtag-template div stylewidth:100%;height:100%; 跳转小程序 /div /script /wx-open-launch-weappusernamegh_9fafa 为你要跳转的小程序原始ID必填path 是你要跳转小程序的路径可以为空这里需要注意的是把你要点击的按钮必须包在wx-open-launch-weapp标签里面不然不能跳转还有这里只能写行内样式/* global wx */ import api from /api export function initWxSdk() { return new Promise((resolve, reject) { //首先判断是否为微信环境 const ua navigator.userAgent.toLowerCase() if (!ua.includes(micromessenger)) { console.log(非微信环境) resolve() return } //你的页面路径地址 const url window.location.href.split(#)[0] console.log(待签名地址, url) //调用你的接口 api.chat.getWechatConfig(url).then(res { console.log(微信签名接口返回, res) const data res.data || res if (data.result ! success) { reject(签名返回状态异常) return } wx.config({ debug: false,//是否开启调试 appId: data.appId,// 公众号的唯一标识 timestamp: data.timestamp,// 时间戳秒级 nonceStr: data.nonceStr,// 随机字符串 signature: data.signature,// 签名 jsApiList: [],// 需要使用的 JS-SDK 接口列表 openTagList: [wx-open-launch-weapp] // 需要使用的开放标签列表 }) wx.ready(() { console.log(wx.ready 配置完成) resolve() }) wx.error(err { console.error(wx.config 错误, err) reject(err) }) }).catch(err { console.error(调用微信签名接口失败, err) reject(err) }) }) }以上必须要后端在公众号上做相关配置开白名单允许跳转小程序等。。。以上就完成了Vue2项目点击按钮直接跳小程序功能 (#^.^#)