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 )

})

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

计算属性：

javascript 复制代码

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

watch监听：

javascript 复制代码

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

filter循环：

javascript 复制代码

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

some循环：

javascript 复制代码

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

map循环：

javascript 复制代码

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

forEach循环：

javascript 复制代码

 dataNow.forEach((item: UTSJSONObject) => {
        item['metarils'] = [] as Array<UTSJSONObject>
      })


 datas?.forEach((itemTs: UTSJSONObject, index: number) => {
    if (itemTs['approvalTaskId'] === soure['approvalTaskId']) {
      found = true
      removeIndex = index
    }
  })

JSON的转换：

javascript 复制代码

const ops = JSON.parse(uni.getStorageSync('loginUserInfo') as string)
let params = {}
params['userType'] = (ops as UTSJSONObject)['userType'] as string

注意点：这个语言和ts一样甚至比ts更要求类型（一错了就卡死），尤其是你用了组件库，要去看好它们组件库里面定义的各个传参类型。若不一致，可能不会报错，但你会得到一个空的数组或对象。要引入，如：

javascript 复制代码

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这种方式获取实例的话，你需要知道这个组件的类型，如：

javascript 复制代码

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

javascript 复制代码

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

类似的还有：

javascript 复制代码

<x-form v-model="reqData" ref="formRef" :error-auto-page="false">


const formRef = ref<XFormComponentPublicInstance | null>(null)

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

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

注意：

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

javascript 复制代码

 ;(pagingX.value as ZPagingXComponentPublicInstance).reload()




const datas: Array<UTSJSONObject> = chooseData.value as Array<UTSJSONObject>




 (): string => tabs.value as string,

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

变量的定义

你可以

javascript 复制代码

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

等价于：

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

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

javascript 复制代码

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

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

关于getXXX方法，

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

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

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