h5页面通过微信提供的云开发-云函数功能进行直接跳转到微信指定小程序内部页面（h5界面可以是内嵌在某app内部，或者单页面都可跳转）
小程序端
1、 新建的小程序项目需勾选‘云开发’选项
项目新建勾选云开发.png
2、新建项目后进入微信开发者工具，云环境及云函数文件夹如图：
查看云开发按钮环境及文件夹.png
3、鼠标移到cloudfunctions文件夹右键新建云函数，名称就是你自定义函数名，这里以urlscheme为例：
云文件夹下新建云函数.png
4、生成后文件目录如下：
云函数目录结构.png
5、将以下代码替换写入index.js文件，这里例子参数为接收外部h5跳转的path路径和地址传参query:
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
console.log(event, context, '外部传参数据')
return cloud.openapi.urlscheme.generate({
jumpWxa: {
path: event.path, // 打开小程序时访问路径，为空则会进入主页
query: event.query, // 可以使用 event 传入的数据制作特定参数，无需求则为空
},
isExpire: false, //是否到期失效，如果为true需要填写到期时间，默认false
// expire_time: Math.round(new Date().getTime() / 1000) + 3600
//我们设置为当前时间3600秒后，也就是1小时后失效
//无需求可以去掉这两个参数（isExpire，expire_time）
})
}
6、上传部署云函数：
部署云函数.png
7、点击‘云开发’按钮查看云函数部署情况，以及调试及配置之类的：
云函数部署情况查看和调试.png
8、查看环境ID,以及一些权限修改：
云环境ID与名称.png
云环境权限配置（勾选起）.png
云函数权限.png
勾选这个.png
9、小程序appid，用于之后云函数调用参数之一:
小程序appid查看.png
到这里微信小程序用于接收h5跳转信息的过程就差不多结束了！！！！！！
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>
</html>
到 这里就大功告成了，如果有帮助到你，点个赞相互鼓励，共勉！！！！！！！！！！
网友评论