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

news2024/11/15 16:17:40

前言

今天将智能体嵌入到我的项目中，当作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
				})
			},