【小程序】实现页面跳转和数据传递方案

谁借莪１个温暖的怀抱￠ 2023-10-02 20:42 15阅读 0赞

#### 文章目录 ####

*   *  页面跳转和数据传递
     *   *  wx的API跳转
         *  navigator组件(了解)

### 页面跳转和数据传递 ###

**界面的跳转有两种方式：通过navigator组件 和 通过wx的API跳转**

> 这里我们先以wx的API作为讲解：

#### wx的API跳转 ####

![在这里插入图片描述][fc75b83b91564fda8a5ff95b9ed52536.png_pic_center]

**上面API中, 我们最常用的就是`wx.navigateTo`和`wx.navigateBack`**

**wx.navigateTo(Object object)**

> 保留当前页面，跳转到应用内的某个页面；
> 
> 但是不能跳到 tabbar 页面；

**参数属性**

**演示代码**

*  通过查询字符串可以传递参数

wx.navigateTo({
        
      // 跳转的同时传递一些参数
      url: "/pages/about/about?name=chenyq&age=18&height=1.88",
    })

*  在页面的onLoad生命周期可以获取到参数

onLoad(options) {
        
      console.log(options.name);
      console.log(options.age);
      console.log(options.height);
    }

**wx.navigateBack(Object object)**

> 关闭当前页面，返回上一页面或多级页面。

btnTap() {
        
      // 返回上一级页面
      wx.navigateBack()
      // 返回多级页面
      wx.navigateBack({
        
        delta: 2
      })
    }

**如何在界面跳转过程中我们需要相互传递一些数据，应该如何完成呢？**

> 刚刚我们演示过, 从首页跳转到详情页：可以使用URL中的query字段
> 
> 那在详情页点击返回按钮时, 想要将数据传递回首页该如何传递呢

*  有两种方式可以做到

**方式一**

![在这里插入图片描述][6555bb45bb1247df85399aa6bf5c780b.png_pic_center]

btnTap() {
        
      // 1.返回上一级
      wx.navigateBack()
    
      // 2.给上一级传递数据
      // 2.1获取到上一级页面的实例
      const pages = getCurrentPages()
      const page = pages[pages.length - 2]
      // 2.2在上一个页面提前定义好变量用于保存数据
      page.setData({
        
        message: "呵呵呵"
      })
    }

**上面早期数据的传递方式只能通过上述的方式来进行，在小程序基础库 2.7.3 开始支持events参数，也可以用于数据的传递**。

![在这里插入图片描述][f14f1c5010eb479dbd72a6b87ac0a1fe.png_pic_center]

*  在首页中通过event定义一个接收数据的回调函数

wx.navigateTo({
        
      // 跳转的同时传递一些参数
      url: "/pages/about/about?name=chenyq&age=18&height=1.88",
      events: {
        
        // 获取返回页面时传递过来的数据
        backEvent(data) {
        
          console.log(data);
        }
      }
    })

*  再详情页中回调首页events中定义的回调函数

btnTap() {
        
      // 返回上一级
      wx.navigateBack()
    
      // 1.拿到eventChannel
      const eventChannel = this.getOpenerEventChannel()
    
      // 2.通过eventChannel拿到回调函数, 并传回数据
      eventChannel.emit("backEvent", {
        name: "aaa", age: 110})
    },

#### navigator组件(了解) ####

> navigator组件主要就是用于界面的跳转的，甚至也可以跳转到其他小程序中：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">target</td> 
   <td align="left">string</td> 
   <td align="left">self</td> 
   <td align="left">否</td> 
   <td align="left">在哪个目标上发生跳转，默认当前小程序</td> 
  </tr> 
  <tr> 
   <td align="left">url</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当前小程序内的跳转链接</td> 
  </tr> 
  <tr> 
   <td align="left">open-type</td> 
   <td align="left">string</td> 
   <td align="left">navigate</td> 
   <td align="left">否</td> 
   <td align="left">跳转方式</td> 
  </tr> 
  <tr> 
   <td align="left">delta</td> 
   <td align="left">number</td> 
   <td align="left">1</td> 
   <td align="left">否</td> 
   <td align="left">当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数</td> 
  </tr> 
  <tr> 
   <td align="left">app-id</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当<code>target="miniProgram"</code>且<code>open-type="navigate"</code>时有效，要打开的小程序 appId</td> 
  </tr> 
  <tr> 
   <td align="left">path</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当<code>target="miniProgram"</code>且<code>open-type="navigate"</code>时有效，打开的页面路径，如果为空则打开首页</td> 
  </tr> 
  <tr> 
   <td align="left">extra-data</td> 
   <td align="left">object</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当<code>target="miniProgram"</code>且<code>open-type="navigate/navigateBack"</code>时有效，需要传递给目标小程序的数据，目标小程序可在 <code>App.onLaunch()</code>，<code>App.onShow()</code> 中获取到这份数据。</td> 
  </tr> 
  <tr> 
   <td align="left">version</td> 
   <td align="left">string</td> 
   <td align="left">release</td> 
   <td align="left">否</td> 
   <td align="left">当<code>target="miniProgram"</code>且<code>open-type="navigate"</code>时有效，要打开的小程序版本</td> 
  </tr> 
  <tr> 
   <td align="left">short-link</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当<code>target="miniProgram"</code>时有效，当传递该参数后，可以不传 app-id 和 path。链接可以通过【小程序菜单】-&gt;【复制链接】获取。</td> 
  </tr> 
  <tr> 
   <td align="left">hover-class</td> 
   <td align="left">string</td> 
   <td align="left">navigator-hover</td> 
   <td align="left">否</td> 
   <td align="left">指定点击时的样式类，当<code>hover-class="none"</code>时，没有点击态效果</td> 
  </tr> 
 </tbody> 
</table>

[fc75b83b91564fda8a5ff95b9ed52536.png_pic_center]: https://img-blog.csdnimg.cn/fc75b83b91564fda8a5ff95b9ed52536.png#pic_center
[6555bb45bb1247df85399aa6bf5c780b.png_pic_center]: https://img-blog.csdnimg.cn/6555bb45bb1247df85399aa6bf5c780b.png#pic_center
[f14f1c5010eb479dbd72a6b87ac0a1fe.png_pic_center]: https://img-blog.csdnimg.cn/f14f1c5010eb479dbd72a6b87ac0a1fe.png#pic_center