微信小程序web-view与H5 通信方式探索

article/2025/11/9 16:28:07

本文作者为奇舞团前端开发工程师

小程序简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

需求

微信小程序 H5 混合开发就是 在一个小程序中，采用部分小程序原生页面，部分通过Webview内嵌 H5 页面¹，二者配合实现完整业务逻辑的方案。7547572b87ffb559d3df7f69126ed65a.png

为什么需要混合开发

  • 原生无法满足（例如某团队维护SDK 只提供了WEB端jsSDK，且不维护小程序SDK）

  • H5可以同时适用多端（适用范围更广）

  • H5可以弥补小程序部分欠缺

  • 微信生态有部分限制（包大小，设计规范等）

小程序WebView基本用法

  • 定义：微信小程序组件 Web-view 定义：承载网页的容器

用法

<web-view class="web-holder" src="{{url}}" bindload="bindload" binderror="binderror" bindmessage="bindGetMsg"></web-view>

web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。支持的接口有：

接口名说明最低版本
wx.miniProgram.navigateTo参数与小程序接口一致1.6.4
wx.miniProgram.navigateBack参数与小程序接口一致1.6.4
wx.miniProgram.switchTab参数与小程序接口一致1.6.5
wx.miniProgram.reLaunch参数与小程序接口一致1.6.5
wx.miniProgram.redirectTo参数与小程序接口一致1.6.5
wx.miniProgram.postMessage向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件1.7.1
wx.miniProgram.getEnv获取当前环境1.7.1

d61bddcabf958ebdceced411484c6d0f.png

ff90eed85c534e3d0ee0ca7f277d2d6b.png

  • 解决方式-小程序后台配置合法域名

ef77ef9a557e2d1891d1d794d0bc3cba.png

  • 由于我们处于开发阶段，本地H5项目 ip 为127.0.0.1，估我们需要配置以下，临时打开

609f9fbe652e45754346ece829d20ac5.png
image.png

Bug & Tip

  1. tip：网页内 iframe 的域名也需要配置到域名白名单。

  2. tip：开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。

7d14c30f13efe24bdd7910420ef2bb93.png
image.png

  1. tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。

  2. tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。

  3. tip：在 iOS 中，若存在 JSSDK 接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决。

  4. tip：避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent

小程序与H5 通信方式

方式一：小程序->H5  通过 URL 拼接参数

http://127.0.0.1:8080/test?key=123

方式二：H5->小程序wx.miniProgram.postMessage api

实现方式：

  • 引入js SDK

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

  • vue 项目需要安装依赖

npm install weixin-webview-jssdk

  • 小程序绑定方法

<web-view  bindmessage="bindGetMsg"></web-view>bindGetMsg:function(res){console.log('从h5页面获取到的信息----->',res)
}

  • h5端 调用wx.miniProgram.postMessage

import wx from "weixin-webview-jssdk";
wx.miniProgram.postMessage({ data: { foo: {} } });
3b0917a4a9c4d8edbf9f96f5be6f17f3.png
image.png

优点：接入成本低

缺点：向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件，只能这些特定时机，基本宣布postMessage没用！因为这些时机很苛刻，不符合我们要求。反人类设计！

方式二：url 携带信息navigateTo、reLaunch、redirectTo

实现方式：

wx.miniProgram.navigateTo({url: '../h5/loading-page',})
wx.miniProgram.navigateTo({url: '../h5/loading-page?type=aaa',})

缺点：url 数据量有限，且需要打开界面

方式三：内存共享

无法实现，原因 wx.setStorage 与localStorage 隔离

localStorage.setItem('h5key','value')
wx.setStorageSync('wx-key', 'value')
1c513cae4d42a0efe9e8d757a589ca41.png
image.png

长连-Websocket

  • Websocket 简介：WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议；

  • 建立在 TCP 协议之上，服务器端的实现比较容易。

  • 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

  • 数据格式比较轻量，性能开销小，通信高效。

  • 可以发送文本，也可以发送二进制数据。

  • 没有同源限制，客户端可以与任意服务器通信。

  • 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

