微信小程序开发学习笔记——4.7 api中navigate路由接口与组件的关系

 >>跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。 

一、跳转

1、方法一:组件

组件-导航-navigator

<navigator url="/pages/demo/demo?id=123" open-type="reLaunch">go demo page
</navigator>

如果跳转目标页面已经在app.json的tabBar中,则open-type不能设置为“redirect”,因为会跳转失败。而上一个实验已经将demo页面加入到tabBar中了,所以这里open-type要用其他值,如reLaunch或switchTab。

一般用reLaunch,open-type设置为reLaunch可以携带参数,如上图。但是设置成switchTab就会显示“空”。

2、方法二:API

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.reLaunch.html

2.1 API-路由-wx.reLaunch 

关闭所有页面,打开到应用内的某个页面。

index.wxml文件中添加 

<view 
bindtap="goDemo"
style="width: 100rpx;height: 100rpx;background: #EEEBAA;"><view><text></text></view><view></view>
</view>

在组件中先用bindTap绑定一个事件处理函数goDemo,然后在.js文件里写函数处理方法,即如何跳转到demo页面,如下:

 index.js中添加

  goDemo(){wx.reLaunch({url: '/pages/demo/demo'})},

2.2 API-路由-wx.navigateTo 

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

index.wxml文件不变。index.js文件中改为如下代码

goDemo(){wx.navigateTo({url: '/pages/api/api',})},

上面代码实现了从index页面跳转到api页面,如果要自动回到index页面,可以在api的.js文件的onload中添加定时器,2s后会自动跳转回上一个页面,代码如下

onLoad(options) {setTimeout(()=>{wx.navigateBack()},2000) /*定时器,两秒后返回上一个页面 */
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/587083.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

保持ssh断开后,程序不会停止执行

保持ssh断开后&#xff0c;程序不会停止执行 一、前言 笔者做远程部署搞了一阵子&#xff0c;快结项时发现一旦我关闭了ssh连接窗口&#xff0c;远程服务器会自动杀掉我在ssh连接状态下运行的程序。 这怎么行&#xff0c;岂不是想要它一直运行还得要一台电脑一直打开ssh连接咯…

一起来从Solidworks中导出URDF模型

这个博客是用来记录关于【从Solidworks中导出URDF模型】的学习历程&#xff1a; 相关课程链接见&#xff1a;如何从Solidworks导出URDF模型 • 古月 (guyuehome.com) 下面让我们一起开始吧&#xff01;&#xff01;&#xff01; 1. sw_urdf_exporter插件介绍 插件下载链接&…

HR岗位管理:岗位职级管理体系是什么?概念、知识及方法工具梳理

岗位是组织中最具体、最小的一个基本单位。组织一般都是因事设岗&#xff0c;因而岗位是组织要求个体完成一项或多项责任而赋予个体的权力的总和。岗位是与人相对应的&#xff0c;通常一个岗位只能由一个人担任。正是因为人与岗位相匹配&#xff0c;所以企业人力资源成本管控的…

前端学习<三>CSS进阶——0102-CSS布局样式

前言 css 进阶的主要内容如下。 1、css 非布局样式 html 元素的分类和特性 css 选择器 css 常见属性&#xff08;非布局样式&#xff09; 2、css 布局相关 css 布局属性和组合解析 常见布局方案 三栏布局案例 3、动画和效果 属于 css 中最出彩的内容。 多背景多投影特…

文献速递:基于SAM的医学图像分割---UN-SAM: 通用无需提示的广义细胞核图像分割

Title 题目 UN-SAM: Universal Prompt-Free Segmentation for Generalized Nuclei Images UN-SAM: 通用无需提示的广义细胞核图像分割 01 文献速递介绍 在数字病理学领域&#xff0c;对病理组织图像进行细胞核图像分割的任务是形态量化和肿瘤分级评估的基石。尽管这项任务…

如何在Ubuntu系统使用Nextcloud+Cpolar搭建可公网访问私人专属网盘

文章目录 1. 安装Docker2. 使用Docker拉取Nextcloud镜像3. 创建并启动Nextcloud容器4. 本地连接测试5. 公网远程访问本地Nextcloud容器5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛…

【CKA模拟题】一文教你用StorageClass轻松创建PV

题干 For this question, please set this context (In exam, diff cluster name) kubectl config use-context kubernetes-adminkubernetesYour task involves setting up storage components in a Kubernetes cluster. Follow these steps: Step 1: Create a Storage Class…

Flash选型确认

3.1 NOR Flash选型 容量&#xff1a;容量大小一般是我们首先要考虑的因素&#xff0c;Flash的大小一般用bit表示&#xff0c;容量范围涵盖512Kb~512Mb。例如型号GD25Q64C容量就为64Mb8MB。 供电电压&#xff1a;Nor Flash的供电电压一般分为四种&#xff1a;2.7V~3.6V&#x…

JAVAEE之JavaScript

1.JavaScript JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行. 脚本是什么&#xff1f; 脚本&#xff08;script&#xff09;是使用一种特定的描述性语言&#x…

蚁剑流量分析

蚁剑流量分析 在靶机上面上传一个一句话木马&#xff0c;并使用蚁剑连接&#xff0c;进行抓包, 一句话木马内容 <?php eval($_POST[1]); defalut编码器 在使用蚁剑连接的时候使用default编码器 连接之后进行的操作行为是查看当前目录(/var/www/html)下的文件&#xff0…

用动态规划求解多段图的最短路径问题

题目描述 对如下图所示的一个5段图&#xff0c;图上的数字代表该段路径的成本。写出求最短路径的计算过程&#xff0c;给出最短路径和距离。 思路分析 创建一个边权数组edgeWeigth&#xff0c;存储顶点和边的信息&#xff0c;用来表示图创建一个cost数组&#xff0c;索引in…

视觉Transformer和Swin Transformer

视觉Transformer概述 ViT的基本结构&#xff1a; ①输入图片首先被切分为固定尺寸的切片&#xff1b; ②对展平的切片进行线性映射&#xff08;通过矩阵乘法对维度进行变换&#xff09;&#xff1b; ③为了保留切片的位置信息&#xff0c;在切片送入Transformer编码器之前&…