好看的uniapp页面设计 demo uniapp创建页面

转载

mob64ca141677f9 2024-08-01 09:30:54

文章标签 好看的uniapp页面设计 demo uni-app javascript 前端 App 文章分类 机器学习人工智能

【零基础学会uniapp】第五课：添加新的页面

5、添加新的页面 page，并且使用命令进行跳转
在HBuilderX中新建一个页面，新建页面的步骤：

可直接从项目上右键或者从某个文件夹上面右键，选择新建页面

输入项目名称和项目使用的模板

选择是否在pages.json中进行注册，注意：所有需要单独显示的页面，都必须在这里进行注册，否则无法显示。

所有用到的页面都需要在pages.json中进行注册

在程序中，如果有多个页面需要互相跳转，则可以使用下面的几个命令来实现：

uni.navigateTo 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

object参数说明：

参数	类型	必填	默认值	说明	平台
url	String	是		需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationType	String	否	pop-in	窗口显示的动画效果，详见：窗口动画	App
animationDuration	Number	否	300	窗口动画持续时间，单位为 ms	App
events	Object	否		页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

示例：跳转到新页面并且传递参数，有两种方法：

1、使用url方式进行传递。注意：url有长度限制，太长的字符串会传递失败，另外参数中出现空格等特殊字符时需要对参数进行编码（此处请参考网页中说明）

//在起始页面跳转到newpage.vue页面并传递参数
uni.navigateTo({
    url: "../index2/index2?id=1&name=张三"
});
<template>
    <view>
        我是一个新的页面index2，我收到的参数：
        <view>id:{{id}}</view>
        <view>name:{{name}}</view>
    </view>
</template>

<script>
    export default {
        onLoad( option ) {
            this.id = option.id;
            this.name = option.name;
        },
        data() {
            return {
                id: 0,
                name: ''
            }
        },
    }
</script>

2、使用event事件进行传递

<!-- index.vue -->
<script>
uni.navigateTo( {
    url: "../index3/index3",
    events: {
        page_index_receive( data ) {
            console.log( "index.vue 收到的data(由index3.vue发过来的): ", data );
        }
    },
    success( res ) {
       res.eventChannel.emit( 'page_index3_receive', {
            id: 2,
            name: "李四"
       } );
    }
})
</script>
<!-- index3.vue -->
<template>
    <view>
        我是一个新的页面 index3，我收到的参数：
        <view>id:{{id}}</view>
        <view>name:{{name}}</view>
    </view>
</template>

<script>
    export default {
        onLoad( option ) {
            const enventchannel = this.getOpenerEventChannel();
            enventchannel.emit( 'page_index_receive', {
                id: 1,
                name: '张三'
            } );

            enventchannel.on( 'page_index3_receive', ( data ) => {
                this.id = data.id;
                this.name = data.name;
            } )

        },
        data() {
            return {
                id: 0,
                name: ''
            }
        },
    }
</script>

注意：

页面跳转路径有层级限制，不能无限制跳转新页面
跳转到 tabBar 页面只能使用 switchTab 跳转
路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url，在App平台可以使用
plus.runtime.openURL或web-view组件；H5平台使用
window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。在hello
uni-app中有个组件ulink.vue已对多端进行封装，可参考。
APP-NVUE平台暂不支持以this.getOpenerEventChannel()方式获取eventChannel，请换用this.$scope.eventChannel来获取，具体方式请参考上述示例。

uni.navigateBack
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

OBJECT参数说明

参数	类型	必填	默认值	说明	平台差异说明
delta	Number	否	1	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
animationType	String	否	pop-out	窗口关闭的动画效果，详见：窗口动画	App
animationDuration	Number	否	300	窗口关闭动画的持续时间，单位为 ms	App

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});

uni.redirectTo
关闭当前页面，跳转到应用内的某个页面。

参数仅可使用：url,success,fail,complete

uni.reLaunch
关闭所有页面，打开到应用内的某个页面。

注意：如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

H5端调用uni.reLaunch之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。

uni.preloadPage 仅支持App-nvue、H5

本课引用链接：