通过用户使用Pc端还是APP端来选择不同效果

已于 2022-07-09 11:16:21 修改
阅读量205 收藏
点赞数
文章标签： 大数据
于 2022-07-09 11:15:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a2939402202/article/details/125691076
版权

文章目录

搭建环境

搭建环境：uni-app

解决思路

解决思路：
1.首先寻找Pc端与APP端是否有通用的方法去显示预览图片
2.如果没有找到第一步的结果，通过判断用户使用哪一个端，来进行不同的页面展示
方法： 前端父子传值 来判断用户使用PC还是APP

操作步骤

vue2的操作步骤：
1.明确哪个是父组件，哪一个是子组件
在这里插入图片描述

2.父组件操作步骤

在这里插入图片描述
3…子组件操作
在这里插入图片描述

在子组件中通过v- if 与v-else 来进行不同视图的切换操作
在这里插入图片描述

这样APP端与PC端切换视图就完成了

任亚兵
关注
数据库导航项目静态页 pc+app端
01-20
综上所述，"数据库导航项目静态页 pc+app端"是一个综合性的前端开发项目，涉及到多方面的技术，包括前端设计、响应式布局、用户交互、跨平台适配、代码编辑、数据库集成、测试与部署以及性能优化等多个环节。...
uniapp+Html5端实现PC端适配
11-19
前言： 使用uniapp做的h5页面，在PC端显示时，发现由于upx单位计算基准值太大，导致页面排班布局错乱 思路： 刚开始发现使用px单位不会导致页面布局混乱，但这对刚开启的项目友好，对已经成型的项目修改成本太高，风险也大，而且px是固定单位，在移动端显然没upx好使； 后来百度好久，发现都没有解决办法，偶然间突发奇想，能不能利用iframe在页面载入前将宽度设置为375px(750upx)，来达到欺骗浏览器，欺骗uniapp，让浏览器以375px(这个值可以自己按需设置)基准值来计算upx=>px转换比，然后setimeout 300毫秒（延迟时间自己试验吧，不一定300ms效果最好）将i
uni-app手机端电脑端差别
mandarava的博客
01-30 1472
文章目录div标签的差别css的差别第三方库引用的差别 div标签的差别 table标签在手机端不显示可能是通病。 解决方法：使用flex布局。 如果已经写好了table表格，可以改成如下这样，会方便一些。 <view class="table"> <view class="thead"> <view class="tr"> <view c...
uniapp判断当前是pc端还是移动端
stars______的博客
07-12 3273
【代码】uniapp判断当前是pc端还是移动端。
判断用户用的是pc端还是移动端
weixin_48920798的博客
11-23 1667
如何判断用户使用的是pc端还是移动端 const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? "Mobile(移动端)" : "Desktop(pc端)"; console.log(detectDeviceType()) ...
判断浏览器是手机还是pc
zq405677456的博客
04-17 923
function isPhone(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = s...
uniapp判断当前是否为pc环境（已排除开发模拟器环境）
weixin_42790369的博客
06-29 1055
计算属性：noPC() {
uni-app中H5、PC端websocket使用
08-24
在uni-app框架中，我们不仅可以使用WebSocket在移动H5环境中，还可以扩展到桌面PC端，实现高效且实时的数据交互。 在uni-app中，WebSocket的使用主要包括以下几个关键步骤： 1. **初始化WebSocket连接**： 在uni-...
c#实现pc端和app端手动签字功能
07-06
通过以上步骤，我们可以构建一个完整的签字功能，既满足PC端用户通过鼠标或触控板签字的需求，也适应APP端用户通过触摸屏幕签字的场景。在实际项目中，还可以根据具体需求进行功能扩展，例如添加电子签名认证、手写...
原生仿微信即时通讯聊天安卓端IOS端APP源码开源 带PC客户端+文档说明.zip
09-03
该压缩包包含的是一个完整的即时通讯聊天应用的源代码，旨在模仿微信的功能和用户体验，适用于Android和iOS平台，并且还包括了PC客户端以及相关的文档说明。这个项目的核心目标是提供一个可自定义、可扩展的解决方案...
HTML实现PC和手机端自适应的APP下载官网源码.rar
08-16
HTML实现PC和手机端自适应的APP下载官网源码 随着智能手机的普及，越来越多的人使用移动设备来下载、安装和使用应用程序。因此，作为一名开发者或软件创业者，您需要为您的APP提供一个有吸引力且易于浏览的介绍网站...
uniapp判断h5运行环境（微信、pc、移动端）
博客简介
05-05 3382
【代码】uniapp判断h5运行环境（微信、pc、移动端）
uni-app判断各大平台的语法
wangchaohpu的博客
07-31 2297
uni-app是一款强大的前端框架，它除了pc端其他都可以实现，打包原生app。手机h5页面，微信小程序， 但是有一个问题就是本生的app和微信小程序是有一定的区别的，因为app有标题栏，返回键，而微信小程序自带了，那判断平台的语法就很重要了 1、uni-app 编译为小程序时均为生产环境，可用过 uni.getSystemInfoSync().platform 判断是在微信开发者工具里运行还是在手机里运行。 if(uni.getSystemInfoSync().platform === ‘de...
前端判断手机访问还是浏览器访问 chrome不支持
Allen专栏
07-07 1784
var browser = { versions : function() { var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息                                  trident : u.indexOf('Trident') > -1, //IE内核
uniapp开发小程序-如何判断小程序是在手机端还是pc端打开
最新发布
个人博客
11-22 3946
api获取平台值，如果值是。
uniapp宽屏开发PC端方案，及衍生问题解决
F2691898750的博客
03-06 8954
需要在uniapp的pages.json文件中配置正常电脑没有高于3840像素宽的，这个程度就足以； 在使用时，只要正常的按照1920/750 = 2.56的比例，在HBuliderX中进行比例配置，使用时进行px转化rpx即可。问题一、pc端字体过大问题二、字体大小固定：问题三、如何同时适配PC与移动端？解决思路：由于PC的根元素必须是因此要么pc和移动端都在page-meta的规则下使用v-if进行判断渲染，判断当前的设备是移动端或pc端，然后渲参考rem处
uniapp自动识别并切换到pad端、pc端【不断更新】【伸手党福利】
wwppp987的博客
11-21 3473
uniapp自动识别并切换到pad端、pc端【不断更新】【伸手党福利】leftwindow发起请求。detail添加监听。
uniapp 运行环境 平台 机型 判断
qq_38686150的博客
09-10 2183
运行环境 uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境(运行) 还是生产环境（发行） 一般用于连接测试服务器或者生产服务器的动态切换 本地 http:// localhhost:3000 线上 http://yangyay.clud 测试服务器: development 生产服务器: production let baseUrl = null; if(process.env.NODE_ENV =="development"){ // 本地服务器 baseU
如何判断页面是在移动端还是PC端打开
林啾啾的博客
10-13 881
如何判断页面是在移动端还是PC端
Vue项目中实现PC端分辨率适配与px转rem配置
"本文主要介绍如何在Vue项目中实现PC端的分辨率适配，通过使用阿里团队的可伸缩布局方案lib-flexible和px2rem工具来解决不同屏幕尺寸下的样式适配问题。" 在现代网页开发中，尤其是PC端应用，适配不同分辨率的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值