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这个语言,不太建议你将赋值和定义类型合并一条代码。

变量的定义

你可以

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.mzph.cn/pingmian/53516.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nohup与

在 Unix/Linux 系统中&#xff0c;nohup 命令和 & 符号都是用来在后台运行命令的工具&#xff0c;但它们有一些区别。 nohup nohup 命令允许你在终端关闭之后继续运行进程。通常情况下&#xff0c;当你退出终端会话时&#xff0c;正在运行的进程会被挂断&#xff08;SIGH…

【大数据】Hadoop里的“MySQL”——Hive,干货满满

【大数据】Hadoop里的“MySQL”——Hive&#xff0c;干货满满 文章脉络 Hive架构 HQL 表类型 创建表语法 分区 数据导入导出 函数 内置函数 UDF Java Python 在阅读本文前&#xff0c;请确保已经对Hadoop的三大组件&#xff08;HDFS、MapReduce、YARN&#xff09;有…

分布式协调服务--ZooKeeper

文章目录 ZooKeeperzk的由来zk解决了什么问题 ZK工作原理ZK数据模型zk功能1.命名服务2.状态同步3.配置中心4.集群管理 zk部署单机启动zk验证zk zk集群集群角色选举过程1.节点角色状态2.选举ID3.具体过程4.心跳机制5.ZAB协议 ZooKeeper 选举示例1.第一轮投票&#xff1a;2.节点收…

以下是分析执行计划中索引使用情况的方法:

一、查看是否使用索引 执行计划通常会明确显示是否使用了索引。如果没有使用索引&#xff0c;可能会看到类似“全表扫描”的描述。例如&#xff1a; “TABLE ACCESS FULL (table_name)”表示对表进行了全表扫描&#xff0c;没有使用索引。 如果使用了索引&#xff0c;会有…

《React Native 应用开发最佳实践》

⭐️React Native 应用开发最佳实践⭐️ 近年来&#xff0c;React Native 应用开发因其能够使用 JavaScript 构建原生移动应用的能力而大受欢迎。它提供了跨平台兼容性、更快的开发时间以及更易于维护的特性&#xff0c;成为了许多开发者的首选。然而&#xff0c;要确保 React…

Unity TextMeshPro 设置竖排

默认竖排是这样的 但是我们要的竖排效果并不是这样我们要是竖排连续的根据文本限制来进行换行 第一步我们先设置文本的旋转Z轴为90如下图 然后我们给文本加一个Tag <rotate270> 如下图 但是这个效果还是不是我们想要的效果我们可以使用TexeMeshPro提供的一个选项EnableR…

Python画笔案例-041 绘制正方形阶梯

1、绘制正方形阶梯 通过 python 的turtle 库绘制正方形阶梯&#xff0c;如下图&#xff1a; 2、实现代码 绘制正方形阶梯&#xff0c;以下为实现代码&#xff1a; """正方形阶梯.py """ import turtledef draw_square(length):for _ in range(6…

Flutter函数

在Dart中&#xff0c;函数为 一等公民&#xff0c;可以作为参数对象传递&#xff0c;也可以作为返回值返回。 函数定义 // 返回值 (可以不写返回值&#xff0c;但建议写)、函数名、参数列表 showMessage(String message) {//函数体print(message); }void showMessage(String m…

以太网--TCP/IP协议(一)

概述 以太网是局域网的一种&#xff0c;其他的比如还有令牌环、FDDI。和局域网对应的就是广域网&#xff0c;如Internet&#xff0c;城域网等。 从网络层次看&#xff0c;局域网协议主要偏重于低层&#xff08;业内一般把物理层、数据链路层归为低层&#xff09;。以太网协议…

【软考】知识产权与标准化

【软考】知识产权与标准化 一.保护范围与对象 1.保护范围与对象 法律法规名称保护对象及范围注意事项著作版权法著作权&#xff0c;文学&#xff0c;绘画&#xff0c;影视等作品1、不需要申请&#xff0c;作品完成即开始保护。2、绘画或摄影作品原件出售(赠予)著作权还归原作…

