一 路由跳转
需求：如何获取当前页面的上一个页面
场景：用于判断返回哪一个页面的时候使用
const pages = getCurrentPages();
const Page = pages[pages.length - 1];//当前页
const prevPage = pages[pages.length - 2]; //上一个页面1. 封装返回上一个页面的方法
// 封装返回上一个页面的方法：
export function navigateBackByPage() {
// 判断上一个页面 然后返回上一个页面： 发布页或者订单页
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2]; //上一个页面
if (prevPage) {
wx.navigateBack();
}
}
// 调用方法
navigateBackByPage();
2. 如何返回上上个页面
wx.navigateBack({
delta: 2
})3. 返回上一页的时候把当前页的数据传递会上一个页面
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2]; //上一个页面
// 直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
orderId: orderId
});
wx.navigateBack();二 列表页传递id获取详情页数据
// 01 遍历列表页 获取每一项item的id 绑定到data属性中
<block wx:for={{list}}>
<view class="scroll-view-item" catchtap="toOrderDetail"
data-id="{{item.id}}">{{item.title}}</view>
</block >
// 02 列表页 通过事件和参数传递id
toOrderDetail(e) {
const id = e.currentTarget.dataset.id;
wx.navigateTo({
url:'order-detail/order-detail?id=' + id
})
}
// 03 详情页 在onload中间中拿到URL传递过来的参数id 请求详情页接口 拼接id参数
onLoad(option) {
const id = option.id;
const detailApi = 'http://192.168.1.142:8096/app/FindOrder/findOrderById?orderId=' + id
发起请求···
}三 动态设置页面顶部导航栏标题
说明
01 onload中不能设置，因为onload过程中页面并没有生成，所以不能操作UI，onShow渲染页面只是一瞬间，也不能展示UI，js中操作UI和设置展示UI，只能用onReady,onLoad和onShow用来处理数据请求，处理业务逻辑
02 （重点思路）在onLoad获取数据，传递到data；onReady使用data中的数据渲染导航// 01 数据初始化
data：{
navigationTitle：''
}
// 02 在onLoad中获取列表页js传递过来的参数：
// 场景一：列表页传递数据给详情页
// 场景一：直接请求接口获取数据，如果情面有多种状态，通过不同状态动态设置导航
onLoad(option) {
const title = option.title;
this.setData({
navigationTitle:title
})
}
// 03 需要在onReady生命周期中设置导航条：
onReady() {
wx.setNavigationBarTitle({
title:this.data.navigetionTitle
})
}四 跨页全局传递数据的两种方法
场景：实时数据传递
- 通过app.js中的全局变量globalData：{ }，当前页的数据赋值给全局变量，另一个页面实时获取全局变量的值
// 页面a
app.globalData.workTypeId= workTypeId;
// 页面b
const workTypeId= app.globalData.workTypeId场景：从持久化数据中获取数据
- 通过缓存来缓存数据 在任意页面获取
wx.setStorageSync('userInfoLogin', userInfoLogin); // 登陆后缓存用户userId
// 封装获取id的方法
export function getStorageUserId() {
const userInfoLogin = wx.getStorageSync('userInfoLogin');
return userInfoLogin.id;
}
// 调用
const userId getStorageUserId()持续更新中···