外部h5页面跳转微信小程序

切版网专注网页切版服务

h5页面通过微信提供的云开发-云函数功能进行直接跳转到微信指定小程序内部页面(h5界面可以是内嵌在某app内部,或者单页面都可跳转)

h5页面:
1、 话不多说,直接上代码demo,此demo为单页面h5,框架内部只是sdk引入方式不同,其他基本上一样:

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>测试h5拉起微信小程序</title>
<style>
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 25px;
text-decoration: none;
cursor: pointer;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
letter-spacing: 5px;
border: none;
}

.btn:hover {
animation: animate 8s linear infinite;
}

@keyframes animate {
0% {
background-position: 0%;
}

100% {
background-position: 400%;
}
}

.btn::before {
content: ”;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}

.btn:hover::before {
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}
</style>
</head>

<body>
<button onclick=”toWx()” class=”btn”>我要去小程序</button>
<!– 云开发 Web SDK –>
<script src=”https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js”></script>
<script>
async function toWx() {
let cloud = new window.cloud.Cloud({
identityless: true, // true表示是未登录模式
resourceAppid: ‘xxx’, // 小程序AppID
resourceEnv: ‘xxx’, // 云环境环境ID
})
await cloud.init(); // 云函数初始化
const res = await cloud.callFunction({
name: ‘urlscheme’, //提供UrlScheme服务的云函数名称
data: {
path: ‘/pages/index/index’, // 想跳转的小程序路径
query: ‘token=xxx&host=xxx’, // 地址栏query参数,可在微信 onLoad: function (options) {}生命周期里options接收这些参数
} //向这个云函数中传入的自定义参数,注意:path地址前后/不能多加或者少加,query参数里不能有转义字符如果有需要解码
});

console.log(res, ‘云函数返回数据’);
if (res && res.result.errCode == 0) {
location.href = res.result.openlink; // 跳转
} else {
console.log(res.errMsg);
}
}
</script>
</body>

建立您的线上前端开发部门

最高11年前端从业经验,专业只做web前端切图,只要您愿意,切版网就是您公司的前端部门。