当前位置： 首页 > news >正文

微信小程序webview和小程序通讯

news 2026/1/1 6:23:31

1.背景介绍

1.1需要在小程序嵌入vr页面，同时在vr页面添加操作按钮与小程序进行通信交互

1.2开发工具：uniapp开发小程序

1.3原型图

功能：.点击体验官带看跳转小程序的体验官带看页面

功能：点击立即咨询唤起小程序弹窗打电话

2.组件及api介绍

uniapp官网：web-view | uni-app官网 (dcloud.net.cn)

web-view

web-view是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

属性说明

属性名

类型

说明

平台差异说明

src

String

webview 指向网页的链接

allow

String

用于为iframe指定其特征策略

H5

sandbox

String

该属性对呈现在iframe框架中的内容启用一些额外的限制条件。

H5

fullscreen

Boolean

是否铺满整个页面，默认值：true。

H5 (HBuilder X 3.5.4+)

webview-styles

Object

webview 的样式

App-vue

update-title

Boolean

是否自动更新当前页面标题。默认值：true

App-vue (HBuilder X 3.3.8+)

@message

EventHandler

网页向应用postMessage时，会在特定时机（后退、组件销毁、分享）触发并收到消息。

H5 暂不支持（可以直接使用window.postMessage）

@onPostMessage

EventHandler

网页向应用实时postMessage

App-nvue

@load

EventHandler

网页加载成功时候触发此事件。

微信小程序、支付宝小程序、抖音小程序、QQ小程序

@error

EventHandler

网页加载失败的时候触发此事件。

微信小程序、支付宝小程序、抖音小程序、QQ小程序

在小程序端，用法和iframe类似，直接在src赋值在线地址

<web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>

注意：

  • 小程序仅支持加载网络网页，不支持本地html
  • 小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。
  • 小程序平台，src指向的链接需登录小程序管理后台配置域名白名单。
  • 小程序平台，个人类型与海外类型的小程序使用web-view组件，提交审核时注意微信等平台是否允许使用
  • 小程序的web-view使用的是小程序自带的浏览器内核，不同厂商不一样，详见
  • 各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

<web-view>加载的网页中支持调用部分 uni 接口：

方法名

说明

平台差异说明

uni.navigateTo

navigateTo

uni.redirectTo

redirectTo

uni.reLaunch

reLaunch

uni.switchTab

switchTab

uni.navigateBack

navigateBack

uni.postMessage

向应用发送消息

抖音小程序不支持、H5 暂不支持（可以直接使用window.postMessage）

uni.getEnv

获取当前环境

抖音小程序与飞书小程序不支持

uni.postMessage(OBJECT)

网页向应用发送消息，在<web-view>的message事件回调event.detail.data中接收消息。

Tips

  • 传递的消息信息，必须写在 data 对象中。
  • event.detail.data中的数据，以数组的形式接收每次 post 的消息。（注：支付宝小程序除外，支付宝小程序中以对象形式接受）
#uni.getEnv(CALLBACK)

callback 返回的对象

属性

类型

说明

plus

Boolean

App

nvue

Boolean

App-nvue, uni.webview.1.5.4.js+ 支持

miniprogram

Boolean

微信小程序

smartprogram

Boolean

百度小程序

miniprogram

Boolean

支付宝小程序

3.实际操作

