切版网(2013~2023)

http://qieban.cn
做完设计,找切版网
QQ:6135833
微信:dingxiangming82

2022年08月27日

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

本文就“外部h5页面跳转微信小程序”展开讨论,作者切版网,发布于2022年08月27日 全文共1779个字,预计阅读时长5分55秒

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>

文章为原创或者来自于互联网,转载请注明来源,如果文章有侵权请联系,我们会及时删除。

更多相关文章

本站动态

切版网2023年发布改版

发布时间:2023年07月11日

切版网2023年发布改版,基于bootstrap4.0(流行的跨屏响应式框架)进行重构升级,整个页面看起来更加 […]