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

Uniapp 微信小程序内打开web网页

技术栈:Uniapp + Vue3

简介

实际业务中有时候会需要在本微信小程序内打开web页面,这时候可以封装一个路由页面专门用于此场景。
在路由跳转的时候携带路由参数,拼接上web url,接收页面进行参数接收即可。

实现

webview页面

新建一个路由页面,处理接收到的web url,并使用web-view渲染。

<template><view class="container"><web-view :src="externalUrl"></web-view></view>
</template><script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";const externalUrl = ref("");
onLoad((options) => {externalUrl.value = options.url;
});
</script><style scoped>
.container {width: 100vw;height: 100vh;
}
</style>

跳转

在需要触发的页面,路由时带上web url。

/**
* 格式化路由携带的参数
**/
const createQuery = (obj, parentKey = '', keyValueSeparator = '=', pairSeparator = '&') => {let queryString = [];const that = this;Object.keys(obj).forEach(key => {const fullKey = parentKey ? `${parentKey}[${key}]` : key;if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {queryString.push(this.createQuery(obj[key], fullKey));} else {queryString.push(`${fullKey}${keyValueSeparator}${obj[key]}`);}});return queryString.join(pairSeparator);}/**
* 点击跳转web页面
**/
const onClick = () => {const params = {url: 'https://mp.weixin.qq.com/s/Dq4xx5FUFRB-oJKrwzjewg'}const url = '/pages/webview/index'const query = this.createQuery(params);uni.navigateTo({url: `${url}?${query}`,});
}

相关文章:

Uniapp 微信小程序内打开web网页

技术栈&#xff1a;Uniapp Vue3 简介 实际业务中有时候会需要在本微信小程序内打开web页面&#xff0c;这时候可以封装一个路由页面专门用于此场景。 在路由跳转的时候携带路由参数&#xff0c;拼接上web url&#xff0c;接收页面进行参数接收即可。 实现 webview页面 新…...

阅读方法论

选择固有缺陷,选项是对比出来的...

373. 查找和最小的 K 对数字

参考的这个博客&#xff1a; https://zhuanlan.zhihu.com/p/457239781 然后看这个代码我想到了另外一种方法&#xff0c;就是一步一步往里加元组 ( i , j ) (i,j) (i,j)&#xff0c;看代码就知道了&#xff0c;不过需要做一步去重&#xff0c;去重不能用 i n t [ ] int[] int…...

常用函数的使用错题汇总

目录 new/delete malloc/free1. 语言和类型2. 内存分配3. 内存释放4. 安全性和类型安全5. 其他特性总结 线程停止文件流 new/delete malloc/free malloc/free 和 new/delete 是 C/C 中用于动态内存管理的两种方式&#xff0c;它们有一些重要的区别。以下是这两种方式的比较&…...

uniapp手机端一些坑记录

关于 z-paging-x 组件&#xff0c;在ios上有时候通过弹窗去粗发它reload时会触发闪退&#xff0c;可能是弹框插入进去导致的DOM 元素已经被移除或者不可用&#xff0c;解决办法是加上他自带属性 :showRefresherWhenReload"true" 加上showRefresherWhe…...

2024学习之前端微信小程序开发教程,从入门到精通-含基础+实战+源码code

目录 一、简单介绍 二、课程需知 三、内容编排 1、小程序基础  起步式 目录结构 小程序框架 场景值  逻辑层 视图层 组件 视图容器 基础内容 表单组件 导航 媒体组件 Api 路由 界面 交互 网络 数据缓存 自定义组件 2、项目实战 …...

netconf 代码架构

NETCONF&#xff08;Network Configuration Protocol&#xff09;是一种基于 XML 的网络配置管理协议&#xff0c;主要用于在网络设备之间进行配置管理、状态监控和操作。它被设计为一种可扩展的协议&#xff0c;并且在自动化网络管理中扮演着重要角色。NETCONF 通过安全的通信…...

蒙特卡洛方法(Monte Carlo,MC)

目录 1 序言 2 Monte Carlo法计算积分 3 最优化计算Monte Carlo法 1 序言 蒙特卡罗方法(Monte Carlo)是由冯诺依曼和乌拉姆等人发明的&#xff0c;“蒙特卡罗”这个名字是出自摩纳哥的蒙特卡罗赌场&#xff0c;这个方法是一类基于概率的方法的统称。是一种应用随机数来进行…...

python学习笔记8-函数2

