使用web-view实现小程序内嵌h5页面 h5跳转回小程序 详情步骤

简介

   实现线上的h5通过小程序配置业务域名，web-view组件实现内嵌h5页面，h5跳转回小程序

一. h5项目放入效验文件传到线上

       登录微信公众平台下载效验文件   开发管理——>开发设置——>业务域名——>下载效验文件

然后把效验文件放在 npm run build打包后的h5项目根目录里 部署上传到线上  注意一定要打包后放入根目录里也就是dist文件包 内

二. 小程序配置业务域名

     配置业务域名 由上图可以看出 要注意两点 

1.h5的项目域名必须是https的

2.项目链接不能由/api的  正确格式www.baidu.com

三. 通过组件web-view进行传参跳转

   我这边 是使用 click点击事件跳转到webview页面  在通过web-view组件跳转到h5项目

 1.  创建webview页面  pages.json文件内  "pages"

  {
            "path" : "pages/webview/webview",
            "style" :                                                                                    
            {
                // "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }

2.  创建click点击事件函数

  goH5Edit(){
        // 需要携带的参数
        const nav={
          token:'125456',
          id:'24556',
          dis:'no'
        }
        路由动态跳转到webview页面
        uni.navigateTo({
          url:'/pages/webview/webview?nav='+JSON.stringify(nav)
        })
      }
    },

 3. 在webview页面中接收参数 创建web-view组件进行跳转到h5  代码如下

<template>
  <!-- 创建web-view组件  src路径是你将要跳转的h5路径 -->
  <web-view src="https://255555555555552555?nav=${nav}"></web-view>
</template>

<script>
  export default {
    data() {
      return {
        nav:''
      };
    },
    updated(e) {
      // 接收路由传参 赋值传到H5中
      this.nav=e
    }
  }
</script>

这时已经可以跳转到h5页面了，那边通过this.$route.query接参即可

二。h5 携带参数跳转到小程序界面

1.vue2 项目 在html中全局引入uni包 

注 微信和支付宝的包要放在uni包上面

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script type="text/javascript" src="https://appx/web-view.min.js"></script>
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

2.代码中使用uni-app的api

uni.redirectTo({
                url: '/a/a/a?images='+JSON.stringify(this.images)
              });