uni-app script lang="uts" setup 中在android中无法使用defineProps

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app script lang=“uts” setup 中在android中无法使用defineProps
android是不支持 lang=“uts” setup 吗

Harmonyos Next教程
12 回复

可以贴一下代码和HBuilderX版本号


代码 Hbuildx版本号:4.12.2024041009-alpha 代码我贴下面了

代码 Hbuildx版本号:4.12.2024041009-alpha
<template>
<view class="ch_row" :style="getRowStyle()">
<slot></slot>
</view>
</template>

<script lang="uts" setup> const props = defineProps({ gutter: { type: [String, Number], default: () => 0 } }) const getRowStyle = () => { return new Map<string, string>([['padding', `${props.gutter}px 0 0 ${props.gutter}px`]]) } provide('row_gutter', props.gutter); </script> <style> .ch_row { display: flex; flex-direction: row; flex-wrap: wrap; } </style>

注意根据报错修改代码，有两处错误，都是缺少返回类型

<script lang="uts" setup> const props = defineProps({ gutter: { type: [String, Number], default: () : number => 0 } }) const getRowStyle = () : Map<string, string> => { return new Map<string, string>([['padding', `${props.gutter}px 0 0 ${props.gutter}px`]]) } provide('row_gutter', props.gutter); </script>

这个我改过不是这个的问题哦 还是会报错error: The integer literal does not conform to the expected type Unit‌

删除掉defineProps的代码就又正常了

回复 艾璞: 注意看我给的代码，有两处要调整，default和getRowStyle都要配置返回类型，我测试没有问题

回复 DCloud_UNI_FengXY: 谢谢是这个问题实在感谢了

必须要这么写吗？
const getRowStyle = () => {
return new Map<string, string>([[‘padding’, ${props.gutter}px 0 0 ${props.gutter}px]])
}
如果这样写不行吗，我看了确实报错，提示类型不匹配，很疑惑：
const getRowStyle = computed(()=>{

return {
padding: ${props.gutter}px 0 0 ${props.gutter}px
}
})

const getRowStyle = computed((): UTSJSONObject => {

return { padding: ${props.gutter}px 0 0 ${props.gutter}px } })

在 uni-app 中使用 script lang="uts" setup 语法糖时，确实可能会遇到一些特定平台（如 Android）上的兼容性问题。defineProps 是 Vue 3 的 Composition API 中用于定义组件接收的 props 的一个辅助函数，但在 uni-app 的某些特定环境或配置下，可能会存在不支持或表现不一致的情况。

虽然 defineProps 在标准的 Vue 3 项目中通常能够正常工作，但在 uni-app 中，尤其是在 Android 平台上，你可能需要采取一些替代方案来确保你的组件能够正确接收和使用 props。

以下是一个不使用 defineProps 而是通过 setup 函数的参数直接接收 props 的示例代码，这种方法在 uni-app 中通常更加稳定和兼容：

<template>
  <view>
    <text>{{ title }}</text>
  </view>
</template>

<script lang="uts" setup>
import { ref, onMounted } from 'vue';

// 直接通过 setup 函数的参数接收 props
const props = defineProps({
  title: String
});

// 或者使用解构的方式（注意：这种方式在 uni-app 中可能不兼容 defineProps，因此这里仅作为说明）
// const { title } = defineProps({
//   title: String
// });

// 使用 ref 定义本地状态（如果需要的话）
const someState = ref('default value');

// 生命周期钩子函数，例如在组件挂载后执行某些操作
onMounted(() => {
  console.log('Component mounted with title:', props.title);
});

// 注意：在模板中直接使用 props.title 即可访问传递进来的 prop 值
</script>

<style scoped>
/* 样式定义 */
</style>

重要提示：在 uni-app 中，更推荐的做法是直接通过 setup 函数的参数来接收 props，而不是使用 defineProps，因为后者在 uni-app 的特定环境下可能不被支持或表现异常。上面的代码示例展示了如何通过 setup 函数的参数直接接收并使用 props。

如果你确实需要在 uni-app 中使用类似 defineProps 的功能，并且遇到了兼容性问题，建议查阅最新的 uni-app 文档或社区，看看是否有相关的更新或工作区。同时，也可以考虑在 uni-app 的 GitHub 仓库中提交 issue，询问官方团队关于此功能的支持和计划。

回到顶部