最近公司有一个新的业务需求，企微分享卡片到企微、企微分享卡券到微信，点击领取、打开小程序进行领取。企微好像不可以直接跳转微信小程序，没有这样的接口，所以只能想另一种方法实现跳转，通过H5跳转微信小程序 我是V2的写法
这是第一次写这种需求，脑袋空白，也不知道从哪里搞起。还好之前的业务有企微分享卡片的功能，参照他的代码，慢慢理解，最后还是完成了。话不多说，直接上代码
步骤一：首先需要注入企微的权限，没有权限不能调用企微的接口，企微的开发文档上有相关的接口，大家直接去看一下 传送门 企微注入权限 我用的是自定义分享卡片
auth () {
let url = ''
if (window.location.href.indexOf('?') !== -1) {
url = window.location.href.substr(0, window.location.href.indexOf('?'))
} else {
url = window.location.href
}
const data = {
agentId: storage.get('agentId'),
url: url
}
this.$api('user.config', data).then(resCon => {
window.wx.agentConfig({
corpid: storage.get('corpId'), // 必填，企业微信的corpid，必须与当前登录的企业一致
agentid: storage.get('agentId'), // 必填，企业微信的应用id （e.g. 1000247）
timestamp: resCon.data.timestamp, // 必填，生成签名的时间戳
nonceStr: resCon.data.nonceStr, // 必填，生成签名的随机串
signature: resCon.data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
jsApiList: ['shareAppMessage',
'navigateToAddCustomer',
'getLocation', 'sendChatMessage', 'launchMiniprogram', 'openEnterpriseChat', 'shareWechatMessage'], // 必填，传入需要使用的接口名称
success: function (res) {
console.log('api注入成功')
storage.set('agentConfig', true)
},
fail: function (res) {
if (res.errMsg.indexOf('function not exist') > -1) {
alert('版本过低请升级')
}
console.log('api注入失败', res)
}
})
})
},步骤二：企微的权限注入成功以后就可以调用企微的分享接口 企微分享接口 这里有两种情况，企微 ==> 企微 企微 ==> 微信 调用了不同的接口, 分享的链接可以传递参数，供H5页面进行二次处理
toQW (item) {
console.log(item)
if (item.giftId) {
this.$api('push.sendGift', { giftId: item.giftId })
.then(res => {
console.log(res)
if (res && res.success) {
window.wx.invoke('shareAppMessage', {
title: item.name, // 分享标题
desc: item.name, // 分享描述
link: `${process.env.VUE_APP_COPONS_URL}/loanwechat/middlePage?recommendId=${res.data.recommendId}`, // 分享链接
imgUrl: item.img // 分享封面
}, function (res) {
if (res.err_msg === 'shareAppMessage:ok') {
console.log('企业微信分享成功', res) // 正确处理
} else {
console.log('企业微信分享失败', res) // 错误处理
}
})
}
})
.catch(err => {
console.log(err)
})
}
},
toWX (item) {
if (item.giftId) {
this.$api('push.sendGift', { giftId: item.giftId })
.then(res => {
if (res && res.success) {
window.wx.invoke('shareWechatMessage', {
title: item.name, // 分享标题
desc: item.name, // 分享描述
link: `${process.env.VUE_APP_COPONS_URL}/loanwechat/middlePage?recommendId=${res.data.recommendId}`, // 分享链接
imgUrl: item.img // 分享封面
}, function (res) {
if (res.err_msg === 'shareWechatMessage:ok') {
console.log('微信分享成功', res) // 正确处理
} else {
console.log('微信分享失败', res) // 错误处理
}
})
}
})
.catch(err => {
console.log(err)
})
}
}分享成功后，点击卡片就可以跳转对应的H5页面，再进行跳转小程序
步骤三：H5跳转小程序，使用开放性标签 wx-open-launch-weapp 跳转 这里是重点
在上代码前需要交代一些要点，否则可能会导致开放性标签加载失败，按钮不显示
1、要确认你的 appid 是不是正确的
2、确认你的 url 地址是不是正确的，注入权限时的url应该时本页面的url
3、开放性标签的样式问题，如果加了position：absolute，会显示，不加的话可能不显示，有的文章说不用加，我感觉应该是具体情况具体分析吧，你可以都试试，只要显示出来按钮就可以了
4、在注入权限的时候 jsApiList: [ ],里面不可以为空，你可以填写任意的接口，一般是chooseImage、previewImage这两个接口
5、最重要的，可别忘记注入开放性标签 openTagList: ['wx-open-launch-weapp'] 没有这个开放性标签就不会加载出来、更别说跳转小程序了
代码顺序：先引入微信公众号的文件 http://res2.wx.qq.com/open/js/jweixin-1.6.0.js 再通过JS-SDK 注入微信权限，这里的appid一定要写对，别问我为啥、问就是不显示按钮
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
下边是 wx-open-launch-weapp 标签代码
<wx-open-launch-weapp
id="launch-btn"
:path="'pages/Activity/index?recommendId=' + recommendId" // 要跳转小程序的路径可带参数
username="原始appid" // 这是小程序的原始appid gh开头的
env-version="trial" // 这是跳转先程序版本的 trial：体验版 release：正式版
style="width: 100vw;height: 100vh;position: absolute;"
@error="handleErrorFn" // 跳转失败事件
@launch="handleLaunchFn" // 跳转成功事件
>
<script type="text/wxtag-template">
<style type="text/css">img { position: absolute;left: 20%;bottom: 10%;width: 240px;height: 80px;}</style>
<img src="https://zjgxwtest.zrcbank.com/images/loanback_1683358540588.png" alt="" class="btn">
</script>
</wx-open-launch-weapp>下边的代码是注入权限的代码，
init () {
this.$api('share.config', {
appId: 'appid', // 正式
url: window.location.href // 当前页面的url，也就是从点击企微分享卡片的地址路径
}).then(res => {
console.log('config', res)
wx.config({
// debug: true,
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名
jsApiList: [
'chooseWXPay',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'chooseImage',
'previewImage'
], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp']
})
wx.ready(function () {
console.log('准备成功')
// config信息验证后会执行ready方法
})
wx.error(function (resErr) {
console.log('准备失败', resErr)
// config信息验证失败会执行error函数
})
})
},注入成功以后，就可以出现按钮了，点击按钮，提示即将打开“某某某”小程序
步骤四：H5跳转的小程序 参数只能在 onload 中获取，如果你有其他方法获取，教教老弟，我也想知道一下。
onLoad (options) {
var obj = wx.getLaunchOptionsSync()
if (obj.query && obj.query.recommendId) {
const recommendId = obj.query.recommendId
wx.setStorageSync('recommendId', recommendId)
}
}获取到参数以后，可以将参数保存本地 wx.setStorageSync('recommendId', recommendId)，等用过之后，再删除一下wx.removeStorageSync('recommendId', recommendId) 最后可以美美的测试你的功能了。
以上就是最近工作总遇到的问题，如有错误，还请指出。
代码有用的话，给俺个赞吧，谢谢文章来源：https://www.toymoban.com/news/detail-521465.html
欢迎各位留言发表意见文章来源地址https://www.toymoban.com/news/detail-521465.html
到了这里，关于H5跳转小程序 (wx-open-launch-weapp开放性标签跳转)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
