H5頁(yè)面跳轉(zhuǎn)小程序的3種實(shí)現(xiàn)方式
前言
實(shí)際開(kāi)發(fā)中，小程序和H5往往有很多業(yè)務(wù)場(chǎng)景需要來(lái)回跳轉(zhuǎn)，這里主要介紹三種跳轉(zhuǎn)方式供大家參考。場(chǎng)景：微信小程序登錄有時(shí)候需要和公眾號(hào)進(jìn)行綁定，獲取公眾號(hào)code和appid傳給后臺(tái)進(jìn)行綁定
一、web-view標(biāo)簽返回小程序
1.小程序啟動(dòng)頁(yè)面只寫(xiě)web-view標(biāo)簽跳轉(zhuǎn)到授權(quán)頁(yè)面。
<template> <web-view src="https://www.xxx.cn/auth.html"> |
2.編寫(xiě)auth.html
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><script type="text/javascript"> let url = window.location.href; if(url.includes(code)) { if (wx.miniProgram) { wx.miniProgram.reLaunch({ url: `/pages/home/index?code=${url中的code}&appId=${url中的appid}`, success: function() { ...... }, fall: function() { ...... } }) } } else { window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己的appid&redirect_uri=還是當(dāng)前頁(yè)面&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect" } </script>3、把a(bǔ)uth.html放到服務(wù)器就可以測(cè)試訪問(wèn)，打開(kāi)小程序默認(rèn)進(jìn)入啟動(dòng)頁(yè)面中的webview跳轉(zhuǎn)到H5，授權(quán)成功后，通過(guò)wx.miniProgram.reLaunch方法攜帶參數(shù)跳回小程序
二、wx-open-launch-weapp
1.編寫(xiě)auth.html
<div id="app"> <wx-open-launch-weapp id="launch-btn" username="原始ID" path="賦值自己的path頁(yè)面"> <template> <button class="btn">跳轉(zhuǎn)小程序 |
2、公眾號(hào)后臺(tái)配置好相應(yīng)的域名和ip白名單，把a(bǔ)uth.html放到服務(wù)器就可以測(cè)試訪問(wèn)，點(diǎn)擊按鈕，跳轉(zhuǎn)到小程序首頁(yè)(標(biāo)簽中的path屬性)，在onLoad函數(shù)中獲取參數(shù)
三、URL Scheme
該接口用于獲取小程序 scheme 碼，適用于短信、郵件、外部網(wǎng)頁(yè)、微信內(nèi)等拉起小程序的業(yè)務(wù)場(chǎng)景。通過(guò)該接口，可以選擇生成到期失效和永久有效的小程序碼，有數(shù)量限制，目前僅針對(duì)國(guó)內(nèi)非個(gè)人主體的小程序開(kāi)放。
1.HTTPS 調(diào)用
POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN |
2.返回示例
{ "msg": "操作成功", "code": 200, "data": { "openlink": "weixin://dl/business/?t=WqDMv7uIy7g" }} |
我這里是寫(xiě)個(gè)html文件通過(guò)a標(biāo)簽訪問(wèn)
<a href="weixin://dl/business/?t=WqDMv7uIy7g" rel="external nofollow" >跳轉(zhuǎn)小程序 |
