H5 is embedded in Uniapp (H5 developed by uniapp), and jumps to the specified page of the APP in H5

Native H5 jump app method developed by uniapp:

1. Use web-view to embed the H5 page in the APP and use the web-view component to implement it

<template>
<view>
<web-view src="//i2.wp.com/uniapp.dcloud.net.cn/component/web-view.html"></web-view>
</view>
</template>

2. Introduce webview.js into H5 project

<!-- You need to download uni.webview.1.5.4.js to your own server --> Import the SDK of web-view
    <script type="text/javascript" src="//i2.wp.com/unpkg.com/@dcloudio/[email protected]/index.js"></script>
    

3. Call the key method uni.reLaunch to jump to the page inside the app

uni.reLaunch({
                  url: '/pages/tabBar/component/component'
                });

4. Jump method:

<!-- uni's SDK -->
    <!-- You need to download uni.webview.1.5.4.js to your own server -->
    <script type="text/javascript" src="//i2.wp.com/unpkg.com/@dcloudio/[email protected]/index.js"></script>
    <script type="text/javascript">
      // After the `UniAppJSBridgeReady` event is triggered, the uni API can be called.
 Communication between H5 terminal and app terminal
      document.addEventListener('UniAppJSBridgeReady', function() {
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('Current environment:' + JSON.stringify(res));
        });

        document.querySelector('.btn-list').addEventListener('click', function(evt) {
          var target = evt.target;
          if (target.tagName === 'BUTTON') {
            var action = target.getAttribute('data-action');
            switch (action) {
              case 'switchTab':
                uni.switchTab({
                  url: '/pages/tabBar/API/API'
                });
                break;
              case 'reLaunch':
                uni.reLaunch({
                  url: '/pages/tabBar/component/component'
                });
                break;
              case 'navigateBack':
                uni.navigateBack({
                  delta: 1
                });
                break;
              default:
                uni[action]({
                  url: '/pages/component/button/button'
                });
                break;
            }
          }
        });
        document.getElementById('postMessage').addEventListener('click', function() {
          uni.postMessage({
            data: {
              action: 'message'
            }
          });
        });
      });
    </script>

The above jump method can solve the problem of the APP embedded in the native H5 page to jump back to the APP, but the H5 developed using uniapp will be invalid. Using uni.reLaunch on the H5 page developed by uniapp can only jump to the local H5 project. page.

Uniapp develops H5 jump method:

1. Introduce web-view.js into the H5 project:

Download the web-view.js file through the official website link (download link, right-click on the link and save as download link), and put it in the static/js file of the project

2.Introduced in main.js

import App from './App'
import webView from './static/js/uni.webview.1.5.2.js'
....

3. Usage:

 // #ifdef APP-PLUS
uni.webView.postMessage({
data: {
action: 'uni-app',
}
});
uni.webView.reLaunch({
url: '/pages/tabBar/component/component'
});

The difference is that H5 developed by uniapp needs to add webView in front of uni

Official H5 code:

  
    
    
    
    
  
  
    
The web-view component loads the web html example. Click the buttons below to jump to other pages.
    

      navigateTo
      redirectTo
      navigateBack
      reLaunch
      switchTab
    
    

      
The web page sends a message to the application. Note: The applet application will receive the message when the page returns.

      

        postMessage
      
    
    

//Jump mode, the following part of the code
<!-- uni's SDK -->
    <!-- You need to download uni.webview.1.5.4.js to your own server -->
    <script type="text/javascript" src="//i2.wp.com/unpkg.com/@dcloudio/[email protected]/index.js"></script>
    <script type="text/javascript">
      // After the `UniAppJSBridgeReady` event is triggered, the uni API can be called.
 Communication between H5 terminal and app terminal
      document.addEventListener('UniAppJSBridgeReady', function() {
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('Current environment:' + JSON.stringify(res));
        });

        document.querySelector('.btn-list').addEventListener('click', function(evt) {
          var target = evt.target;
          if (target.tagName === 'BUTTON') {
            var action = target.getAttribute('data-action');
            switch (action) {
              case 'switchTab':
                uni.switchTab({
                  url: '/pages/tabBar/API/API'
                });
                break;
              case 'reLaunch':
                uni.reLaunch({
                  url: '/pages/tabBar/component/component'
                });
                break;
              case 'navigateBack':
                uni.navigateBack({
                  delta: 1
                });
                break;
              default:
                uni[action]({
                  url: '/pages/component/button/button'
                });
                break;
            }
          }
        });
        document.getElementById('postMessage').addEventListener('click', function() {
          uni.postMessage({
            data: {
              action: 'message'
            }
          });
        });
      });
    </script>
    
  

The knowledge points of the article match the official knowledge files, and you can further learn related knowledge. Mini program skill tree Home page Overview 7847 people are learning the system