微信小程序web-view ， 嵌入H5页面

Posted 2023-05-04

参考技术A

需求：
1、将已开发好的H5页面，嵌入先有的小程序。
2、并且要实现H5支付功能

解决方式 ：web-view

1、 登陆 小程序管理后台
a . 如果是公众号 。则进行双向绑定

完成这一步 ，那么基本上就差不多成功了一大半

2、在小程序里面嵌入h5

web-view
文档里面有的东西，就不赘述le~
a.在小程序里面定义一个你想要的H5入口

b. 新建一个页面，用来放H5的链接

ok~现在已经完成h5的嵌入

3、h5实现支付功能 - 唤醒微信支付

目前只有这种实现方式。等待微信更新 支持小程序的web-view可以唤醒微信支付

总结：
个人见解： 微信内置浏览器， 打开微信公众号H5页面，也可以唤醒微信支付。微信小程序里面web-view相当于小程序的内置浏览器，暂时不支持唤醒微信支付。虽然小程序是在微信里面，但是web-view又和微信内置浏览器不同~ 感觉微信想把小程序独立出来~

微信小程序web-view组件嵌入h5页面导致双导航栏，如何只保留其中一个？

一. 前提

1. 已知存在一个微信小程序，该小程序的某个页面通过web-view组件嵌套了我们app的一个h5页面，h5页面本身有自己的导航栏，就导致了双导航栏。
2. 由于uniapp的 web-view 组件一定有原生导航栏，pages.js中设置navigationStyle: custom 对 web-view 组件无效；所以只能去掉h5里的导航。

二. 问题分析

对 web-view 组件不了解的小伙伴们，直接查看官方文档介绍即可。入口地址: 小程序 web-view
介绍：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。

三. 解决方案

h5页面现在有两个地方在使用，一个是app里需要保留导航栏，另一个小程序中需要去掉h5的导航栏，所以需要条件判断，在使用web-view 组件项目中的页面src指向的链接多加一个navigatorType = miniprogram 参数；在h5页面，mounted()生命周期中取传来的参数this.$route.query.navigatorType，如果等于"miniprogram"，隐藏h5导航栏，否则按原样显示导航栏。

<template>
  <view>
    <web-view
      :webview-styles="webviewStyles"
      :src="h5Url"
      @message="handleMessage"
    ></web-view>
  </view>
</template>

<script>
import config from '@/utils/config'
import  getToken  from '@/utils/token.js'
export default 
  data() 
    return 
      h5PageName: 'ceshiName',
      h5Url: '',
      webviewStyles: 
        progress: 
          color: '#FF3333',
        ,
      ,
    
  ,
  onLoad() 
    this.h5Url = `$
      config.h5PageBaseHttp + this.h5PageName
    ?navigatorType=miniprogram&token=$getToken()`
  ,

</script>

<style></style>

h5页面

  mounted() 
     let navigatorType = this.$route.query.navigatorType;
      if (navigatorType === "miniprogram") 
        this.isNavBar = false;
      
  ,

app中跳转到h5页面就不需要加 navigatorType = miniprogram 参数了