1, what are the ways to pull up the small program?

Wechat open tabs

Applets link URL Scheme

Applets Link URL Link

APP pulls up the applet

2, examples of various approaches

The URL Scheme example

URL Link and wechat open label examples

Looking at the second example and official documents, we can see that URL Link is a URL Scheme used outside wechat and an open label used inside wechat. And wechat will not directly pull up the small program, you need to manually click the pull button to trigger the small program.

3, the comparison of various approaches

way Apply channel Whether to support development version, experience version of the small program Access to the steps
Wechat open tabs Wechat webpage, can only manually click to jump. Only the official version is supported Introduce the SDK, call the interface
URL Scheme Wechat external web page Only the official version is supported Server interfaceOr in theSmall program management background
URL Link All web pages, in fact, is the combination of the first two ways Only the official version is supported Server interface
APP pulls up the applet APP, can provide jump interface for the embedded APP All support Introduce the SDK, call the interface

* After testing, Scheme also works on iOS and some Android devices, but it does not work on some Android devices, such as mi 11. We can’t do everything with Scheme alone.

4, wechat open label

Used wechat open label development, will know that wechat open label provides an interface, it is difficult to use, he provides an HTML tag, but also in the tag to insert custom HTML elements.

In fact, provide a JS method, a call to this method, directly pull up the small program, is not very convenient, or in wechat also support scheme pull up, the developer is not happy, but wechat slant not.

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index? user=123&action=abc" > <script type="text/wxtag-template"> <style>.btn { padding: 12px}</style> </ wX-open-launch-downloadp > </script> var BTN = document.getelementbyid ('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); btn.addEventListener('error', function (e) { console.log('fail', e.detail); }); </script>Copy the code

5, special treatment in wechat

Wechat open tabs seem to be a way to jump applets for some special purpose.

Combining WeChat developers some questions in the BBS, some developers on the run through simulation on open label click event, realize the WeChat encapsulated in a small program, or directly enter the web page is a small program, but all failed, it is conceivable that WeChat don’t want to let the user not by clicking on the “inside WeChat”, is directly to pull a small program.

6, look at the code

What efforts have been made to achieve this goal with open labels?

In order to find out, we need to debug open labels in wechat, refer to this article for specific operations

X5 browser debugging wechat page

When we open the H5 page with the open tag attached, we can see that the open tag is rendered as an iframe, and the body of the iframe is inserted with the HTML we passed inside the wxtag-template tag.

It’s an iframe, which explains why external styles don’t work in the wxtag-template tag. After the open tag takes effect, our click operation actually clicks the HTML inside the IFrame, which also solves most of the problems when we access the open tag:

(1) Click does not take effect -> Check whether the HTML click area inside ifame is normal

(2) Styles do not work -> See if the HTML inside the iframe uses an external style, or if the internal and external HTML inside the iframe mask each other.

7, encapsulate

Now that we see what open labels do, we can encapsulate open labels, because the old open labels are really hard to use.

Since the open label uses iframe to prevent us from pulling the applet directly through the JS method, it is not practical to encapsulate the method into a pull applet directly. Even if it is implemented, it will face the risk that the open label suddenly changes the implementation in the IFrame and makes our encapsulation invalid.

So let’s just click the button and pull up the applet.

The way we can encapsulate it is to overwrite the open tag on the button that we want to trigger the pull-up applet, making sure that the iframe of the open tag and the HTML inside it are the same size as the overlaid button, and the style is transparent.

This way we don’t need to relate the style of the open tag to the HTML inside, nor do we have the problem of not being able to pull up the applet due to inconsistent click areas.

/** * Overwrites an open label onto the passed options.el element. Click to jump to the corresponding applet *@exports wxOpenLaunchWeapp
 * @param {Object} Options {el:dom, appID :id, URL :path} Parameters: element, applets original ID, applets path */

const wxOpenLaunchWeapp = function (options) {
 // jsApiList // jsApiList // jsApiList /
 configWx(['onMenuShareTimeline'.'onMenuShareAppMessage'.'onMenuShareQQ'.'onMenuShareQZone'], ['wx-open-launch-weapp']).then((wx) = > {
  console.log(wx);
  const btn = options.el; // Get the element
  const script = document.createElement('script'); // Create a script content slot
  script.type = 'text/wxtag-template';
  // Insert transparent a label with the same size as the external element into the slot
  const defaultHtml = `<a style='width:${options.el.clientWidth}px; height:${options.el.clientHeight}px; display:block; color: transparent; '>default buttom</a>`;
  script.text = defaultHtml;
  // The size of the open label is the same as that of the external element, and the layout is absolute
  const html = `<wx-open-launch-weapp
          id="launch-btn"
          style="width:${options.el.clientWidth}px;
          height:${options.el.clientHeight}px;
          display:block;
          position: absolute;
          z-index: 20;" 
          username="${options.appid}"
          path="${options.url}">${script.outerHTML}</wx-open-launch-weapp>`;
  const btnParent = btn.parentElement;
  btnParent.innerHTML = html + btnParent.innerHTML; // HTML string assignment
  const launchBtn = document.getElementById('launch-btn');
  launchBtn.addEventListener('ready'.(e) = > {
     console.log('ready', e);
  });
  launchBtn.addEventListener('launch'.(e) = > {
     console.log('success', e);
  });
  launchBtn.addEventListener('error'.(e) = > {
     console.log('fail', e.detail);
  });
 });
};
Copy the code

When we use it, all we need to pass in is the button element, the primitive ID of the applet, and the path

initWeixinJumpMiniProgram(buttonDom) {
   const options = {
      el: buttonDom,
      appid: this.water.miniProgramSourceId,
      url: this.water.miniProgramJumpUrl,
   };
   wxOpenLaunchWeapp(options);
}
Copy the code

In combination with URL Scheme, we add another layer of judgment. Users use Scheme to pull up small programs outside wechat and use wechat to open labels inside wechat. This can be done. Users have the same experience inside and outside wechat. Without the transfer page of URL Link, the user experience will be much better.