Uni-App 简单的界面跳转实现过程记录（uni.navigateTo）

梦里梦外; 2024-04-07 14:29 73阅读 0赞

**点滴积累，贵在坚持，感谢你的阅览！**

我一直是写java的，由于项目需要，需要用到 Uni-App，查阅了官网的一些资料，开始照着创建测试项目，写了一个简单的点击按钮跳转下一个界面的 Demo，记录一下！

1、创建项目后，将默认的界面改为了first-page，新建了一个second-page，一共两个界面，目录层级信息如下：

![d7284a64a4f041e9a8d093af615a8f65.png][]

2、first-page.vue 是原本默认就存在的，只不过改了个名字而已，所以不用在pages.json中重复注册，而跳转的目标界面 second.vue 没有在 pages.json 中注册，因此需要新注册一下，为啥要注册后面有讲到，如下：

"pages": [
    		{
    			"path": "pages/index/first-page",
    			"style": {
    				"navigationBarTitleText": "uni-app"
    			}
    		}, {
    			"path": "pages/index/second-page",
    			"style": {
    				"navigationBarTitleText": "uni-app"
    			}
    		}
    	]

3、添加一个按钮，定义一个点击事件，jumpSecondPage 是我自定义的函数名称，当按钮被点击时执行此函数

<template>
        <view class="content">
            <image class="logo" src="/static/logo.png"></image>
            <view class="text-area">
                <text class="title">{
       {title}}</text>
            </view>
            <view class="jump-next-area" @click="jumpSecondPage">
                <button class="jump-next">点击跳转</button>
            </view>
        </view>
    </template>

4、实现具体的跳转逻辑如下，这里唯一重点用到的就是 uni.navigateTo 方法

5、到这里就可以正常的点击跳转了，中间调试时遇到过点击无效的情况，因此我在跳转逻辑中加了两个控制台打印 console.log("jumpSecondPage") 和 console.log(error)，打印结果如下，直译过来就是找不到这个界面，查阅资料发现是新增界面都需要注册一下，否则找不到，注册之后重新运行，就可以正常点击跳转了

![e587219c6e4e4351918f114fe4017a22.png][]

[d7284a64a4f041e9a8d093af615a8f65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f1da861ee1f84b348ce414a16995fab8.png
[e587219c6e4e4351918f114fe4017a22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4d65f9c45ac1489bae1ad1b7800c5c43.png