脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序嵌入H5页面webview

微信小程序嵌入H5页面(webview)的基本用法和父子传参数详细说明

 更新时间：2024年08月22日 10:56:14   作者：天天鸭  
微信小程序中嵌入H5页面通常指的是在小程序中使用Web-view组件来加载外部的网页,下面这篇文章主要给大家介绍了关于微信小程序嵌入H5页面(webview)的基本用法和父子传参数的相关资料,需要的朋友可以参考下

背景：

最近实现一个功能需要在小程序嵌入其它系统内部的一个页面（用vue写的H5页面），但小程序是无法使用iframe的，所以最终选择小程序官方的webview实现，本文对基本用法和父子传参进行说明。所以下面将说明：

  • 小程序官网配置业务域名
  • 标签的用法。
  • 父子传参数。
  • H5 跳转回小程序。

一、 小程序官网配置业务域名

小程序官方要求配置，如果不配置在趁机上会无法打开，但在微信开发者工具正常
步骤： 在微信小程序后台，开发->开发管理->开发设置->业务域名 这里添加需要嵌入到小程序里面 H5 页面的合法域名（最多200个）；

二、标签的用法

web-view 承载网页的容器。会自动铺满整个小程序页面，不能像iframe那样能设置某个区域

直接使用标签即可
 <web-view src="xxxxxxxxxx"></web-view>

三、父子传参数

父传子(本地系统传到被嵌入的H5页面)：

  //这是小程序页面
 <web-view src="{{webUrl}}"/>

//这是H5页面
created() { 
    // H5获取token const wxobj = {} 
    window.location.href.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (wxobj[k] = v)) 
    if ( wxobj.token) { 
        store.commit( 'user/setToken', wxobj.token) 
    } 
}

小程序用url拼接过去，H5页面通过window.location.href.replace获取到内容

子传父（H5传给小程序）：

注意： 在H5系统（被嵌入） 需要安装官方的weixin-js-sdk包，步骤如下：

(1)安装：

pnpm add weixin-js-sdk

(2)使用的页面引入：

import wx from "weixin-js-sdk";

(3)使用传参给父：

wx.miniProgram.postMessage({ 
    data: { token } 
});

本地系统接收（小程序）

<web-view src="{{webUrl}}" bindmessage="getMessage"/>

//接收网页数据
 getMessage: function (res) {
    let token = res.detail.data;
    this.setData({ token });
  },

四、 H5 跳转回小程序。

需要用到上面引入的weixin-js-sdk包

const name = '天天'
wx.miniProgram.navigateTo({
  url: `/pages/my/my?name=${name}` , // 小程序地址
  success () {
    console.log('question success')
  },
  fail (error) {
    console.log(error)
  }
})

父系统能拿到？后面的传参数

onLoad(option) { 
    this.name = JSON.parse(option.name); 
},

更多weixin-js-sdk包的API可以去官网查：点击跳去

总结 

到此这篇关于微信小程序嵌入H5页面(webview)的基本用法和父子传参数详细说明的文章就介绍到这了,更多相关微信小程序嵌入H5页面webview内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript流程控制语句实例详解

    JavaScript流程控制语句实例详解

    JavaScript中的流程控制语句是编写复杂逻辑和控制程序执行顺序的关键元素,这篇文章主要介绍了JavaScript流程控制语句的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-12-12
  • JavaScript中按位“异或”运算符使用介绍

    JavaScript中按位“异或”运算符使用介绍

    按位“异或”运算符 (^)是对两个表达式执行按位异或，下面为大家介绍下其具体的使用方法
    2014-03-03
  • 详解JavaScript常量定义

    详解JavaScript常量定义

    本文主要对JavaScript常量定义进行详细介绍，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • js和jquery分别验证单选框、复选框、下拉框

    js和jquery分别验证单选框、复选框、下拉框

    这篇文章主要为大家详细介绍了js和jquery分别验证单选框、复选框、下拉框的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 前端实现HTML网页转PDF并导出

    前端实现HTML网页转PDF并导出

    这篇文章主要为大家详细介绍了前端如何通过html2canvas和jsPDF实现HTML网页转PDF并导出,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
    2025-01-01
  • JavaScript在web自动化测试中的作用示例详解

    JavaScript在web自动化测试中的作用示例详解

    这篇文章主要给大家介绍了关于JavaScript在web自动化测试中的作用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-08-08
  • 微信小程序时间控件picker view使用详解

    微信小程序时间控件picker view使用详解

    这篇文章主要介绍了微信小程序时间控件picker view的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]

    js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]

    W3C的标准告诉我们，可以通过Dom对象的contentDocument属性来返回文档对象。
    2011-01-01
  • bootstrap-paginator服务器端分页使用方法详解

    bootstrap-paginator服务器端分页使用方法详解

    这篇文章主要为大家详细介绍了bootstrap-paginator服务器端分页的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 在JavaScript中使用高阶函数的方法

    在JavaScript中使用高阶函数的方法

    JavaScript可以接受高阶函数。这种处理高阶函数的能力以及其他特点，使JavaScript成为非常适合函数式编程的编程语言之一，这篇文章主要介绍了如何在JavaScript中使用高阶函数,需要的朋友可以参考下
    2022-09-09

最新评论