Jump back to APP from WebView in APP developed by UniApp

Requirements:

First, we use uniApp to generate Android APP, IOS APP and H5 three-terminal application. According to the existing requirements, when a web page opened by webView in my APP has a corresponding page in the APP, I can jump to the corresponding page of the APP to browse.

We usually open a third-party address (usually a collection webpage) through webView in the APP, and then select the resources in it to jump to our H5 webpage. However, the experience of browsing web pages through WebView is definitely not as good as browsing directly through APP, so we need to make a jump.

Solution:

Reference:

• Ask.dcloud.net.cn/article/350…
• Ask.dcloud.net.cn/article/388…

The introduction of js.cdn.aliyun.dcloud.net.cn/dev/uni-app… The script. It’s a pit. You have to change the source code manually. The uni object is registered in the uni.webview.js file. It is overwritten by the uni object that comes with the uniapp project. I just change the name of the uni object registered in the source code (webUni).

Link: pan.baidu.com/s/1PbLo2N_T… Extraction code: 4578

APP.vue

// Create a JS label if it does not exist
let JumpScriptTag = document.getElementById('JumpScriptTag');
if(! JumpScriptTag) { JumpScriptTag =document.createElement('script')
JumpScriptTag.type = 'text/javascript'
// Specify the JS address
JumpScriptTag.src = '.. /.. /.. /static/data/uni.webview.js'
// Specify the JS ID
JumpScriptTag.id = 'JumpScriptTag'
// Get the  tag of the page
let head = document.getElementsByTagName('head') [0]
// Insert JS and CSS into the DOM
head.appendChild(JumpScriptTag);
}

document.addEventListener('UniAppJSBridgeReady'.function() {
  webUni.getEnv(function(res) {
    // Determine the environment only when the WebView is open, so that the web page does not trigger again
    if(res.plus) {
      let pathNameStr = window.location.pathname;
      let searchStr = window.location.search;
      if(pathNameStr == '/pages/user/index' ||
        pathNameStr == '/pages/yigou/yigou' ||
        pathNameStr == '/pages/bookshelf/shelf/shelf' ||
        pathNameStr == '/pages/kecheng/kecheng' ||
        pathNameStr == '/'
      ) {
        webUni.switchTab({
          url: pathNameStr
        })
      } else {
        webUni.redirectTo({
          url: pathNameStr + searchStr
        })
      }
    }
  });
});
Copy the code