uni-app 微信小程序开发 常见问题

uni-app 微信小程序开发 常见问题

1 样式相关

1.1 数据显示时, 显示多个空格

1.1.1 使用   代替空格

<text>起爆设备&nbsp;&nbsp;({{12}}台)</text>

1.1.2 使用css控制白空格

通过 CSS 属性 white-space 来控制文本如何处理空格和换行。white-space: pre; 可以确保连续空格不会被压缩。

<view style="white-space: pre;">{{tabItem[0]}}</view>

<script>
init() { 
	//	拼接分段器 标签名
	this.tabItems[0] = `${this.tabItems[0]}  (2发)`;
	this.tabItems[1] = `${this.tabItems[1]}  (1发)`;
	console.log(this.tabItems)
},
</script>

通过以上这些方式，你可以确保在 UniApp 的前端显示时，字符串中的空格不会被压缩或改变。如果在实际应用中仍然有问题，建议查看你的页面结构和 CSS 规则，确保没有其他样式影响了空格的显示。

1.2 通过ref 拿取组件的属性, 并使用

<view class="input_container">
	<view class="input_text">姓名:</view>
	<view class="input_css" @click="allClick('name')">
		<zxz-uni-data-select
			ref="nameSelector"
			placeholder=" 请输入姓名"
			:disabled="editFlag"
			v-model="filterList.name"
			filterable
			dataKey="text"
			dataValue="value"
			:localdata="nameList"
			@change="nameChange"
			@inputChange="inputNameChange"
			:emptyTips="nameNullFlag === 0 ? '' : '无数据'"
		></zxz-uni-data-select>
	</view>
</view>

<script>
allClick(e) {
	let that = this;

	if (this.$refs.nameSelector.showSelector && e !== 'name') {
		this.$refs.nameSelector.toggleSelector();
	}
	if (this.$refs.phoneSelector.showSelector && e != 'phone') {
		this.$refs.phoneSelector.toggleSelector();
	}
	if (this.$refs.idNumberSelector.showSelector && e != 'idNumber') {
		this.$refs.idNumberSelector.toggleSelector();
	}
	if (this.$refs.companySelector.showSelector && e != 'company') {
		this.$refs.companySelector.toggleSelector();
	}
	if (this.$refs.departmentSelector.showSelector && e != 'department') {
		this.$refs.departmentSelector.toggleSelector();
	}
}
</script>

这段代码是使用 <zxz-uni-data-select> 下拉框组件时遇到的bug 有多个下拉框组件时, 打开的下拉框组件有时无法自动关闭
解决方案是, 通过 this.$refs.nameSelector.showSelector 监听组件是否打开, 通过变量e 定位组件, 然后通过调用 this.$refs.nameSelector.toggleSelector(); 将组件手动关闭

2 数据处理

3 模板代码

3.1 表格样式模板代码

<view class="table">
	<view class="row">
		<view class="cell" style="flex-grow: 20; color: #999999">xxx</view>
		<view class="cell" style="flex-grow: 50; color: #999999">xxx</view>
		<view class="cell" style="flex-grow: 50; color: #999999">xxx</view>
	</view>
	<view class="row" v-for="(value, key, index) in toolData" :key="index">
		<view class="cell" style="flex-grow: 20">
			{{ index + 8 }}
		</view>
		<view class="cell" style="flex-grow: 50">
			<view style="width: 200rpx">{{ key }}</view>
		</view>
		<view class="cell" style="flex-grow: 50">
			<view style="width: 200rpx">{{ value }}</view>
		</view>
	</view>
	<view style="margin-bottom: 30rpx"></view>
</view>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.table {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-top: 30rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between; /* 两端对齐 */
		.cell {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex: 1;
			flex-direction: column;
			margin-top: 20rpx;
		}
	}
}
</style>

单元格的样式采用 flex-grow 来分配相对宽度，并使用嵌套的 <view> 为单元格内容设置具体宽度。

以保证数据的居中靠左对齐

3.2 路由相关模板代码

3.2.1 uni.navigateTo 跳转附带json数据

//  跳转时
goto() {
	uni.navigateTo({
		url: `../Detail?item=${encodeURIComponent(JSON.stringify(this.item))}`
	});
},	
//  接收时
onLoad(option) {
	this.item = JSON.parse(decodeURIComponent(option.item));
},

3.3 访问接口

import useunit from '@/api/useunit.js';

init(){
this.getEndUserListWithPage(data).then((res) => {
    // 为每个记录添加 'checked' 属性
    that.endUserList = res.result.records.map((item) => ({ ...item, checked: false }));
    // 设置总页数
    this.pages = res.result.pages;
}
});
}

/**
* 筛选接口调用
* @param {Object} data
*/
getEndUserListWithPage(data) {
   return new Promise((resolve, reject) => {
	   useunit.getEndUserListWithPage(data)
		   .then((res) => {
			   resolve(res);
		   })
		   .catch((error) => {
			   console.error('获取分页查询结果时发生错误', error);
			   reject([]);
		   });
   });
},

代码解析
this.getEndUserListWithPage(data): 这是一个异步方法，通常是发送请求到服务器，并获取分页的用户数据。
.then((res) => {...}): 当异步操作成功时执行的回调函数。参数 res 是服务器返回的响应结果。
res.result.records.map((item) => ({ ...item, checked: false })): 这个部分通过 map 方法遍历返回的记录，为每个记录添加一个 checked 属性，初始值为 false。
that.endUserList = ...: 将处理后的数据赋值给组件的 endUserList 属性。
this.pages = res.result.pages: 将分页数赋值给组件的 pages 属性。

异步封装：该方法使用 new Promise((resolve, reject) => {...}) 来封装异步操作。这个模式通常用于将回调风格的异步操作转变为 Promise 风格，以便在调用时可以使用 .then() 和 .catch() 来处理结果。
成功处理：在 useunit.getEndUserListWithPage(data) 成功返回结果时，调用 resolve(res)，将数据传递给后续的 Promise 处理链。
错误处理：如果异步操作失败，则调用reject([])，并在控制台输出错误信息。此处 reject([]) 是将一个空数组作为失败的结果，这样在调用方处理 catch 时，至少有一个默认的返回值。

4. 其他技巧总结

4.1 uni-datetime-picker日期选择器,清空数据时, 日期图标位置不正确

解决方案
点击重置按钮时, 直接重新加载整个页面

4.3 uni-app + uCharts 微信小程序开发, uCharts 加载数据闪烁, 竖屏图表变形问题

解决方案1
将数据作为一个整体赋给图表, 而不是一个一个加载,
解决方案2
利用v-if 或 v-show 在加载是将图表隐藏, 数据加载完成后再进行显示