切版网（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>
文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。
更多相关文章
UEditor如何新增自定义按钮方法
发布时间:2022年08月27日 标签：echarts
UEditor是国内比较主流的编辑插件，是百度出品，不得不说百度虽然也做过很多产品最后放弃，不过ueditor […]
vue 在标签中使用(data-XXX)自定义属性并获取的方法
发布时间:2022年08月27日
我们在vue中有时候为给标签加一些特有的属性， 当我们在标签上触发了事件之后， 就可以在 event 对象上面 […]
伪类after before使用阿里的iconfont字体方法
发布时间:2022年08月27日
so!问题来了！为什么只能用一些预定义好的图标呢？阿里的图标为什么不能用啊！ 今天一个偶然的机会，让我找到了解 […]
