当前位置: 首页 > 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等等,就相当于你得到这个变量时就给他定义了类型,但我不太用这个。文档说这是更安全访问的方式。

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 美团面试题:生成字符串的不同方式
  • 期权有哪些开户免50万元验资的方法?怎么操作?
  • 《C++位域:在复杂数据结构中的精准驾驭与风险规避》
  • uniapp微信小程序开发踩坑日记:Pinia持久化报错Cannot read property ‘localStorage‘ of undefined
  • map与set
  • 基于SpringBoot的医院挂号预约管理系统
  • vulnhub靶机:Holynix: v1
  • Capital许可管理最佳实践
  • PCI Express 体系结构导读摘录(六)
  • C语言:结构体
  • 今天一定要彻底卸载Windows Denfender!攻略给你了
  • 为什么kubectl top命令查看节点内存使用超过100%?
  • Wophp靶场寻找漏洞练习
  • 容器镜像同步工具image-migrator
  • 海量数据查找最大K个值:数据结构与算法的选择
  • 【划重点】MySQL技术内幕:InnoDB存储引擎
  • CSS3 变换
  • FineReport中如何实现自动滚屏效果
  • iOS编译提示和导航提示
  • Leetcode 27 Remove Element
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • PyCharm搭建GO开发环境(GO语言学习第1课)
  • Transformer-XL: Unleashing the Potential of Attention Models
  • vue的全局变量和全局拦截请求器
  • Yii源码解读-服务定位器(Service Locator)
  • 产品三维模型在线预览
  • 服务器之间,相同帐号,实现免密钥登录
  • 关于Java中分层中遇到的一些问题
  • 七牛云假注销小指南
  • 深度学习入门:10门免费线上课程推荐
  • 数组大概知多少
  • 无服务器化是企业 IT 架构的未来吗?
  • 一些css基础学习笔记
  • 数据库巡检项
  • ​secrets --- 生成管理密码的安全随机数​
  • # Maven错误Error executing Maven
  • # 详解 JS 中的事件循环、宏/微任务、Primise对象、定时器函数,以及其在工作中的应用和注意事项
  • #单片机(TB6600驱动42步进电机)
  • %3cscript放入php,跟bWAPP学WEB安全(PHP代码)--XSS跨站脚本攻击
  • (02)Cartographer源码无死角解析-(03) 新数据运行与地图保存、加载地图启动仅定位模式
  • (2)STL算法之元素计数
  • (java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~
  • (二)springcloud实战之config配置中心
  • (二)延时任务篇——通过redis的key监听,实现延迟任务实战
  • (强烈推荐)移动端音视频从零到上手(上)
  • (十八)devops持续集成开发——使用docker安装部署jenkins流水线服务
  • (五)activiti-modeler 编辑器初步优化
  • (一)kafka实战——kafka源码编译启动
  • (正则)提取页面里的img标签
  • (转) Android中ViewStub组件使用
  • (转)视频码率,帧率和分辨率的联系与区别
  • .cn根服务器被攻击之后
  • .NET Core 通过 Ef Core 操作 Mysql
  • .NetCore实践篇:分布式监控Zipkin持久化之殇
  • .NET版Word处理控件Aspose.words功能演示:在ASP.NET MVC中创建MS Word编辑器