Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what are the scenes of the jump between H5 and WeChat Mini Programs". In the daily operation, I believe many people have doubts about the scenes of the jump between H5 and WeChat Mini Programs. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the scenes of the jump between H5 and WeChat Mini Programs?" Next, please follow the editor to study!

Scenario 1: URL Scheme opens Mini Program (suitable for opening Mini Program from SMS, email, web pages outside Wechat, etc.)

TICKET needs to go to WeChat Mini Programs backend tools page to generate-> generate URL Scheme tool address

Weixin://dl/business/?t= * TICKET*

Note: Android system does not support direct recognition of URL Scheme, which needs to be opened through H5 page.

Location.href = 'weixin://dl/business/?t= * TICKET*'

The code for opening Mini Program directly with complete H5 is as follows:

H5 evokes WeChat Mini Programs _ window.location.href = 'weixin://dl/business/?t=wfq66CCAmKt'

Scene 2: WeChat Mini Programs opens the H5 page, and then the H5 page jumps back to WeChat Mini Programs

H5 jump WeChat Mini Programs is jumping to WeChat Mini Programs. Wx.miniProgram.navigateTo ({url: 'project/home/views/home/index?spm=a.b.c.d.e'})

Note: this method can only go back to pulling up WeChat Mini Programs corresponding to H5, but cannot open a new Mini Program. If you need to open other Mini Program, you can do a transfer page in Mini Program to assist in the jump to other Mini Program.

The following is the code for Mini Program to visit the H5 page

Scene 3: in the Wechat environment, first open the H5 page, and then the H5 page opens any specified WeChat Mini Programs

Open Mini Program _ window.onerror = e = > {console.error (e) alert ('error' + e)} function docReady (fn) {if (document.readyState = 'complete' | | document.readyState = =' interactive') {fn ()} Else {document.addEventListener ('DOMContentLoaded' Fn) }} docReady (async function () {var ua = navigator.userAgent.toLowerCase () var isWXWork = ua.match (/ wxwork/i) = 'wxwork' var isWeixin =! isWXWork & & ua.match (/ micromessenger/i) =' micromessenger' var isMobile = false var isDesktop = false if (navigator.userAgent.match (/ (phone | pad | pod | iPhone | ios | iPad | Android | Mobile | IEMobile) / I)) {isMobile = true} else {isDesktop = true} if (isWeixin) {var containerEl = document.getElementById ('wechat-web-container') containerEl.classList.remove (' hidden') containerEl.classList.add ('full') 'wechat-web-container') var launchBtn = document.getElementById (' launch-btn') launchBtn.addEventListener ('ready', function (e) {console.log (' open tag ready')}) launchBtn.addEventListener ('launch', function (e) {console.log (' open tag success')}) launchBtn.addEventListener ('error') Function (e) {console.log ('open tag fail', e.detail)}) wx.config ({/ / debug: true, / / enable appId:' Mini Program AppID', / / timestamp: 0, / / required Enter any number nonceStr: 'nonceStr', / / required, any non-empty string signature:' signature', / / required, any non-empty string jsApiList: ['chooseImage'], / / required Any interface can be openTagList: ['wx-open-launch-weapp'] / / enter the open tag signature that opens Mini Program})} else if (isDesktop) {/ / on pc, you will be prompted to direct to the mobile side and open var containerEl = document.getElementById ('desktop-web-container') containerEl.classList.remove (' hidden') containerEl.classList.add ('full'). 'desktop-web-container')} else {var containerEl = document.getElementById (' public-web-container') containerEl.classList.remove ('hidden') containerEl.classList.add (' full', 'public-web-container') var c = new cloud.Cloud ({/ required Indicates that it is not logged in mode identityless: true, / / resource side AppID resourceAppid: 'Mini Program AppID', / resource side environment ID resourceEnv:' cloud development environment ID' / /}) await c.init () window.c = c var buttonEl = document.getElementById ('public-web-jump-button') var buttonLoadingEl = document.getElementById (' public-web-jump-button-loading') try {await openWeapp () = > {buttonEl.classList.remove ('weui-btn_loading') ButtonLoadingEl.classList.add ('hidden')})} catch (e) {buttonEl.classList.remove (' weui-btn_loading') buttonLoadingEl.classList.add ('hidden') throw e}) async function openWeapp (onBeforeJump) {var c = window.c const Res = await c.callFunction ({name: 'public' Data: {action: 'getUrlScheme',},}) console.warn (res) if (onBeforeJump) {onBeforeJump ()} location.href = res.result.openlink} .hidden {display: none } .full {position: absolute; top: 0; bottom: 0; left: 0; right: 0;} .public-web-container {display: flex; flex-direction: column; align-items: center;} .public-web-container p {position: absolute; top: 40% } .public-web-container a {position: absolute; bottom: 40%;} .wechat-web-container {display: flex; flex-direction: column; align-items: center;} .wechat-web-container p {position: absolute; top: 40% } .wechat-web-container wx-open-launch-weapp {position: absolute; bottom: 40%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center;} .center;-web-container {display: flex; flex-direction: column; align-items: center } .fill-web-container p {position: absolute; top: 40%;} opening "fill in your Mini Program name".

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.