uniapp中app真机模拟以及小程序编译后css样式异常失效问题原因及解决方案

news2024/11/18 7:48:17

前言

最近写使用uniapp写app,开发的时候写样式都是使用浏览器h5进行调试一切正常,但是最后进行手机真机调试的时候css样式出现了异常,本文归纳常见的问题

比如在h5页面显示正常:

在这里插入图片描述

但是在真机调试app的实现则显示:

H5正常但App异常的可能性

  1. 使用了不支持的选择器
    非H5端不支持*选择器;
  2. 组件和页面样式相互影响
    非H5端默认并未启用 scoped,如需要隔离组件样式可以在 style 标签增加 scoped 属性,H5端为了隔离页面间的样式默认启用了 scoped。我之类就是这个问题导致的。
  3. webview浏览器兼容性
  4. 原生组件层级问题 H5没有原生组件概念问题,非H5端有原生组件并引发了原生组件层级高于前端组件的概念,要遮挡video、map等原生组件,请使用cover-view组件。

H5正常但小程序异常的可能性

  1. 同上
  2. v-html在h5和app-vue均支持,但小程序不支持
  3. 小程序要求连接的网址都要配白名单

小程序正常但App异常的可能性

vue页面在App端的渲染引擎默认是系统webview(不是手机自带浏览器,是rom的webview),在较老的手机上,比如Android4.4、5.0或iOS8,一些新出的css语法是不支持的。注意这不意味着不能使用flex,Android4.4也支持flex,只是不要使用太新的css。可以找Android4.4手机或使用pc模拟器实际测试下,大多数国产Android模拟器都是4.4或5.0。

小程序或App正常,但H5异常的可能性

  1. 在 uni-app 2.4.7 以前,H5端不支持微信小程序自定义组件,即wxcomponets下的组件,此时可能产生兼容问题。从 2.4.7 起,H5也支持微信自定义组件,不再存在这这方面兼容问题。
  2. App端使用了App特有的API和功能,比如plus、Native.js、subNVue、原生插件等
  3. 使用了小程序专用的功能,比如微信卡券、小程序插件、微信小程序云开发。对于云开发,建议使用可跨端的uniCloud。

App正常,小程序、H5异常的可能性

代码中使用了App端特有的plus、Native.js、subNVue、原生插件等功能

完整的问题及解决办法可查看官方文档 传送门

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

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

相关文章

【PyTorch深度学习实践】02_梯度下降

文章目录梯度下降1.梯度下降算法实现代码2.随机梯度下降实现代码3.小批量随机梯度下降梯度下降 1.梯度下降算法 之前可以使用穷举的方法逐个测试找使损失函数最小的点,但当数据过多时,维度过高,会使穷举变得非常困难,因此需要优…

K8s 数据管理

目录前言一、Volume1.1 emptyDir1.1.1 基本概念1.1.2 应用案例1.2 hostPath1.2.1 基本概念1.2.2 应用案例1.3 外部 Storage Provider二、Persistent Volume2.1 基本概念2.1.1 PersistentVolume2.1.2 PersistentVolumeClaim2.2 NFS PersistentVolume前言 与 Docker 类似&#x…

QML教程(一)基础语法

目录 一、导入 二、对象声明 三、对象属性 1.声明对象属性 2.信号属性 3.方法属性 4.附加属性略 5.枚举属性 6.对象属性赋值 四、自定义对象 一、导入 模块导入 语法&#xff1a; import <ModuleIdentifier> [<Version.Number>] [as <Qualifier>…

面向对象设计原则概述

面向对象设计原则概述 软件的可维护性和可复用性 软件工程和建模大师Peter coad认为&#xff0c;一个好的系统设计与应该具备如下三个性质 可扩展性 灵活性 可插入性 软件的可维护性和可复用性 软件的复用和重用拥有众多优点&#xff0c;如可以提高软件的开发效率&#xf…

Educational Codeforces Round 92 (Rated for Div. 2) B. Array Walk

翻译&#xff1a; 给定一个数组&#x1d44e;1&#xff0c;&#x1d44e;2&#xff0c;…&#xff0c;&#x1d44e;&#x1d45b;&#xff0c;由&#x1d45b;个正整数组成。 最初&#xff0c;您位于索引1&#xff0c;分数等于&#x1d44e;1。你可以执行两种动作: 向右移动…

CDN

CDN——Content Delivery Network&#xff0c;内容分发网络。 具体来说&#xff0c;CDN就是采用更多的缓存服务器&#xff08;CDN边缘节点&#xff09;&#xff0c;布放在用户访问相对集中的地区或网络中。当用户访问网站时&#xff0c;利用全局负载技术&#xff0c;将用户的访…

【CSP】邻域均值

邻域均值 邻域均值 题意比较好理解&#xff0c;就是算一些数字。如果采用暴力方法的话&#xff0c;就是用一个边长为 2∗r12*r12∗r1 的正方形框框住大矩阵&#xff0c;然后遍历这个框&#xff0c;求出其平均值&#xff0c;然后移动正方形框&#xff0c;直到大矩阵内所有像…

