uni-app开发日志:unicloud使用时遇到的问题解决汇总(不断补充)

插件安装后提示与原数据库表冲突(2024.7.18)

安装uni-admin后再安装uni-cms,在uni-admin中添加好菜单,结果提示该错误

在这里插入图片描述
回到hbuilder中uniCloud/database中找到冲突的部分
在这里插入图片描述
比较一下,选中老的删除
在这里插入图片描述

opendb-news-articles和uni-cms-articles重复了?

首次安装好uni-adminuni-starteruni-cms后发现存在opendb-news-articlesuni-cms-articles两个表。

  • opendb-news-articlesuni-starter自带使用的;
  • uni-cms-articlesuni-cmsuni-cms-article使用的,安装了uni-cms就可以删了uni-starter自带的opendb-news-articlesopendb-news-categoriesopendb-news-commentsopendb-news-favorite表;
  • uni-starter默认首页会用到opendb-news-articles,其他的可以全局搜索注释掉。

schema2code生成的表单控件发生日期类型无效的问题

在uniCloud的DB Schema中设置好每个字段后,可以用schema2code来生成表单,可你会发现日期字段总是提示类型不正确。

在这里插入图片描述

原因很简单,自动生成的代码中日期字段生成的表单控件是uni-datetime-picker,而如果默认值是用v-model=“xxx”,出错原因就是它~~改为:value="xxx"后就好了。

/*错误代码*/
<uni-forms-item name="birthday" label="出生日期">
  <uni-datetime-picker placeholder="请选择日期" return-type="date" v-model="formData.birthday"></uni-datetime-picker>
</uni-forms-item>

/*正确代码*/
<uni-forms-item name="birthday" label="出生日期">
  <uni-datetime-picker placeholder="请选择日期" return-type="date" :value="formData.birthday"></uni-datetime-picker>
</uni-forms-item>

对于 uni-datetime-picker 这样的组件,它的值是通过其他属性和事件进行绑定和更新的,所以用v-model会失败。但总不能每次生成完表单都去改一次代码吧。。。我目前还在找办法实现能在DB Schema中直接写好配置。

PS:另,如果要让日期控件选择日期而不是时间,那么需要加上type="date"的属性,如下:

"birthday": {
    
    
	"bsonType": "date",
	"title": "出生日期",
	"description": "出生日期",
	"defaultValue": "",
	"trim": "both",
	"label": "出生日期",
	"component": {
    
    
		"name": "uni-datetime-picker",
		"props": {
    
    
			"placeholder": "请选择日期",
			"type": "date"
		}
	}
}

(2024.08.03)解决办法找到:日期字段使用string类型,控件返回值也使用string类型

// 配置代码
"birthday": {
    
    
	"bsonType": "string",
	"title": "出生日期",
	"description": "出生日期",
	"defaultValue": "",
	"trim": "both",
	"label": "出生日期",
	"componentForEdit": {
    
    
		"name": "uni-datetime-picker",
		"props": {
    
    
			"placeholder": "请选择日期",
			"type": "date",
			"return-type": "string"
		}
	}
}

// 生成代码为
<uni-datetime-picker placeholder="出生日期" type="date" return-type="string" v-model="formData.birthday" trim="both"></uni-datetime-picker>

数据库记录为:
在这里插入图片描述
测试了一下,如果schema不改,仅仅将控件的返回格式改为日期型:return-type="date",提交后数据库中记录的值为:2024-07-31T16:00:00.000Z,难怪成天提示格式不对格式不对,原来真的是格式不对。

unicloud-db使用@load事件后data无反应

参考:《unicloud-db组件load事件回调预处理data数据》

unicloud-db组件有一个@load事件

属性 类型 描述
@load EventHandle 成功回调。联网返回结果后,若希望先修改下数据再渲染界面,则在本方法里对data进行修改

官网解释:
load事件在查询执行后、渲染前触发,一般用于查询数据的二次加工。比如查库结果不能直接渲染时,可以在load事件里先对data进行预处理。

// ...
<unicloud-db @load="handleLoad" />
// ...

handleLoad(data, ended, pagination) {
     
     
  // `data` 当前查询结果
  // `ended` 是否有更多数据
  // `pagination` 分页信息 HBuilderX 3.1.5+ 支持
}

数据库里的时间一般是时间戳,不能直接渲染。虽然可以在load事件中对时间格式化,但更简单的方式是使用组件,无需写js处理。

并无其他例子,但实际使用时就不知道如何把这个处理过的data还给unicloud-db了。
其实很简单,就用下面这个方法,把修改好的data还给控件的datalist就行。
this.$refs.udb.dataList = data;
比如

// html部分
<unicloud-db ... @load="handleLoad" />

// javascript部分
// ...
onqueryload(data) {
    
      
   test.processTest(data).then(res => {
    
      
        // ...                
        this.$refs.udb.dataList = res.result // 原本写的是data  = res.result  
    }).catch(e => {
    
      
        // ...  
        this.$refs.udb.dataList = []  // 原本写的是data  = []  
    })  
    this.exportExcelData = data  
}
...

schema中的errorMessage的错误

官网说明提供了无法实现的代码…

"minLength": 0,
"maxLength": 3,
"errorMessage": {
    
    
  "required": "{title}必填",
  "minLength": "{title}不能小于{minLength}个字符",
  "maxLength": "{title}不能大于{maxLength}个字符"
}

当你没有required:true的时候,errorMessage里并不会生成错误提示

  • 在实际使用时无法实现,{title}直接显示{title},而不会将其值显示出来,而且大小判断也乱了。

在这里插入图片描述

  • 这个可以看一下js_sdk/validator下生成的代码,并没有生成我们以为的大小错误提示。
"remark": {
    
    
  "rules": [
    {
    
    
      "format": "string"
    },
    {
    
    
      "minLength": 0,
      "maxLength": 3,
      "errorMessage": "{title}不能小于{minLength}个字符"
    }
  ],
  "title": "备注",
  "defaultValue": "",
  "label": "备注"
},
  • {title}的问题只能换成{label}来标识才能正常使用。
"minLength": 0,
"maxLength": 3,
"errorMessage": {
    
    
  "minLength": "{label}不能小于{minLength}个字符",
  "maxLength": "{label}不能大于{maxLength}个字符"
}

但是生成的代码中还是只剩了一句:{label}不能小于{minLength}个字符
在这里插入图片描述

  • 那大小怎么办呢?。。。要么就写死03,不要用{minLength}{maxLength},要么就用系统自带,去掉errorMessage
"minLength": 0,
"maxLength": 3

在这里插入图片描述
其实一般的错误只要写好规则就行,不需要写errorMessage,而且目前并不支持多行错误提示,所以就能不用就不用吧,参考官网2022年的回答,竟然2年过去了还没搞定。。。吃不消

【报Bug】schema2code生成的表单校验规则有bug

参考:
开发时遇到的其它问题参考:《uni-app开发日志[20220219]:汇总一些遇到的奇奇怪怪的开发问题(vue3版本为主)

猜你喜欢

转载自blog.csdn.net/snans/article/details/140518266