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

uniapp开发微信小程序 嵌套(uniapp开发/其他)H5，H5点击跳转微信小程序页面（通信

news 2026/1/23 22:15:06

环境： uniapp开发微信小程序，嵌套webview，H5页面也是用的uniapp框架开发，H5页面点击商品后，需要跳转到微信小程序的详情页面

做法的原因

在微信小程序中使用web-view元素，如果要实现 H5到小程序的通信，很难，很复杂，限制很多。

如果不做跳转页面，只做通信的话，建议通过后端接口轮询，或者WebSocket,
或者跳转loading页面，通过url传递参数，loading页面进行逻辑处理

在这里插入图片描述

在这里插入图片描述

成功源码：

  • H5项目
  1. 需要引入 weixin-js-sdk
 pnpm add weixin-js-sdk
  1. 在需要跳转微信小程序页面的页面引入
import jwx from 'weixin-js-sdk'
  1. 使用sdk的miniProgram.navigateTo事件可以跳转到微信小程序中的某个页面
 // 点击事件， url的值跟微信小程序中跳转的值一样，路径也跟微信小程序的一样// 微信小程序中怎么跳转，这个也怎么跳转toDetails(name, item) {if (name === 'design') {jwx.miniProgram.navigateTo({url: `/pageHome/pages/design/index?id=${item.id}`,})} else {jwx.miniProgram.navigateTo({url: `/pageHome/pages/videos/index?id=${item.id}`,})}},
  • 微信小程序逻辑
如果只是跳转到某个页面，微信小程序的web-view页面不需要任何操作
<web-view :src="src" :webview-styles="webviewStyles"></web-view>

如果有更好的方案，希望联系我，或者留言，谢谢大佬们！

相关文章：

uniapp开发微信小程序 嵌套(uniapp开发/其他)H5，H5点击跳转微信小程序页面（通信

环境&#xff1a; uniapp开发微信小程序&#xff0c;嵌套webview&#xff0c;H5页面也是用的uniapp框架开发&#xff0c;H5页面点击商品后&#xff0c;需要跳转到微信小程序的详情页面 做法的原因 在微信小程序中使用web-view元素&#xff0c;如果要实现 H5到小程序的通信&am…...

编程日记 2024/9/14 13:24:11

VM虚拟机器配置网络DHCP服务

1、VM虚拟机器网络配置&#xff0c;centos 精简版没有配合网卡&#xff0c;如何配置网络 一、查看网卡信息 使用ip addr或ifconfig -a命令查看系统中现有的网卡设备名称&#xff0c;通常可能是eth0、ens33等类似的名称。 二、编辑网络配置文件 网络配置文件通常位于/etc/syscon…...

编程日记 2024/9/14 13:23:10

使用 jd.item_get API打造可读性商品介绍

在数字化时代&#xff0c;电子商务的蓬勃发展使得商品信息的获取变得至关重要。对于电商平台而言&#xff0c;如何准确、快速地获取商品信息&#xff0c;并以吸引人的方式呈现给消费者&#xff0c;成为提高销售额和用户体验的关键。本文将介绍如何利用 jd.item_get API 获取商品…...

编程日记 2024/9/14 13:20:07

java 通过文件下载地址读取文件内容

需求&#xff1a;读取文件内容&#xff0c;已知文件下载地址 需要引入pdfbox依赖 <dependency> <groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.27</version> </dependency>Override pub…...

编程日记 2024/9/14 13:16:03

打造古风炫酷个人网页：用HTML和CSS3传递笔墨韵味

需要用到的背景大家可以自己找喜欢的风格!!! 当然俺把俺用的背景放到文章最后了哦&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 感谢关注和支持 长期更新哦~~~ 1. 简洁的页面布局&#xff1a;保持优雅和对称 在古风设计中&#xff0c;布局的对称性非常重要…...

编程日记 2024/9/14 13:15:02

vue 项目自适应 配置 px转rem 的插件postcss-pxtorem