【免费开放源码】审批类小程序项目实战(预约审批端)

第一节&#xff1a;什么构成了微信小程序、创建一个自己的小程序 第二节&#xff1a;微信开发者工具使用教程 第三节&#xff1a;深入了解并掌握小程序核心组件 第四节&#xff1a;初始化云函数和数据库 第五节&#xff1a;云数据库的增删改查 第六节&#xff1a;项目大纲以及制…

6.5 特殊用途语言特性

文章目录默认实参使用默认实参调用函数默认实参声明默认实参初始值内联函数和constexpr函数内联函数constexpr 函数把内联函数和constexpr函数声明在头文件内调试帮助assert预处理宏NDEBUG预处理变量默认实参 某些函数有这样一种形参,在函数的很多次调用中它们都被赋予一个相同…

电子游戏销售之缺失值检测与处理

电子游戏销售之缺失值检测与处理 文章目录电子游戏销售之缺失值检测与处理0、写在前面1、数据缺失值预处理1.1 表的形状1.2 原始数据每个特征缺失和非缺失的数目1.3 每个特征缺失的率1.4 处理后各特征缺失值的数目1.5 删除缺失值后的数据展示2、替换法处理缺失值2.1 替换法2.2 …

1.Springboot配置细节

一、参考资料 13-SpringBoot配置-项目外部配置加载顺序_哔哩哔哩_bilibili 二、配置 2.1 配置文件 注意变量后面是:&#xff0c;而不是等号 2.2 读取配置文件 2.2.1 Value 比如配置文件application.properities中定义了一个name&#xff0c;其值为abc。 代码里面只需按照如…

一、软件安装与配置

一、PyTorch环境软件安装与配置 1.安装anaconda参考 anaconda老版本下载方法&#xff08;如何查看anaconda与python版本对应关系&#xff09;及安装教程_breadth_的博客-CSDN博客_anaconda旧版本下载 2.在anconda下安装和激活pytorch环境 此步并没有下载pytorch 3.下载pyto…

云计算运营—03 KVM虚拟化技术方案介绍

KVM虚拟化技术方案介绍 1.背景介绍 KVM&#xff08;Kernel-based Virtual Machine&#xff09; 开源全虚拟化方案 支持体系结构 x86(32位,64位)、IA64、PowerPC、S390 依赖x86硬件支持&#xff1a;Intel VT-x/ AMD-V内核模块&#xff0c;使得linux内核成为hypervisor XEN架构 …

《B-树》

tips&#xff1a;B-树读成b树&#xff0c;并不是b减树 【一】基本搜索结构 种类数据格式时间复杂度顺序查找无要求O(N)二分查找有序O(log2N)二叉搜索树无要求O(N)二叉平衡树&#xff08;AVL和红黑树&#xff09;无要求&#xff0c;最后随机O(log2N)哈希无要求O(1)位图无要求O…

linux系统中SPI驱动框架的基本原理与实现

大家好&#xff0c;今天主要和大家聊一聊&#xff0c;如何使用linux系统中SPI驱动ICM-20608六轴传感器的操作。 目录 第一&#xff1a;linux系统下SPI驱动框架简介 第二&#xff1a;SPI设备驱动编写 第三&#xff1a;SPI设备和驱动匹配过程 第一&#xff1a;linux系统下SPI驱…

MySQL数据库高级面试题(1)

✅作者简介&#xff1a;热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏&#xff1a;Java面试题…

CSDN年度征文 | 你好,2023

祝大家新年快乐~&#x1f9e7;&#x1f9e7;&#x1f9e7;⭐过去的2022⭐2022已成过去&#xff0c;2023慢步向我们走来。回首2022&#xff0c;这一年不是平凡的一年。这一年&#xff0c;有苦也有乐。冬奥会的成功举办、香港回归25周年、二十大胜利召开、航天任务圆满成功等等都…

设计 | 分享5个好用的PPT模板网站

第一PPT 这个老牌的模板网站了&#xff0c;全站都是免费下载&#xff0c;还是不错的 但是素材质量嘛&#xff0c;免费所以不太高。 第一PPT下载https://www.1ppt.com/ 模板狗 这个是最近发现的一个网站&#xff0c;其中内容比较精美。 而且不用开会员也能单独购买&#x…

【Android】APT

引言&#xff1a; 安卓中APT又叫Annotation Processing Tool&#xff0c;即注解处理器。Java中注解分为编译时注解和运行时注解&#xff0c;编译时注解无法通过反射的方式进行获取和处理&#xff0c;所以我们可以利用APT处理编译时注解。比如常见的三方库ButterKnife、ARouter…

mysql删除重复记录并且只保留一条

准备的测试表结构及数据 插入的数据中A,B,E存在重复数据,C没有重复记录 CREATE TABLE tab ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(20) DEFAULT NULL, PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT13 DEFAULT CHARSETutf8; -- --------------------…