1.用到的技术 URL Scheme
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
2.前端做一个中转页面 请求后端接口返回的地址
<html>
<head>
<title>打开小程序</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
<script>
function docReady(fn) {
if (document.readyState === 'complete' || document.readyState === 'interactive') {
fn()
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function openWeapp(){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、调用open -test
xhr.open("get", "https://lyl.xxxx.com/api/oauth/wechat/noToken/generateScheme", true);
//3、调用send
xhr.send();
//4、等待数据响应
xhr.onreadystatechange = function(){
buttonLoadingEl&&buttonLoadingEl.classList.remove('weui-primary-loading')
if(xhr.readyState == 4){
//判断本次下载的状态码都是多少
if(xhr.status == 200){
const res = JSON.parse(xhr.responseText)
if(res.code == 0){
window.location = res.data;
}else{
alert(res.errorMsg);
}
}else{
alert("Error:" + xhr.status);
}
}
}
}
var button
var buttonLoadingEl
var ua = navigator.userAgent.toLowerCase()
var isWXWork = ua.match(/wxwork/i) == 'wxwork'
var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
var isMobile = false
var isDesktop = false
if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
isMobile = true
} else {
isDesktop = true
}
docReady(function(){
buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
button = document.getElementById('public-web-jump-button')
if(isDesktop){
var containerEl = document.getElementById('desktop-web-container')
containerEl.classList.remove('hidden')
containerEl.classList.add('full', 'desktop-web-container')
}else{
openWeapp()
document.getElementById('public-web-container').classList.remove('hidden')
}
button.onclick = function(){
// button.remove('weui-btn_loading')
buttonLoadingEl.classList.add('weui-primary-loading')
openWeapp()
}
})
</script>
<style>
.hidden {
display: none !important;
}
.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 class="page full">
<div id="public-web-container" class="full public-web-container hidden" >
<p class="">正在打开乐云链</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_transparent"><i class="weui-primary-loading__dot"></i></span>
打开小程序
</a>
</div>
<div id="desktop-web-container" class="hidden">
<p class="">请在手机打开网页链接</p>
</div>
</div>
</body>
</html>
3.手机浏览器注意不要设置为电脑模式，不然跳转不了的