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

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

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

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

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 方法

<script>
    export default {
        methods: {
            jumpSecondPage() {
                console.log("jumpSecondPage");
                uni.navigateTo({
                    url: 'second-page',
                    fail: (error) => {
                        console.log(error);
                    }
                });
            }
        }
    }
</script>

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