Realize mutual jump between H5 and applet

Function description:

1. When clicking the claims service, jump to the mini program page

2. When you click Back, jump back to the H5 page from the applet (embed H5 and close the applet)

Function 1: H5 jump applet

Implementation steps in vue

== Write html in the template tag

<wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace -->
    <script type="text/wxtag-template">
        <button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button>
    </script>
</wx-open-launch-weapp>

Precautions:

username: the id of the applet, which starts with gh; path: the path of the applet to jump to, and you can add .html after it
After the initialization of wx.config is completed, the label wx-open-launch-weapp will be displayed. According to the needs, it should be initialized after entering the page as much as possible, and it is generally placed in mounted
wx-open-launch-weapp This label is equivalent to the exit of a jump applet, that is, when it is clicked, it will jump to the applet
Set the style, if the style of the style jump button is more complicated, it can be written as two buttons superimposed , set the wx-open-launch-weapp button to be transparent, and superimpose it on another button to realize the jump
When setting the style, I found that when setting the style of wx-open-launch-weapp, setting the width takes effect, but setting the height does not take effect. The solution here is to write more words in the weapp button, so that it exceeds the box below. Then weapp takes out a box to set overflow:hidden

== js in script

wx.config({
    debug: false, // 调试时可开启
    appId: "wxbb*********as", // <!-- replace -->
    timestamp: data.timestamp, // 生成签名的时间戳，必填，填任意数字即可
    nonceStr: data.nonceStr, // 生成签名的加密字符串，必填，填任意非空字符串即可
    signature: data.signature, // 生成的签名，必填，填任意非空字符串即可
    jsApiList: ["chooseImage", "previewImage", "wx-open-launch-weapp"], // 必填，随意一个接口即可（跳转小程序的任意接口即可）
    openTagList: ["wx-open-launch-weapp"], // 填入打开小程序的开放标签名
});

Precautions:

The appid here should use the appid of the official account instead of the applet (because it is the exit configured in the official account)
timestamp, nonceStr, signature should be generated by the backend (also generated by the official account information)

== Configure the js interface security domain name in the official account

Precautions:

The official account must be a service account, and the mini program must have been launched

Problems encountered:

In the wx-open-launch-weapp tag, when setting the style of the button, only the inline style can be used, and the outside must be wrapped with a template tag, otherwise it will not take effect
If you want to set the style of wx-open-launch-weapp, you can use two boxes to superimpose and set the weapp to be transparent

Function 2: The applet jumps to H5 (two types)

== Jump to H5 outside the applet ( close the applet )

-- Not inside the applet, jump to H5 (not from the applet page, jump to the H5 page, so the web-view tag cannot be used here)

-- It can be understood as closing the applet and displaying the original H5 page

-- Use the following code to close the applet

<navigator class="return_btn" open-type="exit" target="miniProgram">返  回</navigator>

== Jump to H5 in the applet ( embedded H5 )

-- In a separate page of the applet , wrap the address to be redirected with the web-view tag

Configure the domain name to be opened in the developer settings

The jump js of the previous page, followed by the parameters

wx.navigateTo({
      url: `/disease_management/pages/robot/robot?url=${baseUrl.API2}smart_rui&phone=${this.data.userInfo.phone}`,
});

wxml file:

<web-view src="{
   
   {url}}" bindmessage=""></web-view>

js file:

Page({
  data: {
    url: "",
  },
  onLoad(options) {
      // 这里要把参数分解出来，如果参数比较多的话可以用循环
    console.log(options);
    let { url } = options;
    // url = decodeURIComponent(url)
    if (options.phone) {
      url = url + "?phone=" + options.phone;
    }
    if (options.from) {
      url = url + "&from=" + options.from;
    }
    this.setData({
      url: decodeURIComponent(url),
    });
  },
});

Precautions:

The web-view will occupy the entire current page and will cover the entire page , no matter whether it is inside or outside of the web-view and other elements are added, it will not be displayed
If you want to go back after entering H5, you can use navigateTo to jump on the previous page of the current web-view, and then use the small arrow in the upper left corner to return (obviously add a floating return button to the current page. situation is not established)