企业官网建设流程全解析

需求：在vue2项目中点击某个按钮跳转到指定小程序

第一步：在main.js中暴露点击跳转的标签

Vue.config.ignoredElements = ['wx-open-launch-weapp']

第二步：页面写对应的html

<wx-open-launch-weapp username="gh_9fafa" path="" style="width:100%;height:100%;display:block;"> <script type="text/wxtag-template"> <div style="width:100%;height:100%;"> 跳转小程序 </div> </script> </wx-open-launch-weapp>

username="gh_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项目点击按钮直接跳小程序功能 (#^.^#)