最近有个需求是如何通过H5网页直接打开微信的小程序
参考了网上各个大佬的方法总算找到了
-
使用wxsdk的开放标签，但是这个标签局限在微信环境下才能显示，而且需要配置一堆签名，安全域名等等的。
跳转小程序的开放标签。文档 developers.weixin.qq.com/doc/offiacc…
<wx-open-launch-weapp
id="launch-btn" username="gh_XXXXXXXXXX" path="pages/home/index/index">
<template>
<style>
.btn {
width: 200px;
height: 45px;
text-align: center;
font-size: 17px;
display: block;
margin: 0 auto;
padding: 8px 24px;
border: none;
border-radius: 4px;
background-color: #07c160;
color: #fff;
}
</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
-
使用 URL Scheme ，在移动端的环境下都可以使用，只需要生成链接即可直接打开微信并且打开小程序，而且iOS还支持短信场景直接打开，安卓需要经过H5跳转。
官方文档，developers.weixin.qq.com/miniprogram…
链接生成方式，打开小程序管理平台
栗子：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打开xxx小程序</title>
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css">
</link>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<style>
.hidden {
display: none;
}
.full {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.public-web-container {
display: flex;
flex-direction: column;
align-items: center;
}
.public-web-container p {
position: absolute;
top: 40%;
}
.public-web-container a {
position: absolute;
bottom: 40%;
}
.wechat-web-container {
display: flex;
flex-direction: column;
align-items: center;
}
.wechat-web-container p {
position: absolute;
top: 40%;
}
.wechat-web-container wx-open-launch-weapp {
position: absolute;
bottom: 40%;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.desktop-web-container {
display: flex;
flex-direction: column;
align-items: center;
}
.desktop-web-container p {
position: absolute;
top: 40%;
}
</style>
</head>
<body>
<div>
<div class="page full">
<div id="public-web-container" class="hidden">
<p class="">正在打开 “xxx小程序”...</p> <!-- replace -->
<a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading"
onclick="openWeapp()">
<span id="public-web-jump-button-loading"
class="weui-primary-loading weui-primary-loading_transparent"><i
class="weui-primary-loading__dot"></i></span>
打开小程序
</a>
</div>
<div id="wechat-web-container" class="hidden">
<p class="">点击以下按钮打开 “xxx小程序”</p> <!-- replace -->
<!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
<wx-open-launch-weapp id="launch-btn" username="gh_XXXXXXXXXX" path="pages/home/index/index">
<template>
<style>
.btn {
width: 200px;
height: 45px;
text-align: center;
font-size: 17px;
display: block;
margin: 0 auto;
padding: 8px 24px;
border: none;
border-radius: 4px;
background-color: #07c160;
color: #fff;
}
</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
</div>
<div id="desktop-web-container" class="hidden">
<p class="">请在手机打开网页链接</p>
</div>
</div>
</div>
<script>
$(function () {
if (isWeixin()) {
//微信端显示内容
var containerEl = document.getElementById('wechat-web-container')
containerEl.classList.remove('hidden')
containerEl.classList.add('full', 'wechat-web-container')
wxConfigFun();
} else if (!isMobile()) {
// 在 pc 上则给提示引导到手机端打开
var containerEl = document.getElementById('desktop-web-container')
containerEl.classList.remove('hidden')
containerEl.classList.add('full', 'desktop-web-container')
} else {
//移动端显示标签
var containerEl = document.getElementById('public-web-container')
containerEl.classList.remove('hidden')
containerEl.classList.add('full', 'public-web-container')
}
})
//是否微信环境
function isWeixin() {
var ua = navigator.userAgent.toLowerCase()
var isWXWork = ua.match(/wxwork/i) == 'wxwork'
return !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
}
//是否移动端环境
function isMobile() {
if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
return true
} else {
return false
}
}
//移动端环境使用 URLScheme ,官方地址https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
//****微信环境也可用，就可以不需要配置签名和安全域名什么的了
function openWeapp() {
var buttonEl = document.getElementById('public-web-jump-button')
var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
buttonEl.classList.remove('weui-btn_loading')
buttonLoadingEl.classList.add('hidden')
//URLScheme跳转 ，*TICKET*是需替换的内容
location.href = 'weixin://dl/business/?t= *TICKET*'
}
//微信环境使用 <wx-open-launch-weapp>开放标签打开 -----【不是微信环境标签无法显示】
function wxConfigFun() {
//标签监听
var btn = document.getElementById('launch-btn');
btn.addEventListener('ready', function (e) {
console.log('ready:success');
});
btn.addEventListener('launch', function (e) {
console.log('launch:success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
})
document.addEventListener('WeixinOpenTagsError', function (e) {
console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开发标签，JS-SDK其他功能不受影响
});
$.ajax({
type: "post",
url: "https://xxx.xxxxx.com/api/weChat/jssdksign",
data: {
url: location.href
},
success(res) {
console.log('res', res.data)
var data = res.data;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.noncestr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名
jsApiList: ['onMenuShareAppMessage'], // 必填，需要使用的JS接口列表,[随便填但不能为空]
openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
wx.ready(function () {
console.log('ready')
});
wx.error(function (res) {
console.error(res)
});
},
fail(err) {
}
})
}
</script>
</body>
</html>
