易语言资源网 - 做最全的易语言资源下载社区
【周六更新】【2021开源大赛(第六届)】全部参赛作品信息 精易论坛授权登录

【零基础学会uniapp】第五课:添加新的页面   [复制链接]

    2021-10-21 10:01:13
    uni-app
    易语言资源网
    236 次浏览

5、 添加新的页面 page,并且使用命令进行跳转

在HBuilderX中新建一个页面,新建页面的步骤:

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

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

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

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

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

uni.navigateTo

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

object参数说明:

参数类型必填默认值说明平台
urlString需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数
animationTypeStringpop-in窗口显示的动画效果,详见:窗口动画App
animationDurationNumber300窗口动画持续时间,单位为 msApp
eventsObject页面间通信接口,用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
示例:跳转到新页面并且传递参数,有两种方法:

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参数说明

参数类型必填默认值说明平台差异说明
deltaNumber1返回的页面数,如果 delta 大于现有页面数,则返回到首页。
animationTypeStringpop-out窗口关闭的动画效果,详见:窗口动画App
animationDurationNumber300窗口关闭动画的持续时间,单位为 msApp
// 注意:调用 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


本课引用链接:

https://uniapp.dcloud.io/api/router?id=navigateto

https://uniapp.dcloud.io/api/router?id=redirectto

https://uniapp.dcloud.io/api/router?id=relaunch

https://uniapp.dcloud.io/api/router?id=navigateback

https://uniapp.dcloud.io/api/preload-page

https://uniapp.dcloud.io/api/router?id=animation

https://uniapp.dcloud.io/collocation/pages?id=pages

@ 课件下载、更多教程、遇到问题或者进行交流,请到: https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群:326576256





点我下载 (已有 5 次下载)

[错误报告]   上一篇:数据库网络验证支持代理卡密等对接端未写 ...     下一篇:目录虚拟磁盘