一 路由跳转
需求:怎样猎取当前页面的上一个页面
场景:用于推断返回哪个页面的时刻运用
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()
延续更新中···