欢迎光临,了解微信小程序开发,就上易用通!

微信小程序路由详解

发布:2021-06-07 08:49浏览: 来源:网络 作者:tianshu

1. 路由方式

路由方式 触发时机 路由前页面 路由后页面
初始化 小程序打开的第一个页面   onLoad, onShow
打开新页面 调用 API wx.navigateTo 或使用组件 onHide onLoad, onShow
页面重定向 调用 API wx.redirectTo 或使用组件 onUnload onLoad, onShow
页面返回 调用 API wx.navigateBack 或使用组件或用户按左上角返回按钮 onUnload onShow
Tab 切换 调用 API wx.switchTab 或使用组件 或用户切换 Tab   各种情况请参考下表
重启动 调用 API wx.reLaunch 或使用组件 onUnload onLoad, onShow

用法如下:

<navigator url="/pages/detail/detail" open-type='navigate' style='border:1px solid red;' >进入非tab页</navigator>
<navigator url="/pages/index/index" open-type='switchTab' >进入首页(tab页)</navigator>
<navigator url="/pages/index/index" open-type='switchTab' >进入首页(tab页)</navigator>
<navigator open-type='navigateBack' >回退</navigator>
  • navigateTo, redirectTo 只能打开非 abBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch可以打开任意页面, 但是没有返回按钮,需要定义一个可以点击回退的按钮。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。

2. 路由传参

从列表页进入详情页时,需要传递列表被点击项目的 id 至详情页,方法:

  1. 在列表页通过data-id='{{item.id}}'给各个项目绑定一个 id ;
  2. 在详情页通过 onload 拿到 id;
列表页:
<view class="list" >
    <view class='box'  wx:for='{{list}}' wx:key='{{index}}' data-id='{{item.id}}' bindtap='goDetail'>
        <image src='{{item.img}}'></image>
        <view class='tip'>
            <text>{{item.title}}</text>
            <text class='price'>¥{{item.price}}</text>
        </view> 
    </view> 
</view>
// 进入详情页时 传递 id
goDetail (e) {
    console.log(e.currentTarget.dataset.id),
    wx.navigateTo({
        url: `/pages/detail/detail?id=${e.currentTarget.dataset.id}`,
    })
},
详情页:
// pages/detail/detail.js
Page({
 
    data: {
        detail: {},
        loading: true
    }, 
    
    onLoad: function (options) {
        this.loadDetail(options.id); // 拿到列表页传过来的 id
        console.log(options.id)
    },

    loadDetail (id) {
        wx.showLoading({
            title: '详情加载中...',
        })

        wx.request({
            url: 'https://10.0.1.109:3000/list',
            success: (res) => {
                console.log(res.data.cityList);
                let thisPlace = res.data.cityList.filter((val) => val.id == id)
                console.log(thisPlace)
                this.setData({ 
                    detail: thisPlace[0],
                    loading: false
                });
                console.log(this.data.detail)
                wx.hideLoading();
            }
        })
    },

})




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。