关于uniapp在小程序中的一些差异

Monday1997
825 阅读4分钟

最近在uniapp项目开发中遇到一些问题，记录下一些注意点和思考过程

1、uniapp项目app预览

用其他逍遥模拟器啥的安卓版本太低会出现奇奇怪怪的问题，模拟器建议采用mumux

2、支付宝中小程序中键盘输入无法抬升

textarea中设置 enableNative="{{false}}" 即可

3、抖音小程序像素精度

问题

最近写样式时碰到个问题，如下，在‘结束’标签与前方色块与‘起租’标签与后方色块中，经过精确计算后依旧会产生一条缝隙，而这个缝隙在微信中见不到。

image-20230518163105902.png

image-20230518165521670.png 此处大致结构如下

深绿色为一个view，外部存在另一个view用于保证空间结构整齐，填补前方空隙的是一个伪元素，经过算出偏移量使得省绿色方块与浅绿色方块能够完美对接，下方为去除伪元素后的效果

image-20230518170751028.png

分析

经过控制台细究查看后发现二者区别

/*手写的代码*/
.text-l::after {
  right: -11.4rpx;
}
/*微信小程序端控制台*/
.text-l.data-v-eea0785f::after {
    right: -11.4rpx;
}
/*抖音小程序端控制台*/
.text-l::after {
    right: -5px;
}

再修改两次看看

/*手写的代码*/
.text-l::after {
    right: -11.6rpx;
}
/*微信小程序端控制台*/
.text-l.data-v-eea0785f::after {
    right: -11.6rpx;
}
/*抖音小程序端控制台*/
.text-l::after {
    right: -6px;
}   
​
​
/*手写的代码*/
.text-l::after {
    right: -11.8rpx;
}
/*微信小程序端控制台*/
.text-l.data-v-eea0785f::after {
    right: -11.8rpx;
}
/*抖音小程序端控制台*/
.text-l::after {
    right: -6px;
}

结论和解决方案

于是我们可以看见，uniapp在编译为微信小程序和抖音小程序的过程中css的精度不一致，微信小程序可以精确到0.1px,而抖音小程序只能到1px。

在这个示例中其他许多样式在写的时候是精确到0.1px的，所以众多其他元素宽度和边距等的误差导致了最终呈现效果时页面缺了一条缝隙。

后来做了以下方案

  • 将整个背景填充，然后将上述伪元素设为白色遮挡住空白部分；不行，同样有精度问题
  • 给后面较大的view添加伪元素，宽度为自身一半，left为0；可行，设置深绿色z-index将其层级抬起即可
  • 利用渐变，设置一半的背景色渐变，另一半为白色；可行，改动最小

最后采用了最后一种方案

代码如下：

.text-l-block {
  background-image: linear-gradient(to left, rgba(0, 200, 190, 0.1) 50%, white);
}
.text-r-block {
  background-image: linear-gradient(to right, rgba(0, 200, 190, 0.1) 50%, white);
}

image-20230518175042819.png

4、style中的page

首先直接设置元素小程序会告警，因此不应该直接用元素控制样式，以下探讨是对于导致结果的分析过程，探究导致这种现象的原因。

image-20230518154935465.png

问题

最近在uniapp中需要设置整个body的背景色，直接写如下代码，但发现在h5端与小程序端表现会有所不同

<style lang="scss" scoped>
page{
    background-color:red;
}
<stryle>

首先对于小程序来说，上述对于page设置不会生效，而下方对于view的操作是可以直接作用到页面上的。

对于h5来说两者都可以生效

<style lang="scss" scoped>
view{
    background-color:pink;
}
<stryle>

效果如下——左侧为小程序，右侧为h5

image-20230518153935803.png 额。。。虽然页面丑了点，但不影响讨论，以上会引出两个问题

  • 一个是对于小程序来说，改变page和view应该是同样的结果，为何对于page可以生效，而view却没生效
  • 另一个是为什么同样对page进行操作，于小程序可以生效，而对于h5却没有效果

分析

css语法中有写了以下注意点

注意：

  • 在 uni-app 中不能使用 * 选择器。

  • 微信小程序自定义组件中仅支持 class 选择器

  • page 相当于 body 节点，例如：

    <!-- 设置页面背景颜色，使用 scoped 会导致失效 -- > 
  page {
    background-color: #ccc;
}

因此可以推测是与scoped相关，而scoped则是通过hash实现样式隔离。

首先在小程序控制台查看页面结构

image-20230518154328700.png

可以看到，编译过后的page是没有添加data-...的类名，而几乎每个view都添加了hash，

再从看看生效的view的样式

image-20230518160029898.png 也就是说具备了以这个hash为类名的view才会生效

所以导致小程序样式直接写page不生效而view生效的原因是，在uniapp编译过程中page没有添加hash

再来看看h5这边

uniapp在编译为h5的过程中是将page的样式赋值给了body，并且为body添加了hash

image-20230518161353585.png

总结

由于添加上了scoped后，在这个style标签中的样式都添加了hash，但小程序中的page在编译过程中并没有对应添加hash，而其他元素均有添加，所以在写有scoped中的标签写上page无法生效。而对于h5来说page会被编译为body,且每个元素都添加了hash所以可以实现效果。

avatar
文章
阅读
粉丝