• Uniapp中嵌入H5（ uniapp开发的H5），并且在H5中跳转到APP的指定页面

    原生H5跳转uniapp开发的app方式：

    1.在APP中使用web-view嵌入H5页面使用web-view组件实现
    1. <template>
    2. 	<view>
    3. 		<web-view src="https://uniapp.dcloud.net.cn/component/web-view.html">web-view>
    4. 	view>
    5. template>

    2.在H5项目引入webview.js

    1.    导入web-view 的SDK
    2.     
    3.

     3.调用方法跳转至app 内部的页面的关键方法 uni.reLaunch

    1. uni.reLaunch({
    2.                   url: '/pages/tabBar/component/component'
    3.                 });
    4.

    4.跳转方式：

    2.     
    3.     <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js">script>
    4.     <script type="text/javascript">
    5.       // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。 
    6.  H5端与app端通信
    7.       document.addEventListener('UniAppJSBridgeReady', function() {
    8.         uni.postMessage({
    9.             data: {
    10.                 action: 'message'
    11.             }
    12.         });
    13.         uni.getEnv(function(res) {
    14.             console.log('当前环境：' + JSON.stringify(res));
    15.         });
    16.  
    17.         document.querySelector('.btn-list').addEventListener('click', function(evt) {
    18.           var target = evt.target;
    19.           if (target.tagName === 'BUTTON') {
    20.             var action = target.getAttribute('data-action');
    21.             switch (action) {
    22.               case 'switchTab':
    23.                 uni.switchTab({
    24.                   url: '/pages/tabBar/API/API'
    25.                 });
    26.                 break;
    27.               case 'reLaunch':
    28.                 uni.reLaunch({
    29.                   url: '/pages/tabBar/component/component'
    30.                 });
    31.                 break;
    32.               case 'navigateBack':
    33.                 uni.navigateBack({
    34.                   delta: 1
    35.                 });
    36.                 break;
    37.               default:
    38.                 uni[action]({
    39.                   url: '/pages/component/button/button'
    40.                 });
    41.                 break;
    42.             }
    43.           }
    44.         });
    45.         document.getElementById('postMessage').addEventListener('click', function() {
    46.           uni.postMessage({
    47.             data: {
    48.               action: 'message'
    49.             }
    50.           });
    51.         });
    52.       });
    53.     script>

    上面的跳转方式可以解决APP嵌入原生H5页面跳转回APP的问题，但是使用uniapp开发的H5就会失效，在uniapp开发H5页面使用 uni.reLaunch 只能跳转到H5项目本地的页面。

    uniapp开发H5跳转方式：

    1.在H5项目里引入 web-view.js：

    通过官网链接下载 web-view.js文件（下载链接，打开链接右键另存为下载链接，），放到项目的static/js文件中

    2.在main.js中引入

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

    3.使用方式：

    1. 				// #ifdef APP-PLUS
    2. 				uni.webView.postMessage({
    3. 					data: {
    4. 						action: 'uni-app',
    5. 					}
    6. 				});
    7. 				uni.webView.reLaunch({
    8. 					url: '/pages/tabBar/component/component'
    9. 				});

    区别在于 uniapp开发的H5要在uni前面加上 webView

    官方H5代码：

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    6.     <title>网络网页title>
    7.     <style type="text/css">
    8.       .btn {
    9.         display: block;
    10.         margin: 20px auto;
    11.         padding: 5px;
    12.         background-color: #007aff;
    13.         border: 0;
    14.         color: #ffffff;
    15.         height: 40px;
    16.         width: 200px;
    17.       }
    18.  
    19.       .btn-red {
    20.         background-color: #dd524d;
    21.       }
    22.  
    23.       .btn-yellow {
    24.         background-color: #f0ad4e;
    25.       }
    26.  
    27.       .desc {
    28.         padding: 10px;
    29.         color: #999999;
    30.       }
    31.  
    32.       .post-message-section {
    33.         visibility: hidden;
    34.       }
    35.     style>
    36.   head>
    37.   <body>
    38.     <p class="desc">web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。p>
    39.     <div class="btn-list">
    40.       <button class="btn" type="button" data-action="navigateTo">navigateTobutton>
    41.       <button class="btn" type="button" data-action="redirectTo">redirectTobutton>
    42.       <button class="btn" type="button" data-action="navigateBack">navigateBackbutton>
    43.       <button class="btn" type="button" data-action="reLaunch">reLaunchbutton>
    44.       <button class="btn" type="button" data-action="switchTab">switchTabbutton>
    45.     div>
    46.     <div class="post-message-section">
    47.       <p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。p>
    48.       <div class="btn-list">
    49.         <button class="btn btn-red" type="button" id="postMessage">postMessagebutton>
    50.       div>
    51.     div>
    52.     <script type="text/javascript">
    53.       var userAgent = navigator.userAgent;
    54.       if (userAgent.indexOf('AlipayClient') > -1) {
    55.         // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
    56.         document.writeln('