下面直接来看示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><!-- 引入ui库vant的样式 --><link rel="stylesheet" href="./vant.css"><!-- 引入自定义的全局样式 --><link rel="stylesheet" href="./global.css"><!-- 引入页面样式文件 --><link rel="stylesheet" href="./index.css"></head><body><div id="app"><div class="flex-1"><!-- 嵌入iframe展示vr页面 --><iframe class="iframe" src="https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx" allowfullscreen="true"frameborder="0"></iframe></div><main><!-- 底部操作按钮 --><div class="ptb-10 flex-vcenter flex-between"><van-button type="info" @click="handleLook">体验馆带看</van-button><van-button type="info" @click="handleRoom">看房型</van-button><van-button type="info" @click="handleAsk">立即咨询</van-button></div><!-- 看房型的弹窗 --><van-popup v-model="showRoomPopup" round position="bottom" :overlay="false":style="{ minHeight: '10%',padding: '15px 10px 10px',background: 'rgba(0,0,0,.7)' }"><div class="co-white pb-15" style="position: relative;"><p class="text-center">房型预览</p><div @click="showRoomPopup = false" class="arrow-down-wrap flex-vcenter"><span class="fs-12 mr-5">收起</span><van-icon name="arrow-down" /></div></div><van-grid class="rooms-wrap" :column-num="3"><van-grid-item v-for="(item,index) in urlParams.rooms" :key="index"><div class="co-white rooms-item" @click="goRoom(item.url)"><p class="rooms-content">{{item.name}}</p><van-image width="100%" height="100%" fit="cover" src="https://img01.yzcdn.cn/vant/cat.jpeg" /></div></van-grid-item></van-grid></van-popup></main></div><!-- 需要引入的文件 --><!-- vue --><script type="text/javascript" src="./vue.min.js"></script><!-- vant ui库 --><script type="text/javascript" src="./vant.min.js"></script><!--  微信小程序 JS-SDK  --><script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script><!-- 与uniapp建立连接 --><script type="text/javascript" src="./uni.webview.1.5.5.js"></script><!-- 页面的js文件 --><script type="text/javascript" src="./index.js"></script>
</body></html>
  • 因为使用的vantUi库，所以下载了vant.min.js，想用vue开发所以下载了vue.min.js，这2个不重要
  • 需要引入微信小程序 JS-SDK
  • 与uniapp建立连接，引入hellouniapp.dcloud.net.cn/hybrid/html/uni.webview.1.5.5.js，可以下载到本地