优点：可以实现实时通信

缺点：成本高，服务器压力大等；放弃此方式。

总结

  • 微信并不鼓励在小程序中大范围嵌入 H5，为了避免开发者把小程序变成“浏览器”，微信对小程序与内嵌 H5 的通讯做了诸多限制

  • 尽量使用单一方式实现，比如纯小程序原生，将h5功能移至小程序原生

  • 原生页面与 H5 之间通过 URL 进行通信

  • 不要尝试越过wx 限制

  • 不得不用混合开发时，尽量做好优化，引入骨架屏等优化方式提高用户体验感

  • 以上三种方式均未很好实现web-view 与H5双向通信

优化-骨架屏

2ef56d3d0c1b7970636c5f3139ed6382.png骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。骨架屏在内容还没有出现之前的页面骨架填充，以免留白。

小程序骨架屏引入方式

  • 微信支持一键生成骨架屏

使用方法：

  1. 生成骨架屏页面index.skeleton.wxml

<template name="skeleton"><view class="sk-container"><view class="container"><view class="userinfo"><view class="userinfo-avatar"><open-data type="userAvatarUrl"></open-data></view><open-data type="userNickName"></open-data></view><view class="usermotto"><text class="user-motto sk-transparent sk-text-14-2857-765 sk-text">Hello World</text></view></view></view>
</template>

  1. 生成骨架屏样式index.skeleton.wxss

.sk-transparent {color: transparent !important;
}
.sk-text-14-2857-765 {background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;background-size: 100% 44.8000rpx;position: relative !important;
}
.sk-text {background-origin: content-box !important;background-clip: content-box !important;background-color: transparent !important;color: transparent !important;background-repeat: repeat-y !important;
}
.sk-container {position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;background-color: transparent;
}

  1. 在 /pages/index/index.wxml 引入模板

<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />

  1. 在 /pages/index/index.wxss 中引入样式

@import "./index.skeleton.wxss";

小程序骨架屏官方指引

H5骨架屏引入方式

Page Skeleton是一款 webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。

  • 支持多种加载动画

  • 针对移动端 web 页面

  • 支持多路由

  • 可定制化，可以通过配置项对骨架块形状颜色进行配置，同时也可以在预览页面直接修改骨架页面源码

  • 几乎可以零配置使用

H5 骨架屏使用方式具体见Page Skeleton GitHub

引用

  • https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

  • https://www.ruanyifeng.com/blog/2017/05/websocket.html

  • Page Skeleton

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

21d5ab93c769f25238eb09a8dd6d3b71.png


http://chatgpt.dhexx.cn/article/97fhkN2c.shtml

相关文章

微信小程序与webview H5交互（内嵌H5跳转原生页面）

微信小程序与webview H5交互（内嵌H5跳转原生页面）

在开发中&#xff0c;使用web-view组件内嵌H5页面是非常常见的&#xff0c;但很多人不知道webview内嵌H5如何与原生小程序 交互。下面介绍下实现微信小程序与webview H5交互的方法。 web-view功能描述 承载网页的容器。会自动铺满整个小程序页面&#xff0c;个人类型的小程序…
阅读更多...
Python：下载安装包

Python：下载安装包

示例1&#xff1a;安装jieba包 1.全自动安装包 WindowsR&#xff1a;输入cmd pip install jieba / pip3 install jieba 由于下载总出现错误&#xff0c;故选择其他方法进行安装包的下载。 2.半自动安装 1&#xff09;下载安装包的官方网站&#xff1a;jieba PyPI 网盘下…
阅读更多...
Python和PyCharm的下载和安装（详细教程）

Python和PyCharm的下载和安装（详细教程）

