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

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

news 2026/2/7 13:48:25

环境： 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

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2026/1/27 5:01:54

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2026/2/6 1:04:23

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2026/1/26 8:42:13

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

编程新知 2026/2/4 17:50:55

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...

编程新知 2025/12/6 11:14:42

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/11/8 20:34:42

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

编程新知 2025/12/8 9:32:22