外部h5頁面跳轉(zhuǎn)微信小程序

h5頁面通過微信提供的云開發(fā)-云函數(shù)功能進行直接跳轉(zhuǎn)到微信指定小程序內(nèi)部頁面(h5界面可以是內(nèi)嵌在某app內(nèi)部忿墅,或者單頁面都可跳轉(zhuǎn))

小程序端

1扁藕、 新建的小程序項目需勾選‘云開發(fā)’選項


項目新建勾選云開發(fā).png

2、新建項目后進入微信開發(fā)者工具疚脐,云環(huán)境及云函數(shù)文件夾如圖:


查看云開發(fā)按鈕環(huán)境及文件夾.png

3亿柑、鼠標(biāo)移到cloudfunctions文件夾右鍵新建云函數(shù),名稱就是你自定義函數(shù)名棍弄,這里以urlscheme為例:


云文件夾下新建云函數(shù).png

4望薄、生成后文件目錄如下:


云函數(shù)目錄結(jié)構(gòu).png

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ù):


部署云函數(shù).png

7板熊、點擊‘云開發(fā)’按鈕查看云函數(shù)部署情況,以及調(diào)試及配置之類的:


云函數(shù)部署情況查看和調(diào)試.png

8察绷、查看環(huán)境ID,以及一些權(quán)限修改:


云環(huán)境ID與名稱.png

云環(huán)境權(quán)限配置(勾選起).png
云函數(shù)權(quán)限.png

勾選這個.png

9干签、小程序appid,用于之后云函數(shù)調(diào)用參數(shù)之一:


小程序appid查看.png

到這里微信小程序用于接收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酢!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末峭竣,一起剝皮案震驚了整個濱河市塘辅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌皆撩,老刑警劉巖扣墩,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異扛吞,居然都是意外死亡呻惕,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門滥比,熙熙樓的掌柜王于貴愁眉苦臉地迎上來亚脆,“玉大人,你說我怎么就攤上這事盲泛”舫郑” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵寺滚,是天一觀的道長柑营。 經(jīng)常有香客問我,道長村视,這世上最難降的妖魔是什么官套? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮蚁孔,結(jié)果婚禮上奶赔,老公的妹妹穿的比我還像新娘。我一直安慰自己勒虾,他們只是感情好纺阔,可當(dāng)我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著修然,像睡著了一般笛钝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上愕宋,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天玻靡,我揣著相機與錄音,去河邊找鬼中贝。 笑死囤捻,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的邻寿。 我是一名探鬼主播蝎土,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼视哑,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了誊涯?” 一聲冷哼從身側(cè)響起挡毅,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎暴构,沒想到半個月后跪呈,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡取逾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年耗绿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片砾隅。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡误阻,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出琉用,到底是詐尸還是另有隱情堕绩,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布邑时,位于F島的核電站奴紧,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏晶丘。R本人自食惡果不足惜黍氮,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望浅浮。 院中可真熱鬧沫浆,春花似錦、人聲如沸滚秩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽郁油。三九已至本股,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間桐腌,已是汗流浹背拄显。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留案站,地道東北人躬审。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親承边。 傳聞我的和親對象是個殘疾皇子遭殉,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容