微信小程序之路由

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 至详情页，方法：

在列表页通过data-id='{{item.id}}'给各个项目绑定一个 id ；
在详情页通过 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: 'http://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();

            }

        })

    },

})

巴特西

微信小程序之路由

1. 路由方式

2. 路由传参

列表页：

详情页:

最新文章

热门文章