Qt工程使用MQTT-C库与mqtt服务器数据通信

实现mqtt订阅与发布话题&#xff0c;与mqtt服务器进行数据通信 编译环境&#xff1a;Qt5.15.2 vs2019 需要mqttc库&#xff1a;mqttc.lib, mqttc.dll&#xff08;根据MQTT-C源码编译出来的库&#xff0c;参考cmake编译MQTT-C源码-CSDN博客&#xff09; 一、Qt pro文件编写 …

数据结构C //线性表ADT结构及相关函数

数据结构&#xff08;C语言版&#xff09;严蔚敏 吴伟民 线性表ADT结构及相关函数 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块&#xff08;头文件&#xff0c;函数文件&#xff0c;主文件&#xff09; list.h头文件 /****…

LeetCode 2181.合并零之间的节点

题目描述 给你一个链表的头节点 head &#xff0c;该链表包含由 0 分隔开的一连串整数。链表的 开端 和 末尾 的节点都满足 Node.val 0 。 对于每两个相邻的 0 &#xff0c;请你将它们之间的所有节点合并成一个节点&#xff0c;其值是所有已合并节点的值之和。然后将所有 0 …

浏览器百科:网页存储篇-如何在Chrome中打开IndexedDB窗格(十一)

1.引言 在现代Web开发中&#xff0c;网页存储技术扮演着至关重要的角色。IndexedDB作为一种低级API&#xff0c;允许客户端存储大量结构化数据&#xff0c;并提供高性能的搜索能力。在上一篇文章中&#xff0c;我们深入探讨了IndexedDB的基础知识及其应用场景。为了更有效地调…

C语言 - 断言

C语言 断言 用途 单片机编程中的断言主要有以下几个用途&#xff1a; 错误检测&#xff1a;通过检查程序运行时的状态&#xff0c;确保满足预期条件。如果条件不满足&#xff0c;则可以立即发现并处理潜在的错误。 参数验证&#xff1a;在函数或方法的开始处使用断言来验证输…

安全产品概述

防火墙 防火墙的核心功能是过滤掉有害的流量&#xff0c;在专用网络和公共网络之间建立保护屏障。防火墙过滤通常基于一系列规则&#xff0c;如 IP 地址、域名、协议、端口号、关键字等&#xff0c;对入站和出站的流量进行过滤。这些规则也称为访问控制列表&#xff08;ACCESS…

HarmonyOS云端开发(三)

文章目录 一、操作数据表增删改查二、注册登录1.验证码注册2.验证码登录 一、操作数据表增删改查 更多方法可查看官方文档 // mine.ets // 云服务sdk import cloud from hw-agconnect/cloud // 数据库文件 可看前几篇文章 import {userInfo} from ../bd/userInfo import …

网络编程day04(UDP、Linux IO 模型)

目录 【1】UDP 1》通信流程 2》函数接口 1> recvfrom 2> sendto 3》代码展示 1> 服务器代码 2> 客户端代码 【2】Linux IO 模型 场景假设一 1》阻塞式IO&#xff1a;最常见、效率低、不耗费CPU 2》 非阻塞 IO&#xff1a;轮询、耗费CPU&#xff0c;可以处…

哈希表和时间复杂度

哈希表 &#xff08;Hash Table&#xff09;&#xff0c;它通过哈希函数将键值映射到特定的数组索引&#xff0c;从而实现高效的查找、插入和删除操作。其核心思想是将数据直接存储到具有固定大小的数组中&#xff0c;通过哈希函数计算出每个数据的存储位置。 主要特性 哈…

Spring Boot属性注入的多种方式!

Spring Boot的一个问题&#xff0c;证明你是不是真正的 "会用" Spring boot ?Spring Boot的一个问题&#xff0c;直接暴露你是不是真正使用Spring Boothttps://mp.weixin.qq.com/s?__bizMzkzMTY0Mjc0Ng&mid2247484040&idx1&sn64ad15d95e44c874cc890973…