Mutual jump between WeChat applet and h5

Scene arrangement of mutual jump between WeChat applet and h5

1. The h5 embedded in the WeChat applet

  • The WeChat applet jumps to the embedded h5:
<web-view :src="loadUrl"></web-view>

Write a webview file in the WeChat applet, jump to h5 through webview, loadUrl is the address of h5

  • The nested h5 jumps back to the inside of the WeChat applet
 import wx from 'weixin-js-sdk';
 wx.miniProgram.navigateTo({
    
    
  	url: "/pages/index/index",
 });

Introduce WeChat jsSdk into h5, and return to the inside of the WeChat applet through wx.miniProgram.navigateTo

2. Non-nested, h5 needs to jump to open a WeChat applet

The total number of URL Schemes and URL Links can be generated every day through wx-open-launch-weapp, URL Scheme and URL Link. The total number is limited to 500,000

  • Open label: wx-open-launch-weapp
    Reference document: wx-open-launch-weapp
  • URL Scheme
    server API, this interface is used to obtain the scheme code of the applet, which is applicable to business scenarios such as SMS, email, external webpage, WeChat, etc. to launch the applet. At present, it is only open to domestic non-individual subject mini-programs
    :
    1. If you want to open a mini-program on a webpage in WeChat, please use the WeChat open tab-mini-program jump button. For authentication-free jumping applets, see Cloud Development Static Website Jumping Applets. Small programs that meet the open scope can send SMS messages that support opening small programs.
    2. This function basically covers the WeChat version currently used by the user, and developers do not need to be compatible with lower versions. 3. Only the URL Scheme 4
    of published small programs can be generated.
    .When redirecting to WeChat through the URL Scheme, a pop-up box may be triggered to ask the system. If the user chooses not to redirect, the applet cannot be opened. Developers are requested to properly handle the scenario where the user chooses not to jump.
    Some browsers will restrict the direct jump when opening a web page. You can refer to the example web page to set the jump button

The URL Scheme generated through the backend interface is as follows:

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

The iOS system supports identifying URL Schemes, and can directly jump to applets through Schemes in application scenarios such as text messages.
The Android system does not support direct recognition of URL Schemes, and users cannot normally open applets through Scheme. Developers need to use the H5 page to transfer, and then jump to Scheme to open the applet. The jump code example is as follows:

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

Effect:
insert image description here

This jump method can be called immediately when the user opens the H5, or after the user triggers an event.

  • URL Link
    server API, to obtain the URL Link of the mini-program, applicable to business scenarios such as SMS, email, webpage, WeChat, etc. to launch the mini-program. At present, it is only open to domestic non-personal mini-programs.
    Notes:
    1. Only the URL link of the published mini-program can be generated.
    2. When opening the URL Link in WeChat or an Android phone, the official H5 intermediate page will be redirected by default. If you need to customize the H5 content, you can use the cloud to develop a static website.
    The URL Scheme generated through the backend interface is as follows:
https://wxaurl.cn/TICKET 或 https://wxmpurl.cn/TICKET

Effect:
insert image description here

Guess you like

Origin blog.csdn.net/weixin_45059911/article/details/131702452