调用api与小程序通信
new Vue({el: '#app',components: {},data () {return {urlParams: {rooms: []},showRoomPopup: false}},computed: {},created () {},watch: {},mounted () {const { params } = this.urlToObj(location.href)if (params) {this.urlParams = JSON.parse(decodeURI(params))}document.addEventListener('UniAppJSBridgeReady', () => {uni.getEnv((res) => {console.log('当前环境：' + JSON.stringify(res));});})},methods: {// url参数转对象urlToObj (url) {let obj = {};if (url.indexOf('?') >= 0) {let str = url.slice(url.indexOf('?') + 1);let arr = str.split('&');console.log(str, arr)for (let j = arr.length, i = 0; i < j; i++) {let arr_temp = arr[i].split('=');obj[arr_temp[0]] = arr_temp[1];}}return obj;},// 点击体验官带看handleLook () {// 跳转到小程序的某个页面uni.navigateTo({url: '/pages/vr/look'});},// 点击看房型handleRoom () {console.log(this.urlParams)this.showRoomPopup = true;},goRoom (url) {// 跳转到小程序的某个页面uni.navigateTo({url: `/pages/vr/room?url=${url}`});},// 点击咨询handleAsk () {// 发送消息给小程序uni.postMessage({data: {action: '咨询'}});// 因为网页向应用?postMessage?时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 所以用uni.redirectTo触发小程序的重新加载实时接收消息uni.redirectTo({url: '/pages/vr/vr'});}}
})

页面预览效果：

小提示：如何在开发者工具查看webiew页面的信息

小程序端代码参考
<template><web-view :src="vrUrl" @message="onMessage"></web-view>
</template><script>
import { callPhone } from '@/utils';
export default {data() {return {vrUrl:// 这里要换成你的在线网页地址，我这里写的是本地的`http://127.0.0.1:5500/vr-demo/index.html?params=` +encodeURI(JSON.stringify({rooms: [{name: '房间1',url: 'https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx',},{name: '房间2',url: 'https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx',},],})),};},onLoad(props) {console.log(props);},methods: {// 接收webview传来的消息onMessage(e) {const { data } = e.detail;console.log(data,'web-view传来的信息,在小程序后退、组件销毁、分享会触发');console.log(data.at(-1));if (data?.at(-1)?.action === '咨询') {callPhone('18205236589');}},},
};
</script>

相关文章：

微信小程序webview和小程序通讯

1.背景介绍 1.1需要在小程序嵌入vr页面&#xff0c;同时在vr页面添加操作按钮与小程序进行通信交互 1.2开发工具&#xff1a;uniapp开发小程序 1.3原型图 功能&#xff1a;.点击体验官带看跳转小程序的体验官带看页面 功能&#xff1a;点击立即咨询唤起小程序弹窗打电话 2.…...

编程日记 2024/12/17 15:05:08

ChatGPT大模型 创作高质量文案的使用教程和案例

引言 随着人工智能技术的飞速发展，大语言模型如 ChatGPT 在创作文案、生成内容方面展现出了强大的能力。无论是个人用户还是企业用户，都可以利用 ChatGPT 提高工作效率、激发创意、甚至解决实际问题。本文将详细介绍 ChatGPT 如何帮助创作各类高质量文案，并通过具体案例展示…...

编程日记 2024/12/17 15:04:07

Vue Web开发（八）

1. VueWeb面包屑和tag的布局 本章节完成VueWeb面包屑和tag的布局&#xff0c;并且与左侧菜单联系&#xff0c;涉及组件间通信。 1.1. 页面创建 &#xff08;1&#xff09;首先我们先完成每个页面的路由&#xff0c;之前已经有home页面和user页面&#xff0c;缺少mail页面和其…...

编程日记 2024/12/17 15:02:04

element-ui实现table表格的嵌套（table表格嵌套）功能实现

最近在做电商类型的官网&#xff0c;希望实现的布局如下&#xff1a;有表头和表身&#xff0c;所以我首先想到的就是table表格组件。 表格组件中常见的就是&#xff1a;标题和内容一一对应&#xff1a; 像效果图中的效果&#xff0c;只用基础的表格布局是不行的&#xff0c;因…...

编程日记 2024/12/17 15:01:03

【考前预习】4.计算机网络—网络层

往期推荐 【考前预习】3.计算机网络—数据链路层-CSDN博客 【考前预习】2.计算机网络—物理层-CSDN博客 【考前预习】1.计算机网络概述-CSDN博客 目录 1.网络层概述 2.网络层提供的两种服务 3.分类编址的IPV4 4.无分类编址的IPV4—CIDR 5.IPV4地址应用规划 5.1使用定长子…...

编程日记 2024/12/17 14:59:00

【java】MDC

目录 1. 说明2. 作用3. 使用4. 与TraceID的关系5. 注意事项 1. 说明 1.MDC&#xff08;Mapped Diagnostic Context&#xff09;是一个用于在多线程环境中追踪和传递日志上下文信息的机制。2.映射诊断环境。3.MDC是一个线程本地的、可维护的、可传递的上下文环境。4.它允许开发…...

编程日记 2024/12/17 14:56:58

Android 好的开源库

1. 权限请求框架 GitHub - getActivity/XXPermissions: Android 权限请求框架&#xff0c;已适配 Android 14 2. 下载框架 GitHub - lingochamp/okdownload: A Reliable, Flexible, Fast and Powerful download engine....

编程日记 2024/12/17 14:54:56

Go 语言结构

Go 语言结构 Go 语言，也称为 Golang，是一种由 Google 开发和支持的静态类型、编译型编程语言。它于 2009 年首次发布，旨在提高多核处理器、网络资源和大型代码库的性能。Go 语言以其简洁的语法、并发支持和强大的标准库而闻名，特别适合构建高性能的网络服务和分布式系统。…...

编程日记 2024/12/17 14:53:55

【漆学军】MT5几个重要类库的使用例子

MT5编程&#xff0c;有两种方式&#xff0c;一种是函数式编程&#xff0c;一种是面向对象编程。 面向对象编程&#xff0c;会让我们编写代码变得非常简单。 面向对象编程&#xff0c;主要是要熟悉4个类库。 #include <Trade\PositionInfo.mqh> #include <Trade\Tra…...

编程日记 2024/12/17 14:50:52

在 Ubuntu 24.04.1 LTS (WSL) 中使用 openssl 生成 keybox.xml

看到“生成 keybox.xml”&#xff0c;大概率都会联想到 PIF 和 Tricky Store。这里就不多解释它们的用途了。最近在网上看到生成非 AOSP keybox 的教程&#xff0c;在这里做一些补充&#xff0c;并将代码打包成一个 Python 脚本。 参考自&#xff1a; Idea 提供者&#xff1a…...

编程日记 2024/12/17 14:49:51

【JavaSE基础】第十六章：IO流

一、理解 1.简单而言&#xff1a;流就是内存与存储设备之间传输数据的通道、管道。 2.流的分类&#xff1a; (1) 按方向 ( 以 JVM 虚拟机为参照物 ) 【重点】 输入流&#xff1a;将< 存储设备 > 中的内容读入到 < 内存 > 中。 输…...

编程日记 2024/12/17 14:47:48

常见漏洞—SSRF_FastCGI

FastCGI协议 简介 Fast CGI源自旧版本的CGI 路由/结构图 # 访问url --> 浏览器生成HTTP请求报文 --> web server解析请求&#xff08;例如nginx&#xff09; web server 是内容的分发者 当访问静态页面时&#xff0c;web server 会直接返回资源&#xff0c;例如index.htm…...

编程日记 2024/12/17 14:46:46

LeetCode 283.移动零（超简单讲解）

283.移动零 题目示例示例1示例2 解题思路快慢指针实现设计 详细代码 题目 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 示例1 …...

编程日记 2024/12/17 14:42:42

GIS原理及应用、地理坐标系与投影坐标系

文章目录 一、GIS定义1.1 地理信息系统1.2 建模1.3 相关教程1.4 GIS前沿方向 二、GIS数据格式2.1 矢量2.2 栅格2.3 矢量与栅格的区别 三、GIS数据组织3.1 抽象3.2 分层3.3 栅格与切片 四、坐标系4.1 坐标系简介4.2 大地坐标系GCS4.3 投影坐标系PCS4.4 投影变换 五、空间数据库与…...

编程日记 2024/12/17 14:41:41

用github镜像加速， --recursive还是去github站怎么处理？

小伙伴们大多碰到过github抽风的情况&#xff0c;时通时断&#xff0c;时快时慢&#xff0c;非常考验心情。 以前碰到连不上的时候&#xff0c;我大多就是在gitee和gitcode网站找一下镜像&#xff0c;找到后直接git clone 新地址即可。但是碰到 --recursive的时候就不行了&…...

编程日记 2024/12/17 14:39:38

ctfshow-web 151-170-文件上传

151. 我们首先想到就是上传一句话木马。但是看源代码限制了png。 &#xff08;1&#xff09;改前端代码。 这里是前端限制了上传文件类型&#xff0c;那我们就改一下就好了嘛,改成php。 这里直接修改不行&#xff0c;给大家推荐一篇简短文章&#xff0c;大家就会了&#xff08…...

编程日记 2024/12/17 14:35:31

【电源专题】开关转换器使能（EN）管脚的几种不同方式

我们的文章说到了很多与使能有关的电源案例和原理，如下所示： 【电源专题】案例：芯片规格书使能定义高电平最小阈值1.4V，那真的是到1.4V时才开始输出？_芯片的电流阀值-CSDN博客...

编程日记 2024/12/17 14:27:22

5G学习笔记之SNPN系列之ID和广播消息

目录 1. 概述 2. SNPN ID 3. SNPN广播消息 1. 概述 SNPN&#xff1a;Stand-alone Non-Public Network&#xff0c;独立的非公共网络&#xff0c;由NPN独立运营&#xff0c;不依赖与PLMN网络。 SNPN不支持的5GS特性&#xff1a; 与EPS交互 emergency services when the UE acce…...

编程日记 2024/12/17 14:21:13

Qt-Advanced-Docking-System配置及使用、心得

Qt-Advanced-Docking-System 1. Qt-Advanced-Docking-System描述2. 功能特点2.1. 灵活的停靠方式2.2. 嵌套停靠2.3. 自定义布局保存与恢复2.4. 外观和行为定制 3. 与Qt原生停靠系统的比较4. 使用场景4.1. 集成开发环境&#xff08;IDE&#xff09;4.2. 图形设计软件4.3. 数据分…...

编程日记 2024/12/17 14:19:09

【Bolt.new + PromptCoder】三分钟还原油管主页

【Bolt.new PromptCoder】三分钟还原油管主页 PromptCoder官网&#xff1a;PromptCoder Bolt官网&#xff1a;https://bolt.new/ Bolt 是什么&#xff1f; Bolt.new 是一个提供创建全栈网络应用服务的平台。它允许用户通过提示&#xff08;Prompt&#xff09;、运行&#x…...

编程日记 2024/12/17 14:18:07

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/12/29 14:15:07

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/12/24 8:04:06

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/12/25 4:27:19

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/12/27 9:19:19

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/12/28 6:10:07

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/12/31 9:36:57

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00