【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数据

clike 复制代码
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'
					},
					'''
					'''
					'''
					'''
clike 复制代码
<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>

两个方法

clike 复制代码
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项目中处理不同平台打开网页的特殊需求,并通过条件编译提出了解决方案,同时提供了示例代码和使用效果的对比测试效果。

相关推荐
2501_915106322 小时前
iOS 抓包工具选择与配置指南 从零基础到高效调试的完整流程
android·ios·小程序·https·uni-app·iphone·webview
2c237c63 小时前
Uniapp中双弹窗为什么无法显示?
android·javascript·uni-app
芒果沙冰哟5 小时前
uniapp小程序实现地图多个标记点
javascript·vue.js·小程序·uni-app
摆烂式编程5 小时前
APP端定位实现(uniapp Vue3)(腾讯地图)
uni-app·app·vue3·定位·腾讯
傻傻有内涵的我5 小时前
【uni-ui】hbuilderx的uniapp 配置 -小程序左滑出现删除等功能
小程序·uni-app
Heyuan_Xie8 小时前
uni-app 选择国家区号
uni-app·uni-app插件·区号选择
2501_9160137417 小时前
iOS 加固工具使用经验与 App 安全交付流程的实战分享
android·ios·小程序·https·uni-app·iphone·webview
军军君0118 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
從南走到北19 小时前
JAVA青企码协会模式系统源码支持微信公众号+微信小程序+H5+APP
java·微信·微信小程序·小程序·uni-app·微信公众平台
htt232120 小时前
用uniapp开发鸿蒙应用(暂停更新-根据项目更新,现在项目未开始)
华为·uni-app·harmonyos