参数传递 传不可变对象 & 传可变对象 def func(b):print(id(a), a) #140737041872600 234print(id(b), b) #140737041872600 234a 234 func(a)def func(b):print(id(a), a) #1413554098560 [343]print(id(b), b) #1413554098560 [343]a [343] func(a)def func(b):b.appe…...

电商项目高级篇06-缓存

电商项目高级篇06-缓存 1、docker下启动redis2、项目整合redis3、redis改造三级分类业务 缓存 流程图&#xff1a; data cache.load(id);//从缓存加载数据 If(data null){ data db.load(id);//从数据库加载数据 cache.put(id,data);//保存到 cache 中 } return data;在我们…...

使用 `aircrack-ng`扫描、获取握手包

使用 aircrack-ng 工具集来扫描 5GHz WiFi 网络的过程与扫描 2.4GHz 网络类似&#xff0c;但需要注意一些特定的配置和命令。以下是一个详细的步骤指南&#xff0c;帮助你在 5GHz 频段上扫描 WiFi 网络并捕获握手包。 ### 前提条件 1. **操作系统**&#xff1a;通常在 Linux 系…...

基于大数据python 酒店数据分析可视化大屏系统(源码+LW+部署讲解+数据库+ppt)

&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 很对人不知道选题怎么选 不清楚自己适合做哪块内容 都可以免费来问我 避免后期給自己答辩找麻烦 增加难度&#xff08;部分学校只有一次答辩机会 没弄好就延迟…...

uniapp中父组件调用子组件方法

实现过程&#xff08;setup语法糖形式下&#xff09; 在子组件完成方法逻辑&#xff0c;并封装。在子组件中使用defineExpose暴露子组件的该方法。在父组件完成子组件ref的绑定。通过ref调用子组件暴露的方法。 子组件示例 <template> </template><script se…...

STL算法之set相关算法

STL一共提供了四种与set(集合)相关的算法&#xff0c;分别是并集(union)、交集(intersection)、差集(difference)、对称差集(symmetric difference)。 目录 set_union set_itersection set_difference set_symmetric_difference 所谓set&#xff0c;可细分为数学上定义的和…...

vscode中json文件的注释飘红

vscode的json文件 添加注释&#xff0c;提示json中不允许有注释&#xff0c;点编辑器最下面的json&#xff0c;如下图 然后选择如上图的json with comments就好了...

【微服务】SpringBoot 整合Redis Stack 构建本地向量数据库相似性查询

目录 一、前言 二、向量数据库介绍 2.1 什么是向量数据库 2.2 向量数据库特点 2.3 向量数据库使用场景 三、常用的向量数据库解决方案 3.1 Milvus 3.1.1 Milvus是什么 3.1.2 Milvus主要特点 3.2 Faiss 3.2.1 Faiss是什么 3.2.2 Faiss主要特点 3.3 Pinecone 3.3.1 …...

三:安装服务-controller node

一&#xff1a;工具、环境准备-controller node 二&#xff1a;OpenStack环境准备-controller node 三&#xff1a;安装服务-controller node 四&#xff1a;工具、环境准备-compute node 五&#xff1a;OpenStack环境准备-compute node 六&#xff1a;安装服务-compute node 七…...

自定义类型: 结构体、枚举 、联合

目录 结构体 结构体类型的声明 匿名结构体 结构的自引用 结构体变量的定义和初始化 结构体成员变量的访问 结构体内存对齐 结构体传参 位段 位段类型的声明 位段的内存分配 位段的跨平台问题 位段的应用 枚举 枚举类型的定义 枚举的优点 联合体(共用体) 联合…...

Bert+CRF的NER实战

CRF&#xff08;条件随机场-Conditional Random Field&#xff09; 原始本文&#xff1a;我在北京吃炸酱面 标注示例&#xff1a; 我O在O北B-PLA京I-PLA吃O炸B-FOOD酱I-FOOD面I-FOOD CRF&#xff1a; 目的&#xff1a;提出一些不可能出现的预测组合&#xff08;例如I-PLA不能…...

永久停用PostgreSQL 归档功能

文章目录 引言永久停用归档功能归档的优势归档的劣势开启归档的情况关闭归档的情况see also引言 PostgreSQL 是一个开源的关系型数据库系统,支持数据归档(WAL),可以实现数据备份、恢复和灾难恢复等功能。在使用 PostgreSQL 的过程中,如果 PostgreSQL 数据库开启了归档(a…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...