uni-app开发技巧备忘录

下拉框(picker)开发

原因

常规下下拉框开发的,后台返回的数据都是下面这种类型的,但是uni-app的数据是类似于这种的array: ['中国', '美国', '巴西', '日本'],所以使用起来不是很方便,谁TM要保存汉字到数据库,所以下面记录下项目中使用的公共方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
{
"id": 1,
"name": "男"
},
{
"id": 2,
"name": "女"
},
{
"id": 3,
"name": "未知"
}
]

下拉框技巧

下面的这段代码是一个公共下拉框的封装方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<template>
<view class="content">
<view class="uni-list">
<view class="uni-list-cell">
<picker @change="pickSelect($event,'sex',data.sexData,'sex')" :value="indexs.sex" :range="data.sexData" range-key="name">
<view class="uni-input">{{data.sexData[indexs.sex]?data.sexData[indexs.sex].name:'请选择'}}</view>
</picker>
<button type="primary" @tap="consoleData()">获取数据</button>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
indexs: {
sex: ''
},
data:{
sexData: [{
"id": 1,
"name": "男"
},
{
"id": 2,
"name": "女"
},
{
"id": 3,
"name": "未知"
}
],
sex:''
}
}
},
onLoad() {

},
methods: {
pickSelect(e, indexKey, optionArr, baseInfoKey) {
debugger;
this.indexs[indexKey] = e.target.value
this.data[baseInfoKey] = optionArr[e.target.value].id
},
consoleData(){
console.log(this.data);
}
}
}
</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.uni-list-cell-left{
width:150rpx;
text-align: left;
}
</style>

代码解析:

  1. indexs是用做一个页面中如果有多个picker的时候,可以在indexs中添加一个变量,当做下拉框索引变量使用,也就是选择的是第几个
  2. pickSelect方法中的四个变量说明:第一个变量是事件,这个就不说了;第二个是1中说的索引的变量名称;第三个是下拉框的数组数据;第四个是data变量中的变量名称
  3. pickSelect方法说明:当下拉框选择发生变化的时候,触发该方法,首先会通过事件获取它选择的是第几个,然后通过设置indexs中的索引值来实现picker中汉字的切换,最后设置data变量中的值,这个地方有个使用json对象的技巧,直接对象名称[变量]就能获取到json中的变量对应变量名的对象
  4. :value属性说明:是1中所说indexs中变量
  5. :range属性说明:是下拉框的数组数据
  6. :range-key属性说明:是下拉框数组数据中对应需要显示在下拉框中的汉字对应的变量名
  7. 添加一个button按钮,用于打印表单数据

后端返回数据处理

问题及解决方案

后端目前给前端扔数据的时候会出现如果字段在数据库中存储的空的时候,直接用JSON转完后,JSON串中就没有这个字段了,因此有两种解决方案:

  1. 如果是要查出来的数据转化了一遍字符串之后又扔到前台的(像我们这种内外网分离,外网查数据库得去内网执行以下的这种),可以JSON.toJSONString(custList,SerializerFeature.WRITE_MAP_NULL_FEATURES);,把null的字段转成””,数字转0等等,具体没试过,可以自己尝试下
  2. 第二种就是前端进行处理,处理的方法也很简单var objVal = this.data.objVal||’’;也就是当接收到为undefined或者null的时候,直接转成’’了