uniapp使用uview框架问题记录 | 我的日常分享

uniapp使用uview框架问题记录

发表于2022-10-20更新于2022-10-20字数统计1.5k阅读时长18分

uniapp使用uview框架问题记录（持续更新）

环境：uview 版本2.x

1.在微信小程序运行时插槽不生效

问题描述：在使用input输入框的prefix插槽添加图标时，在小程序端不生效。

问题代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<!-- ... -->
			<view class="form">
				<u--input placeholder="请输入账号" border="bottom" v-model="username">
					<template slot="prefix">
						<text class="oisp-iconfont oisp-icon-username"
							style="font-size: 44rpx;color: #909399;margin-right: 16rpx"></text>
					</template>
				</u--input>
				<u--input placeholder="请输入密码" border="bottom" type="password" password v-model="password"
					prefixIcon="lock" prefixIconStyle="font-size: 44rpx;color: #909399;margin-right: 16rpx"></u--input>
			</view>
<!-- ... -->
</template>

H5中效果：账号输入框与密码输入框前的图标是正常显示的。

image-20221018184859248

微信小程序效果：账号输入框中的图标不见了，排查发现插槽没有起作用。

image-20221018185019459

解决方式：

将u--input修改成为u-input。

1
2
3
4
5
6
<u-input placeholder="请输入账号" border="bottom" v-model="username">
	<template slot="prefix">
		<text class="oisp-iconfont oisp-icon-username"
			style="font-size: 44rpx;color: #909399;margin-right: 16rpx"></text>
	</template>
</u-input>

排查过程：

过程1：怀疑自定义的图标未正确在小程序生效。（由于密码输入框使用的uview内置图标，而账号输入框使用的阿里图标库的自定义图标。）

查看微信开发者工具中的文件确定图标字体库是正确导入的。后面我怀疑是在线图标的问题，后面从阿里图标库下载到本地使用本地路径，问题还是一样。

image-20221018190150799

过程2：怀疑是插槽未生效，

通过调试器查询wxml发现似乎好像真的没有插槽出现。

image-20221018190449753

接着我格式化代码后，查看插槽定义跟使用。

插槽的使用相关代码（语法没有问题）：

image-20221018190707260

组件中插槽定义的相关代码（语法也没有问题）：

image-20221018190906306

接着我怀疑启动多插槽的配置出了问题。准备在js文件中添加下面配置：

1
2
3
4
5
Component({
    options:{
        multipleSlots:true   //启动多slot插槽
    }
})

于是我信心满满的打开js文件准备添加配置，如下图，发现这文件哪是人能看的，我尝试了在几个位置插入开启多插槽的配置，代码编译直接报错。

image-20221018191310537

也懒得看了这js到底啥逻辑了，我的目的不就是验证是不是开启多插槽的配置有问题吗？于是我把wxml修改成如下：就使用一个插槽。

1
2
3
<!-- <slot name="prefix"></slot>
<slot name="suffix"></slot> -->
<slot ></slot>

接着把登录页面中的代码改成不指定插槽：

image-20221018191639708

编译运行！

问题似乎还是如此。

image-20221018191722331

过程3：我自己写了一个u-test组件定义了两个插槽。

1
2
3
4
5
6
<!--uni_modules/uview-ui/components/u-test.wxml-->
<view>
  <text>uni_modules/uview-ui/components/u-test.wxml</text>
  <slot name="prefix"></slot>
  <slot name="suffix"></slot>
</view>
1
2
3
4
5
6
// uni_modules/uview-ui/components/u-test.js
Component({
  options:{
    multipleSlots:true 
  }
})

定义在页面中，

image-20221018192409040

结果显示插槽是正常的，

image-20221018192444456

现在没有什么思路了，准备投身百度，百度了一圈都没有找到类似的情况。

于是我再去看uview的文档，一开始似乎没发现有什么，后面看到了这两个小提示（ps：看到过很多遍了，无语…）

image-20221018192826281

image-20221018192905678

原来我一直被前面的提示给误导了，前面说使用u--input、u-input在vue页面均可。后面的插槽slot中又说非nvue环境要使用u-input插槽才生效。于是我带着疑惑把u--input改为了u-inpu后，重新编译运行，竟然好了，真无语，搞了这么久…

image-20221020172802470

2、UniApp中style标签中使用scoped后，导致在微信小程序端样式不生效

问题描述：

问题代码：

1
2
3
4
5
6
7
8
9
<style lang="scss" scoped>
	.u-border  {
		border-color: $u-primary !important;
	}

	.u-input {
		height: 65rpx;
	}
</style>

在H5端显示正常：

image-20221023221905013

H5端页面结构：

image-20221023222028224

在小程序端样式不生效：

image-20221023222048054

小程序端页面结构：

image-20221023222310249

原因分析：

观察小程序的页面结构可以发现，如果一个组件渲染后后包括子标签，会造成页面自己写的样式无效。生成在小程序中的css代码与实际上的不对应，如果手动把上图431行-436行代码改动一下可以发现页面正常了。

image-20221023222706133

解决方式：

  • 使用scoped穿透
1
2
css使用 >>> .test{ xxx }
scss、less使用 /deep/ .test{ xxx }

例如：css中使用>>>来标识scoped的data-v-xxxxxx所在位置，>>>可以写在任何位置，写在哪，data-v-xxxxxx就生成在哪里。

uniapp代码修正如下：

1
2
3
4
5
6
7
8
9
<style lang="scss" scoped>
  /deep/ .u-border  {
		border-color: $u-primary !important;
	}

	/deep/ .u-input {
		height: 65rpx;
	}
</style>

3、解决uniapp导入微信开发者工具，主包大于4M，无法预览到手机

image-20221102020315878

如图查看依赖分析发现光uview-ui就接近4M大小了。

经过排查发现，其中每个wxss中都包含了字体的样式文件，甚至uview-ui中的每个组件的样式文件都包含了这些内容，导致文件过大。如下图：

image-20221102020641519

去掉在uni.scss中对字体样式的导入，按需在页面中导入即可。

image-20221102020840327