Html5頁面跳轉小程序的三種方式

前言
實際開發(fā)中,小程序和H5往往有很多業(yè)務場景需要來回跳轉,這里主要介紹三種跳轉方式供大家參考。
場景:微信小程序登錄有時候需要和公眾號進行綁定,獲取公眾號code和appid傳給后臺進行綁定
一、web-view標簽返回小程序
1.小程序啟動頁面只寫web-view標簽跳轉到授權頁面。
<template> <web-view src="https://www.xxx.cn/auth.html"></web-view> </template>
2.編寫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. } </script>
3、把auth.html放到服務器就可以測試訪問,打開小程序默認進入啟動頁面中的webview跳轉到H5,授權成功后,通過wx.miniProgram.reLaunch方法攜帶參數(shù)跳回小程序
二、wx-open-launch-weapp
1.編寫auth.html
<div id="app"> <wx-open-launch-weapp id="launch-btn" username="原始ID" path="賦值自己的path頁面"> <template> <button class="btn">跳轉小程序</button> </template> </wx-open-launch-weapp> </div> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script type="text/javascript"> let url = window.location.href; //如果url中包含code,說明授權成功,開始注冊微信config if(url.includes(code)) { //通過接口拿到appId,nonceStr,signature,timestamp wx.config({ debug: false, appId, timestamp, nonceStr, signature, jsApiList: ['chooseImage', 'previewImage'], //必寫,否則不顯示 openTagList: ['wx-open-launch-weapp']//必寫,否則不顯示 }); } else { window.location. } </script>
2、公眾號后臺配置好相應的域名和ip白名單,把auth.html放到服務器就可以測試訪問,點擊按鈕,跳轉到小程序首頁(標簽中的path屬性),在onLoad函數(shù)中獲取參數(shù)
三、URL Scheme
該接口用于獲取小程序 scheme 碼,適用于短信、郵件、外部網(wǎng)頁、微信內等拉起小程序的業(yè)務場景。通過該接口,可以選擇生成到期失效和永久有效的小程序碼,有數(shù)量限制,目前僅針對國內非個人主體的小程序開放。
1.HTTPS 調用
POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN
2.返回示例
{ "msg": "操作成功", "code": 200, "data": { "openlink": "weixin://dl/business/?t=WqDMv7uIy7g" } }
3.調用,微信內打開跳轉的是正式版,微信外可以跳轉體驗版和開發(fā)板,具體通過env_version參數(shù)設置小程序版本
我這里是寫個html文件通過a標簽訪問
<a href="weixin://dl/business/?t=WqDMv7uIy7g">跳轉小程序</a>
到此這篇關于Html5頁面跳轉小程序的三種方式的文章就介紹到這了,更多相關Html5頁面跳轉小程序內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
相關文章
- 這篇文章主要介紹了Html5跳轉到APP指定頁面的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學2020-01-14