TOC
从H5打开小程序是一个非常常见的功能，但是实现起来也颇有一些坑，作为过来人给大家指指路。
我将分别讲述如何在个人微信以及企业微信中的自带浏览器中运行的H5如何打开小程序
个人微信打开H5
经过我的了解和研究，个人微信打开H5大致有两种方法
通过 wx-open-launch-weapp 官方功能
优势
- 可自定义打开页面样式
劣势
- 需要配合服务号进行wx.config配置
因为没有服务号，我最终选择的是下面的方案
通过后端调用小程序API创建小程序链接，随后H5跳转到该地址
对微信的jssdk没有任何需求
先给出生成小程序地址的具体文档地址
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
小程序的链接有两种形式url scheme和url link
url scheme 是一种带有微信前缀的scheme链接，同时兼具唤醒微信的功能
url link 是相对普通的http网页地址，无法支持微信外网页(也就是系统浏览器)打开小程序
由于我们的场景只是从微信自带浏览器中打开小程序，经过我的测试，两者都能实现功能，但是在交互上有所差异，具体可以看官方文档的示例。
企业微信H5跳转小程序
先调用wx.agentConfig方法，注入配置，随后就能调用该能力
在wx.gentConfig中的jsApiList中必须加入 launchMiniprogram
wx.agentConfig({
corpid: '',
agentid: '',
timestamp: '',
nonceStr: '',
signature: '',
jsApiList: [
'launchMiniprogram', // 打开小程序 必须加入
],
success: function (res) {
wx.invoke('launchMiniprogram', {
"appid": 'b23sddsxxxxxxxxx', // 需跳转的小程序appid
"path": '/pages/index?id=222', // 所需跳转的小程序内页面路径及参数。非必填
}, function (res) {
if (res.err_msg == "launchMiniprogram:ok") {
// 正常
} else {
// 失败
}
});
// 官方说可以直接同步关闭H5窗口，但是在实践中iOS可能会遇到窗口关闭过快导致小程序无法打开
setTimeout(() => {
wx.closeWindow();
}, 500)
}
});
agentConfig的必须参数需要从后端获取
完整伪代码 配合环境判断
<template>
<div class="mp-jumper"></div>
</template>
<script>
const ua = navigator.userAgent.toLowerCase()
const isWorkWX = ua.includes('wxwork')
export default {
name: 'mpJumper',
data () {
return {
mpUrl: "", // 小程序的url
appid: '', // 小程序的appid
h5Url: '', // 小程序的直接连接 包含参数
isWorkWX
}
},
created () {
this.mpUrl = decodeURIComponent(this.$route.query.mpUrl)
this.appid = this.$route.query.appid
this.h5Url = decodeURIComponent(this.$route.query.h5Url)
this.initJumper()
},
methods: {
initJumper () {
if (isWorkWX) {
this.workwxInitJumper()
} else {
this.wxInitJumper()
}
},
// 个人微信逻辑
wxInitJumper () {
window.location.href = this.h5Url
},
// 企业微信逻辑
workwxInitJumper () {
// 从后端获取的签名配置参数
const data = fetch('xxx')
wx.agentConfig({
corpid: data.corpid,
agentid: data.agentid,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
'launchMiniprogram', // 打开小程序 必须加入
],
success: function (res) {
wx.invoke('launchMiniprogram', {
"appid": this.appid, // 需跳转的小程序appid
"path": this.mpUrl, // 所需跳转的小程序内页面路径及参数。非必填
}, function (res) {
if (res.err_msg == "launchMiniprogram:ok") {
// 正常
} else {
// 失败
}
});
// 官方说可以直接同步关闭H5窗口，但是在实践中iOS可能会遇到窗口关闭过快导致小程序无法打开
setTimeout(() => {
wx.closeWindow();
}, 500)
}
});
}
}
}
</script>
<style lang="scss" scoped>
.mp-jumper {
height: 100%;
background-color: #fff;
}
</style>