uni-app 微信小程序开发 常见问题
文章目录
1 样式相关
1.1 数据显示时, 显示多个空格
1.1.1 使用 代替空格
<text>起爆设备 ({{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 在加载是将图表隐藏, 数据加载完成后再进行显示