1、安装 npm i postcss-plugin-px2rem --save -dev --force找到 postcss.config.cjs 没有的话就新建一个 module.exports {plugins: {// to edit target browsers: use "browserslist" field in package.jsonautoprefixer: {},"postcss-plugin-px2rem":…...

编程日记 2024/9/14 13:12:00

股票程序化交易是，第三方软件申请券商私有接口API的门槛

炒股自动化&#xff1a;申请官方API接口&#xff0c;散户也可以 python炒股自动化&#xff08;0&#xff09;&#xff0c;申请券商API接口 python炒股自动化&#xff08;1&#xff09;&#xff0c;量化交易接口区别 Python炒股自动化&#xff08;2&#xff09;&#xff1a;获取…...

编程日记 2024/9/14 13:09:56

JDK8的一些主要的新特性

JDK8&#xff08;Java Development Kit 8&#xff09; 是一个重要的版本&#xff0c;带来了许多显著的特性和改进&#xff0c;极大地提升了 Java 语言的功能性和开发效率。以下是 JDK 8 的一些主要新特性&#xff1a; 一、Lambda 表达式 1.简化匿名内部类的写法&#xff0c;…...

编程日记 2024/9/14 13:06:32

40岁的java程序员，还有出路吗？

目录 前言一、现状与挑战二、出路与机遇三、案例分析与启示四、结语 前言 40岁Java程序员的出路&#xff1a;挑战与机遇并存 在科技日新月异的今天&#xff0c;IT行业始终保持着高速的发展态势&#xff0c;而Java作为其中的重要一员&#xff0c;其地位依然稳固且充满挑战。对…...

编程日记 2024/9/14 13:05:31

【服务器】shell脚本之Docker创建nginx

#!/bin/bash# 定义目标目录和配置文件路径 BASE_DIR"/opt/docker/nginx"ETC_DIR"$BASE_DIR/etc" ETC_CONF_DIR"$ETC_DIR/conf.d" SSL_DIR"$ETC_CONF_DIR/ssl" LOG_DIR"$BASE_DIR/log"HTML_DIR"$BASE_DIR/html"C…...

编程日记 2024/9/14 13:04:27

提取蛋白质复合体结构中组装体的变换矩阵

PDB文件中&#xff0c;组装体变换矩阵&#xff08;assembly transformation matrices&#xff09;用于描述多聚体结构中各个单体之间的相对位置和取向。从蛋白质复合体 PDB 数据中提取每个组装体&#xff08;assembly&#xff09;的变换矩阵&#xff0c;通常需要解析 PDB 文件中…...

编程日记 2024/9/14 13:03:26

java程序员入行科目一之CRUD轻松入门教程(一)

之前在操作MySQL的时候&#xff0c;都是采用Navicat&#xff0c;或者cmd黑窗口。 无论使用什么方式和MySQL交互&#xff0c;大致步骤是这样的 建立连接&#xff0c;需要输入用户名和密码编写SQL语句&#xff0c;和数据库进行交互 这个连接方式不会变&#xff0c;但是现在需要 基…...

编程日记 2024/9/14 13:02:25

OpenHarmony鸿蒙开发（ Beta5.0）智能油烟机开发实践

样例简介 本Demo是基于Hi3516开发板&#xff0c;使用开源OpenHarmony开发的应用。本应用主要功能有&#xff1a; 可以搜索本地指定目录的图片和视频文件&#xff0c;并可进行点击播放。 可以通过wifi接收来自手机的美食图片以及菜谱视频&#xff0c;让我们对美食可以边学边做…...

编程日记 2024/9/14 12:58:19

【GBase 8c V5_3.0.0 分布式数据库常用维护命令】

一、查看数据库状态/检查&#xff08;gbase用户&#xff09; 1.gha_ctl monitor 使用gha_ctl monitor查看节点运行情况(跟dcs的地址和端口) gha_ctl monitor -c gbase -l http://172.20.10.8:2379 -Hall |coordinator | datanode | gtm | server|dcs:必选字段。指定查看哪类集…...

编程日记 2024/9/14 12:57:18

破解AI生成检测：如何用ChatGPT降低论文的AIGC率

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 降低论文的“AIGC率”是个挑战&#xff0c;但有一些策略可以尝试。使用ChatGPT逐步调整和改进内容&#xff0c;使其更加自然和原创&#xff0c;降低AI检测工具识别出高“AIGC率”的概率…...

编程日记 2024/9/14 12:53:14

Python用MarkovRNN马尔可夫递归神经网络建模序列数据t-SNE可视化研究

原文链接&#xff1a;https://tecdat.cn/?p37634 本文聚焦于利用马尔可夫递归神经网络&#xff08;MarkovRNN&#xff09;结合树库展开建模工作。MarkovRNN 通过整合马尔可夫特性与离散随机变量来深入探索递归神经网络中的随机转换机制&#xff0c;旨在高效处理具有复杂潜在信…...

编程日记 2024/9/14 12:52:13

setup函数子传父普通写法

父组件 <template><div><p>接收的数据: {{ receivedData }}</p><Demo4Chiren2 custom-event"handleGetWeb" /></div> </template><script> import { ref } from vue; import Demo4Chiren2 from ./demo4Chiren2.vue…...

编程日记 2024/9/14 12:48:09

seafaring靶场漏洞测试攻略

步骤一&#xff1a;打开网页 一&#xff1a;sql注入漏洞 步骤一&#xff1a;测试回显点 -1 union select 1,2,3# 步骤二&#xff1a;查看数据库 -1 union select 1,2,database()# 步骤三&#xff1a;查看表名 -1 union select 1,2,group_concat(table_name) from informati…...

编程日记 2024/9/14 12:47:08

简单示例，搞懂PowerBI的ALL()，ALLEXCEPT()和ALLSELECTED()的区别

假设我们有如下数据&#xff0c;我们来统计下各班级的人数 我们在报表页里加上 班级’二班‘ 的筛选条件&#xff0c;此时PowerBI已经自动为我们显示了各班级人数&#xff1a;一班有3人&#xff0c;二班有1人。 根据我们的筛选条件&#xff0c;我们的统计人数应该是按照筛选器&…...

编程日记 2024/9/14 12:45:07

Collection

java.util.Collections:是集合工具类 作用&#xff1a;Collections不是集合&#xff0c;而是集合的工具类 常用API addAll package Collections;import java.util.ArrayList; import java.util.Collections;public class CollectionsDemo {public static void main(String[]…...

编程日记 2024/9/14 12:44:06

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2026/1/18 16:41:56

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/1/18 7:43:26

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2026/1/23 10:10:53

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2026/1/22 19:30:11

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2026/1/23 14:57:00

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2026/1/11 6:22:16

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/9/28 19:00:18