一.Python的下载和安装 1.点击下方链接进入Python官网&#xff1a; https://www.python.org/downloads 2.根据自己的需求选择python的版本&#xff0c;点击【Download】 3.等待下载完成 4.双击进行安装&#xff0c;勾选添加环境&#xff0c;点击自定义安装 5.勾选后点击【Ne…
阅读更多...
Python的下载与安装

Python的下载与安装

一.下载 1.直接下载&#xff1a;有安装包的话可直接下载并安装 2.官网下载&#xff1a;在浏览器的导航栏输入python.org后回车进入官网 &#xff08;官网界面&#xff09; &#xff08;1&#xff09;点击Downloads后选择相应的系统下载python&#xff0c;Windows系统选择Win…
阅读更多...
电脑上如何安装python

电脑上如何安装python

第一步&#xff1a;下载Python安装包 在Python的官网 www.python.org 中找到最新版本的Python安装包&#xff0c;点击进行下载&#xff0c;请注意&#xff0c;当你的电脑是32位的机器&#xff0c;请选择32位的安装包&#xff0c;如果是64位的&#xff0c;请选择64位的安装包&a…
阅读更多...
Python的下载和安装教程

Python的下载和安装教程

今天学习python以及pycharm的下载和安装&#xff0c;参考了好几个博客&#xff0c;在此总结一下安装过程。 注意&#xff1a;在这里说明一下&#xff0c;如果要用pycharm进行python的开发&#xff0c;是要分别下载pycharm和python的&#xff0c;不要只安装pycharm就结束了。 …
阅读更多...
怎么在python官网下载python,python的官方网址是什么

怎么在python官网下载python,python的官方网址是什么

python的安装包怎么下载 下载python安装包的方法&#xff1a;1、访问python的官网地址“”2、点击Download下面的Latest后面的python版本3、在跳转后的页面用鼠标滑到最下面&#xff0c;显示的就是python的所有系统的安装包了更多Python知识&#xff0c;请关注&#xff1a;Pyt…
阅读更多...
怎么在python官网下载python,官网python怎么下载安装

怎么在python官网下载python,官网python怎么下载安装

python怎么安装 在Python官网下载Python安装包&#xff0c;双击打开Python软件。勾选add Python 3.8 to PATH&#xff0c;点击install Now。 安装完成后&#xff0c;点击Close.打开电脑命令提示符&#xff0c;输入Python&#xff0c;按回车键运行。出现版本号&#xff0c;就说…
阅读更多...
python官网下载安装教程

python官网下载安装教程

1.进入官网&#xff0c;选择自己所需要的版本 官网地址&#xff1a;https://www.python.org/downloads/ 2.选择对应系统的安装包下载 3.下载完成&#xff0c;点击安装包进行安装、配置 不建议安装在C盘 4.确认python是否安装成功 cmd输入命令python&#xff0c;返回安装的pyt…
阅读更多...
python官方下载安装教程,python官方下载网站

python官方下载安装教程,python官方下载网站

python下载安装教程 python下载安装教程&#xff1a;自定义安装目录&#xff0c;点击install进行安装&#xff0c;打开cmd窗口&#xff0c;输入python&#xff0c;显示python的版本&#xff0c;安装成功。 Python语言更适合初学者&#xff0c;Python语言并不会让初学者感到晦…
阅读更多...
python电脑上怎么下载-Python下载和安装图文教程[超详细]

python电脑上怎么下载-Python下载和安装图文教程[超详细]

如今python语言非常火&#xff0c;很多小伙伴都开学习python&#xff0c;但是很多小伙伴在安装python的时候遇到问题&#xff0c;下面我们就想详细介绍介绍python下载和安装的方法。 1、 打开python下载链接https://www.python.org/downloads/&#xff0c;点击自己想要的版本。…
阅读更多...
Python的下载安装教程（很详细，初学者也能懂）

Python的下载安装教程（很详细，初学者也能懂）

