当前位置: 首页 > news >正文

uts+uniapp踩坑记录(vue3项目

杂记:
web-view方面

内嵌html使用web-view时,直接用

uni.postMessage({data: {action: 'message'    // 你要传的信息}});

示例上写的是用

document.addEventListener('UniAppJSBridgeReady', function() {  uni.postMessage({  data: {  action: 'postMessage'  }  });  
});


注意点:监听'UniAppJSBridgeReady, 有时候会失败,一直不触发,检查本地html文件放在hybrid文件夹里面,如:hybrid/html/js/xxx.js, hybrid/html/just.html

记得在html文件最上面引入uni.webview.1.5.5.js,版本要是1.5.4及以上的
最后接收的app内的onmessage函数,接收类型一定要对,如UniWebViewMessageEvent或者UniWebViewErrorEvent

const handlePostMessage = (event: UniWebViewMessageEvent) => {}

uts语法方面

1.有返回值的,一定要在函数定义时定义返回值类型!

2.循环注意,有时候你直接在箭头函数定义时用as断言它的类型,写循环可能报错(有时候页不报错),比如:

arr.map((item:string)=>{})

不行改成

arr.map((item)=>{

console.log(item as string )

})

顺便放几个常用循环和计算,监听方法的示例:


计算属性:
 

const showBtn = computed((): boolean => tabs.value == '1')

watch监听:

watch((): string => tabs.value as string,(newValue: string) => {if (newValue === '1') {const op = {title: '勾选',key: 'checkEd',width: '70rpx',} as xTableColumnscolumnsData.value.unshift(op)} else {if (columnsData.value[0]['key'] === 'checkEd') {columnsData.value.splice(0, 1)}}},{immediate: true,deep: true, // 开启深度监听},
)

filter循环: 

checkedValues.value = checkedValues.value.filter((itemTT: string): boolean => !iop.includes(itemTT))

some循环:

  const dect = iop.some((itemTT: string): boolean => checkedValues.value.includes(itemTT))

map循环:

let chooseFifter = chooseData.value.map((item): UTSJSONObject => {let op = { materialsTaskId: item['materialsTaskId'], approvalRecordId:            item['approvalRecordId'] }return op;})

forEach循环:

 dataNow.forEach((item: UTSJSONObject) => {item['metarils'] = [] as Array<UTSJSONObject>})datas?.forEach((itemTs: UTSJSONObject, index: number) => {if (itemTs['approvalTaskId'] === soure['approvalTaskId']) {found = trueremoveIndex = index}})


JSON的转换:

const ops = JSON.parse(uni.getStorageSync('loginUserInfo') as string)
let params = {}
params['userType'] = (ops as UTSJSONObject)['userType'] as string
注意点:这个语言和ts一样甚至比ts更要求类型(一错了就卡死),尤其是你用了组件库,要去看好它们组件库里面定义的各个传参类型。若不一致,可能不会报错,但你会得到一个空的数组或对象。要引入,如:
import { xTableColumns } from '@/uni_modules/tmx-ui/interface.uts'
import { FORM_RULE, FORM_SUBMIT_RESULT } from '@/uni_modules/tmx-ui/interface.uts'

基本上出问题,十有八九是你类型定义没对或者你声明的类型和编辑器推断的不一样,或者你的类型没引入。

关于ref

因为我是vue3,对一个组件用ref这种方式获取实例的话,你需要知道这个组件的类型,如:
 

​​​​​​​<z-paging-x ref="pagingX" :fixed="false" v-model="dataList" @query="queryList" show-back-to-top>

const pagingX = ref<ZPagingXComponentPublicInstance | null>(null)

类似的还有:
 

<x-form v-model="reqData" ref="formRef" :error-auto-page="false">const formRef = ref<XFormComponentPublicInstance | null>(null)

有时候你用UTSJSONObject代替它特有类型不会报错,但是你只能得到空数组或对象。

ref定义变量时要先定义类型,在括号接默认值

注意:

你用ref后,若定义了数组对象等,你的.value去访问时 还要去as它的类型:

 ;(pagingX.value as ZPagingXComponentPublicInstance).reload()const datas: Array<UTSJSONObject> = chooseData.value as Array<UTSJSONObject>(): string => tabs.value as string,

注意:uts这个语言,不太建议你将赋值和定义类型合并一条代码。

定义组件如何用ref

ComponentPublicInstance   这是自定义组件默认的格式。如:

<compent @onCheck="slideVerifySuccess" ref="verifyRef"></compent>// 引入
import compent from './commonPage/compent .uvue'// 赋值
const verifyRef = ref<ComponentPublicInstance | null>(null)

到这其实就可以用了,但是为了简便运行,建议你封装一个函数 

通过$callMethod(funName, funParams)这种方法去运行。

变量的定义

你可以

let op:string = (state.value as UTSJSONObject)['name'] as string;等价于:let op= (state.value as UTSJSONObject)['name'] as string;

注意点:有时候报错会很奇怪,你找不到时记得看看自己的号有没有加好。有时候可以加你定义前,防止出错:
 

 ;(dataList.value as Array<UTSJSONObject>)[index]['metarils'] = data['list']

any这个类型,不建议用,有很多奇奇怪怪的问题,你接收后端传来的数据时可以先用any,后面再自己拆分。

关于getXXX方法,

如:data.getArray('list') as Array<UTSJSONObject>

还有getString等等,就相当于你得到这个变量时就给他定义了类型,但我不太用这个。文档说这是更安全访问的方式。

先写道这,后面遇到了再长期更新...
 

http://www.lryc.cn/news/437177.html

相关文章:

  • 《深度学习》OpenCV 高阶 图像金字塔 用法解析及案例实现
  • dirty pages , swapiness 查看SWAP占用进程
  • Spring Boot项目更改项目名称
  • Hive SQL基础语法及查询实践
  • k8s service如何实现流量转发
  • 每日一练:K个一组翻转链表
  • 昨晚,OpenAI震撼发布o1大模型!我们正式迈入了下一个时代。
  • MySql8.x---开窗函数
  • 图文讲解HarmonyOS应用发布流程
  • 【专题】2024飞行汽车技术全景报告合集PDF分享(附原数据表)
  • 经典负载调制平衡放大器(LMBA)设计-从理论到ADS仿真
  • Web开发:基础Web开发的支持
  • 【LeetCode每日一题】——LCR 168.丑数
  • Day7 | Java框架 | SpringMVC
  • 【网络通信基础与实践第二讲】包括互联网概述、互联网发展的三个阶段、互联网的组成、计算机网络的体系结构
  • CentOS7下安装Ruby3.2.4的实施路径
  • Redis 实现原理或机制
  • 使用程序方式获取与处理MySQL表数据
  • 计算机网络(五) —— 自定义协议简单网络程序
  • 开源模型应用落地-qwen2-7b-instruct-LoRA微调-unsloth(让微调起飞)-单机单卡-V100(十七)
  • [数据集][目标检测]车油口挡板开关闭合检测数据集VOC+YOLO格式138张2类别
  • Delphi 的 RSA 库 LockBox
  • element UI学习使用(1)
  • 如何搞定日语翻译?试试这四款工具
  • 【STM32】独立看门狗(IWDG)原理详解及编程实践(上)
  • 前端框架大观:探索现代Web开发的基石
  • 16 训练自己语言模型
  • udp网络通信 socket
  • LG AI研究开源EXAONE 3.0:一个7.8B双语语言模型,擅长英语和韩语,在实际应用和复杂推理中表现出色
  • 【mysql】mysql之主从部署以及介绍