UniAppX 页面跳转与常见错误

原创已于 2025-11-13 08:35:42 修改 · 138 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#学习方法 #typescript

于 2025-11-13 08:32:06 首次发布

最近在学习 UniAppX + UTS 开发时，我做了一个简单的页面切换功能。思路其实很简单：
在首页放一个按钮，点击后跳转到第二个页面。

页面结构

项目结构如下：

pages/
├─ index/
│ └─ index.vue
└─ second/
└─ second.vue

首页（index.vue）


```css
<template>
  <view class="container">
    <text class="title">这是首页</text>
    <button @click="goNext">跳转到第二页</button>
    <text>{{ status }}</text>
  </view>
</template>

<script lang="uts">
export default {
data() { 
	return { 
		message: '', 
		version: '', 
		age: Number, 
		formessage: '', 
		count: 0 
		} 
	},
  methods: {
    goNext() {
      this.status = '跳转中...'
      uni.navigateTo({
        url: '/pages/second/second'
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
.title {
  font-size: 18px;
  margin-bottom: 10px;
}
</style>


第二页（second.vue）

```css
<template>
  <view class="container">
    <text>欢迎来到第二页！</text>
  </view>
</template>

<script lang="uts">
export default {}
</script>

在 HBuilder X 内置浏览器中调试时一切正常，点击按钮后能顺利跳转并显示“跳转中…”。

安卓端编译错误

但是当我打包运行到安卓设备时，却出现了下面这个错误：

class Number : Any, Serializable' does not have a companion object, so it cannot be used as an expression

这类错误通常是因为 UTS 类型声明不正确。在 UTS 中不能直接写 Number 作为类型定义，而应该用 number（小写）或者删除类型声明。
比如：


// 错误写法
age: Number

// 正确写法
age: 0
// 或者
age: null as number | null,

修改后重新编译，跳转功能在安卓设备上也能正常工作。

总结

这次的小问题提醒我：
UTS 与 TypeScript 相似，但语法上更接近 Kotlin/Swift，需要注意大小写和类型定义。

页面跳转本身很简单，但开发中最费时间的，往往是这些小细节的坑。记录下来，不仅方便以后查，也能帮后来者少踩几个雷。