【uniapp】H5+、APP模拟浏览器环境内部打开网页

前言

今天将智能体嵌入到我的项目中,当作app应用时,发现我使用的webview组件,无论H5怎么登录都是未登录,而APP却可以,于是进行了测试,发现以下几种情况:

方法<a>标签webview
APP
网页
说明可以用,但是APP效果不好,返回就提示退出整个APP,网页由于有回退标签所以还行网页使用webview不具备浏览器能力,不会存储cookie等缓存

通过方法事件window.href打开和a标签类似就不过比较,效果和a标签一样

解决办法

通过uniapp条件编译,区分H5和APP编译,分别进行处理,APP走webview,H5走a标签

在这里插入图片描述

demo

list数据

list:[// type=1 nav跳转|| 2网页跳转{id:'1',type:'1',url:'chat',name:'客服',text:'18小时客服在线',tips:'新版',images:'/static/kefu.png'},{id:'2',type:'1',url:'LeavingHands',name:'买定离手',text:'三张押一张,专押花姑娘,买定请离手',tips:'C币',images:'/static/guanjun.png'},{id:'3',type:'2',url:'webview',urlkeyword:'https://jt2bc6.smartapps.baidu.com/?_swebScene=3611000000000000',name:'实习日志',text:'AI自动生成周报、月报,只需要提供相应的专业和素材即可',tips:'可用',images:'/static/zhi.png'},''''''''''''
<uni-transition :show="true" mode="slide-right"><view class="tool_list"><view class="group_tool_wrap" v-for="item in list" :key="item._id"><!-- 通过type判断是否为网页 --><span v-if="item.type=='1'" @click="handleJump(item.url)"><view class="label_wrap" style="background-color: #6c6ceb" v-if="item.tips">{{item.tips}}</view><view class="label_wrap" v-else></view><view class="tool_wrap"><view class="tool_info"><view class="tool_name">{{item.name}}</view><view class="tool_hint">{{item.text}}</view></view><image :src="item.images" mode="widthFix" style="width: 80rpx;height: 80rpx;"></image></view></span><!-- type等于2是网页打开,条件编译 --><!-- #ifdef H5 --><span v-else @click="jiade()"><a :href="item.urlkeyword" style="text-decoration:none"><view class="label_wrap" style="background-color: #6c6ceb" v-if="item.tips">{{item.tips}}</view><view class="label_wrap" v-else></view><view class="tool_wrap"><view class="tool_info"><view class="tool_name">{{item.name}}</view><view class="tool_hint">{{item.text}}</view></view><image :src="item.images" mode="widthFix" style="width: 80rpx;height: 80rpx;"></image></view></a></span><!-- #endif --><!-- type等于2是网页打开,条件编译 --><!-- #ifdef APP-PLUS --><span v-else @click="jump_webview(item.urlkeyword)"><view class="label_wrap" style="background-color: #6c6ceb" v-if="item.tips">{{item.tips}}</view><view class="label_wrap" v-else></view><view class="tool_wrap"><view class="tool_info"><view class="tool_name">{{item.name}}</view><view class="tool_hint">{{item.text}}</view></view><image :src="item.images" mode="widthFix" style="width: 80rpx;height: 80rpx;"></image></view></span><!-- #endif --></view></view></uni-transition>

两个方法

handleJump(ee){uni.navigateTo({url:'/pages/'+ee+'/'+ee})},jump_webview(url){uni.showLoading({title:'环境加载中..'})setTimeout(()=>{uni.hideLoading()},2000);	uni.navigateTo({url:'/pages/webview/webview?url='+url})},

对比

改良后APP端,通过webview正常访问目标网站,登陆后可保持会话,返回层级正常,能够返回到上一页(图二可以点击返回 回到图一)
在这里插入图片描述

在这里插入图片描述

网页端能够正常使用
在这里插入图片描述

最后

作者在将智能体嵌入项目时发现,在H5端使用webview登录始终显示未登录状态,而在APP端却可以正常登录。测试后发现,APP端可以通过a标签和webview正常登录,但网页端使用webview时无法存储cookie等缓存。

为了解决这个问题,作者提出了使用uniapp的条件编译功能来区分H5和APP端的编译,分别采用不同的处理方式:

APP端使用webview。
H5端使用a标签。

文章提供了一个示例代码,展示了如何在列表数据中根据type属性决定是通过导航跳转还是网页跳转。代码中包含了条件编译的用法,以适应不同平台的需求。

文章通过图片展示了改良后的APP端通过webview正常访问目标网站并保持会话的效果,以及网页端能够正常使用的情况。

总结来说,本文讨论了在uniapp项目中处理不同平台打开网页的特殊需求,并通过条件编译提出了解决方案,同时提供了示例代码和使用效果的对比测试效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/6646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring高级篇(八)

本篇对Spring MVC 的执行流程做一个简单总结 MVC执行流程总结 当浏览器发送一个请求&#xff0c;例如http://localhost:8080/hello&#xff0c;请求到达服务器后&#xff0c;一般会进行如下操作&#xff1a; 1、首先会经过DispatcherServlet&#xff0c;默认映射路径为 /&…

GRU模块:nn.GRU层的输出state与output

在 GRU&#xff08;Gated Recurrent Unit&#xff09;中&#xff0c;output 和 state 都是由 GRU 层的循环计算产生的&#xff0c;它们之间有直接的关系。state 实际上是 output 中最后一个时间步的隐藏状态。 GRU 的基本公式 GRU 的核心计算包括更新门&#xff08;update gat…

用于密集预测任务的通道知识蒸馏——关键字:蒸馏

摘要 https://arxiv.org/pdf/2011.13256 知识蒸馏(KD)已被证明是训练紧凑密集预测模型的简单有效工具。通过从大型教师网络转移而来的额外监督来训练轻量级学生网络。大多数先前的针对密集预测任务的KD变体都在空间域中对学生网络和教师网络的激活图进行对齐,通常是通过在每…

【Linux】进程间通信 - 管道

文章目录 1. 进程间通信介绍1.1 进程间通信目的1.2 进程间通信发展1.3 进程间通信分类 2. 管道2.1 什么是管道2.2 匿名管道2.3 用 fork 来共享管道原理2.4 站在文件描述符角度 - 深入理解管道2.5 站在内核角度 - 管道本质2.6 管道读写规则2.7 管道特点 3. 命名管道3.1 匿名管道…

linux代码实操——信号的使用

信号的基本概念 信号是系统响应某个条件而产生的事件&#xff0c;进程接收到信号会执行相应的操作。 与信号有关的系统调用在“signal.h”头文件中有声明 常见信号的值&#xff0c;及对应的功能说明&#xff1a; 修改信号的响应方式 – signal() 我们来做个小实验: 在键盘上…

推荐书单|提升境界、思维能力

1、《别做正常的傻瓜》 豆瓣评分&#xff1a;8.1 通过揭示人们在日常生活中常见的非理性行为&#xff0c;引导读者认识并克服这些行为&#xff0c;从而做出更明智的决策。 2、《活法》 豆瓣评分&#xff1a;8.1 稻盛和夫分享其人生哲学和经营哲学的著作&#xff0c;强调了正确…

【C++】模板初阶:泛型编程的起点

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

富文本编辑器CKEditor4简单使用-08(段落首行缩进插件 + 处理粘贴 Microsoft Word 中的内容后保持原始内容格式(包括首行缩进))

富文本编辑器CKEditor4简单使用-08&#xff08;段落首行缩进插件 处理粘贴 Microsoft Word 中的内容后保持原始内容格式&#xff08;包括首行缩进&#xff09;&#xff09; 1. 缩进&#xff0c;特殊方式处理——修改原工具栏里的增加缩进量2 缩进&#xff0c;插件处理2.1 下载…

C语言-链表实现贪吃蛇控制台游戏

使用C语言和链表实现贪吃蛇游戏 一、引言 贪吃蛇游戏是一个经典的游戏&#xff0c;它的玩法简单而富有挑战性。在这个博客中&#xff0c;我将分享如何使用C语言和链表数据结构来自主实现贪吃蛇游戏。我会详细介绍游戏的设计思路、编码过程、遇到的问题及解决方案&#xff0c;…

翻译《The Old New Thing》 - Why does the CreateProcess function do autocorrection?

Why does the CreateProcess function do autocorrection? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20050623-03/?p35213 Raymond Chen 在 2005 年 6 月 23 日 为什么 CreateProcess 函数会进行自动更正&#xff1f; 译注&#xff…

13_Scala面向对象编程_伴生对象

文章目录 1.伴生对象1.1 scala的一个性质&#xff0c;scala文件中的类都是公共的&#xff1b;1.2 scala使用object关键字也可以声明对象&#xff1b; 3.关于伴生对象和类4.权限修饰符&#xff0c;scala仅有private;5.伴生对象可以访问伴生类中的私有属性&#xff1b;6.案例7.伴…

世界十大最具影响力人物颜廷利:真正的高人,靠谱的行为

对于真正的‘高人’&#xff0c; 在面对‘狗洞’时&#xff0c; 他们都比较理智&#xff0c; 从来都不趾高气扬&#xff0c; 因为他们晓得&#xff0c; 倘若说不能弯下腰&#xff0c; 并而直立着身子走路的话&#xff0c; 那么&#xff0c; 他们就不是纯粹的‘高人’&#xff0…

1850H-The Third Letter

题目链接&#xff1a;The Third Letter 本道题目就是带权并查集的模板题&#xff0c;但又好久没学忘了&#xff0c;再复习一遍。。。 路径压缩函数模板&#xff1a; int root(int x){if(pre[x]!x){int troot(pre[x]);d[x]d[pre[x]];pre[x]t;}return pre[x]; } 之后就模拟一…

c++ 红黑树学习及简单实现

1. 了解红黑树 1.1. 概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个节点增加一个存储位表示节点的颜色&#xff0c;可以是红色&#xff0c;或是黑色&#xff0c;通过对任何一条从根到叶子的路径上各个节点的着色方式进行限制&#xff0c;红黑树确保没有一条路…

初识webpack项目

新建一个空的工程 -> % mkdir webpack-project 为了方便追踪执行每一个命令&#xff0c;最终产生了哪些变更&#xff0c;将这个空工程初始化成git项目 -> % cd webpack-project/-> % git init Initialized empty Git repository in /Users/lixiang/frontworkspace/…

AI文章框架分析

大家在文章写作的时候结构难免会有点凌乱&#xff0c;但是自己可能无法发现问题所在&#xff0c;那么有没有一款工具可以帮你自动分析你写的文章框架存在的问题&#xff0c;然后并给你详细的分析报告呢&#xff1f;今天给大家介绍一下文件框架分析助手&#xff01; 使用说明 打…

如何配置X86应用程序启用大地址模式(将用户态虚拟内存从2GB扩充到3GB),以解决用户态虚拟内存不够用问题?(项目实战案例解析)

目录 1、概述 2、为什么不直接将程序做成64位的&#xff1f; 3、进程内存不足导致程序发生闪退的案例分析 3.1、问题说明 3.2、将Windbg附加到程序进程上进行动态调试 3.3、动态调试的Windbg感知到了中断&#xff0c;中断在DebugBreak函数调用上 3.4、malloc或new失败的…

IoTDB 入门教程 问题篇②——RPC远程连接IoTDB服务器失败

文章目录 一、前文二、发现问题三、分析问题四、检查6667端口是否监听所有IP五、检查ECS云服务器的安全组是否允许六、检查Linux防火墙是否允许 一、前文 IoTDB入门教程——导读 二、发现问题 使用本地IP127.0.0.1可以连接IoTDB服务器使用远程IPxx.xx.xx.xx却连接不到。提示你…

C++中的reverse_iterator迭代器结构设计

目录 reverse_iterator迭代器结构设计 reverse_iterator迭代器基本结构设计 operator*()函数 operator()函数 operator->()函数 operator!()函数 rbegin()函数 rend()函数 operator--()函数 operator()函数 测试代码 const_reverse_iterator迭代器设计 reverse…

【蓝桥2025备赛】容斥原理

容斥原理 背景&#xff1a;两个集合相交 高中的韦恩图&#xff0c;我们知道两个集合相交时我们可以通过简单的计算来认识相关的性质 集合相交的区域是 A ∩ B A\cap B A∩B ,集合的并集是 A ∪ B A\cup B A∪B ,那怎么用集合表示 A ∪ B A\cup B A∪B 我们可以看作是A集合…