h5頁面通過微信提供的云開發(fā)-云函數(shù)功能進行直接跳轉(zhuǎn)到微信指定小程序內(nèi)部頁面(h5界面可以是內(nèi)嵌在某app內(nèi)部忿墅,或者單頁面都可跳轉(zhuǎn))
小程序端
1扁藕、 新建的小程序項目需勾選‘云開發(fā)’選項
2、新建項目后進入微信開發(fā)者工具疚脐,云環(huán)境及云函數(shù)文件夾如圖:
3亿柑、鼠標(biāo)移到cloudfunctions文件夾右鍵新建云函數(shù),名稱就是你自定義函數(shù)名棍弄,這里以urlscheme為例:
4望薄、生成后文件目錄如下:
5疟游、將以下代碼替換寫入index.js文件,這里例子參數(shù)為接收外部h5跳轉(zhuǎn)的path路徑和地址傳參query:
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
console.log(event, context, '外部傳參數(shù)據(jù)')
return cloud.openapi.urlscheme.generate({
jumpWxa: {
path: event.path, // 打開小程序時訪問路徑痕支,為空則會進入主頁
query: event.query, // 可以使用 event 傳入的數(shù)據(jù)制作特定參數(shù)颁虐,無需求則為空
},
isExpire: false, //是否到期失效,如果為true需要填寫到期時間卧须,默認(rèn)false
// expire_time: Math.round(new Date().getTime() / 1000) + 3600
//我們設(shè)置為當(dāng)前時間3600秒后另绩,也就是1小時后失效
//無需求可以去掉這兩個參數(shù)(isExpire,expire_time)
})
}
6故慈、上傳部署云函數(shù):
7板熊、點擊‘云開發(fā)’按鈕查看云函數(shù)部署情況,以及調(diào)試及配置之類的:
8察绷、查看環(huán)境ID,以及一些權(quán)限修改:
9干签、小程序appid,用于之后云函數(shù)調(diào)用參數(shù)之一:
到這里微信小程序用于接收h5跳轉(zhuǎn)信息的過程就差不多結(jié)束了2鸷场H堇汀!U⒍取=叻贰!
h5頁面:
1莺禁、 話不多說留量,直接上代碼demo,此demo為單頁面h5哟冬,框架內(nèi)部只是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>
<!-- 云開發(fā) 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', // 云環(huán)境環(huán)境ID
})
await cloud.init(); // 云函數(shù)初始化
const res = await cloud.callFunction({
name: 'urlscheme', //提供UrlScheme服務(wù)的云函數(shù)名稱
data: {
path: '/pages/index/index', // 想跳轉(zhuǎn)的小程序路徑
query: 'token=xxx&host=xxx', // 地址欄query參數(shù),可在微信 onLoad: function (options) {}生命周期里options接收這些參數(shù)
} //向這個云函數(shù)中傳入的自定義參數(shù)浩峡,注意:path地址前后/不能多加或者少加可岂,query參數(shù)里不能有轉(zhuǎn)義字符如果有需要解碼
});
console.log(res, '云函數(shù)返回數(shù)據(jù)');
if (res && res.result.errCode == 0) {
location.href = res.result.openlink; // 跳轉(zhuǎn)
} else {
console.log(res.errMsg);
}
}
</script>
</body>
</html>
到 這里就大功告成了,如果有幫助到你翰灾,點個贊相互鼓勵缕粹,共勉!V交础F秸丁!Q士椤K痢!C臃肌l酢!