文章目录 Python的下载安装配置环境变量可提供远程搭建运行服务点击获取项目源码 Python的下载安装 1.进入Python的官网&#xff0c; http://www.python.org/download/ &#xff0c;这里以下载Windows的Python为例 2.选择下载的版本是3.9.9&#xff0c;双击下载&#xff0c;注…
阅读更多...
python软件下载安装教程,如何下载和安装python

python软件下载安装教程,如何下载和安装python

python下载安装教程 首先打开浏览器&#xff0c;百度搜索【python】。出现搜索结果后&#xff0c;再进入下图所示的官网中。进入官网后&#xff0c;鼠标移至【download】再选择自己的系统。进入下载页面后&#xff0c;再选择python的版本。 下载完成后&#xff0c;再点击打开…
阅读更多...
初入Python —— Python下载

初入Python —— Python下载

Python是一个较为高级的编程语言。那要怎么使用它呢&#xff1f; 所以&#xff0c;我们要知道如何下载Python。 目录 前言 一、Python下载 1.下载方法&#xff08;一&#xff09; 2.下载方法&#xff08;2&#xff09; 3.下载方法&#xff08;3&#xff09;——Windows版本…
阅读更多...
2021：Python的下载安装教程（很详细，初学者也能懂）

2021：Python的下载安装教程（很详细，初学者也能懂）

文章目录 Python的下载安装配置环境变量喜欢技术的&#xff0c;一起进群交流学习吧&#xff01;&#xff01;&#xff01; Python的下载安装 1.进入Python的官网&#xff0c; http://www.python.org/download/ &#xff0c;这里以下载Windows的Python为例 2.选择下载的版本是…
阅读更多...
Python的下载安装（手把手教学）

Python的下载安装（手把手教学）

程序员养成日记第一天&#xff1a;从自主下载安装软件开始~~~ 目录 windows版本 MacOS版本 windows版本 1、进入Python官网 https://www.python.org/downloads/ 2、点击Downloads中的Windows版本 3、进入Windows版本&#xff0c;进行Python版本的挑选&#xff0c;建议P…
阅读更多...
BI数据分析从业者从零开始学习财务知识？有哪些入门书籍推荐

BI数据分析从业者从零开始学习财务知识？有哪些入门书籍推荐

商业智能BI项目的特点是面向全行业、全领域的&#xff0c;并且大部分的商业智能BI分析是直接支撑到集团高层管理决策。支撑管理决策的经营分析又离不开财务分析&#xff0c;所以基本上每个商业智能BI项目都会涉及到财务分析相关的内容。 但财务又是一个非常专业的领域&#xf…
阅读更多...
理财入门：财务报表(简单介绍，后续入门系列文章写完后，会写实践文章在详细介绍)

理财入门：财务报表(简单介绍，后续入门系列文章写完后，会写实践文章在详细介绍)

文章目录 前言财务报表是什么&#xff0c;有什么用&#xff1f;上市公司的财报通过财报读懂企业的18个步骤系统的投资技能顺序 前言 选出优质生钱资产类型股票是离不开财报分析这项技能的&#xff0c;财报不仅和投资有关&#xff0c;还能分析出家庭财务危机在哪。财报最重要的…
阅读更多...
vscode json文件中写注释

vscode json文件中写注释

1.在vscode 打开一个json文件&#xff0c;点击底部的 JSON with Comments 选择语言模式 2.搜索 com 注意&#xff1a;上述方法重启vscode可能会失效&#xff0c;在设置中添加如下配置 // 配置文件类型识别"files.associations": {"*.js": "javascrip…
阅读更多...
postman中为JSON数据写注释信息

postman中为JSON数据写注释信息

索引 问题描述解决方案添加方法处理效果 预处理函数代码 问题描述 在使用postman进行接口测试的时候&#xff0c;总是会碰到一个问题&#xff0c;请求参数如果是 json 格式时是不支持注释的&#xff0c;会将注释也一并发送出去&#xff0c;后端接受后可能会导致数据不正确。 …
阅读更多...
推荐文章

Copyright @ 2022~2023