微信小程序之路由
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();
}
})
},
})
微信小程序之路由的更多相关文章
- 微信小程序-导航 & 路由
微信小程序-导航 & 路由 页面跳转 页面路由 页面栈, 框架以栈的形式维护了当前的所有页面. https://developers.weixin.qq.com/miniprogram/dev ...
- 微信小程序开发--路由切换,页面重定向
这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1 wx.navigat ...
- 微信小程序の页面路由
微信小程序的页面路由由平台已栈的形式管理. 微信小程序的页面为什么会如此特殊呢,因为可视区域始终只有一个页面. 一.小程序页面的路由方式 小程序页面有6种路由方式:初始化.打开新页面.页面重定向.页面 ...
- 微信小程序中路由跳转
一.是什么 微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能 在微信小程序中,每个页面可以看成是一个pageMo ...
- 微信小程序 - Request | 路由跳转 | 本地存储
Request 官方文档 wx.request相当于发送ajax请求 参数 属性 类型 默认值 必填 说明 url string 是 开发者服务器接口地址 data string/object/A ...
- 微信小程序 API 路由
路由:由于页面的跳转: wx.switchTab() 跳转到 tabBar 页面,并关闭掉其他所有非 tabBar 页面: 参数:为对象, 对象的属性: url:需要跳转的 tabBar 的页面路径( ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- 微信小程序之页面路由
路由方式 简介 对于路由的触发方式以及页面生命周期函数如下: 路由方式 触发时机 路由前页面 路由后页面 初始化 小程序打开的第一个页面 onLoad, onSHow 打开新页面 调用 API w ...
- 一个C#程序员学习微信小程序路由的笔记
路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序.在WeChat中有五种跳转方式,分别是wx.switchTab.wx.reLaunch.wx.redirectTo.wx.naviga ...
随机推荐
- Python 开发者在迁移到 Go(lang) 时需要知道哪些事?
[编者按]本文最早由 Repustate 发布,主要介绍将代码迁移至 Go(lang) 时的注意事项.文章系国内 ITOM 管理平台 OneAPM 编译呈现,以下为正文. 这是一篇讲述将大块 Pyth ...
- AWS CSAA -- 04 AWS Object Storage and CDN - S3 Glacier and CloudFront(二)
015 Version Control - Lab 016 Cross Region Replication 017 Lifecycle Management Glacier - Lab 018 C ...
- cmd 命令总结
1.windows 系统定时关机 定时关机:shutdown -s -t 300 at 18:30 shutdown -s 取消定时:shutdown -a 注意:3 ...
- CentOS 7 环境下 GitLab安装部署以及账号初始化
1. 安装相关依赖 yum install curl policycoreutils openssh-server openssh-clients -y # 确保sshd启动(正常情况下, sshd是 ...
- leveldb源码分析--BloomFilter
bloomfilter是leveldb中的一大性能利器,所以为了文章的表现完整性这里新启这么一篇文章.leveldb中的bloomfilter的实现在bloom.cc中,是一个较为简单的实现,所以就不 ...
- Oracle EBS OPM convert dtl reservation
--convert_dtl_reservation --created by jenrry DECLARE l_reservation_rec mtl_reservations%ROWTYPE; l_ ...
- MariaDB实现主从配置及读写分离(一)
一.主从复制方案 1. 在两台CentOS7虚拟机上分别部署MariaDB, 主数据库服务器IP为192.168.17.235, 从服务器IP为192.168.17.238. 从服务器通过调取主服务 ...
- gh-ost和pt-osc性能对比
haughty_xiao 基于MySQL row格式的复制现在趋于主流,因此可以使用此格式的binlog来跟踪改变而不是触发器.与percona toolkit的pt-online-schem ...
- 【转】Spring学习---为什么要用spring,springMVC
[原文]https://www.toutiao.com/i6593182323095634445/ 首先,软件里有很多优秀的框架,有一种类型的框架,它的特点是建立在一个现有技术的基础上,提供和现有技术 ...
- mysql 大文件导入导出
导出:mysqldump -u用户名 -p密码 -hIP地址 数据库名 > /dump.sql示例:mysqldump -uroot -proot -h127.0.0.1 test > / ...