文章目录

页面间跳转
- 页面间跳转 --- 导航
- 页面间传值
- 页面导航模式--redirect
- - 改进：使用redirect方式跳转
- 导航元素点击高亮
- - 如果设置不高亮？
  - 如何自定义高亮效果
  - 普通元素如何设置高亮
- 页面导航api
- - wx.navigateTo
  - 携带参数
  - wx.redirectTo
  - wx.navigateBack

页面间跳转

页面间跳转 — 导航

关键标签: navigator

首先注意2个地方:

1.在app.json中书写一个配置项，会自动生成该页面的page下面的2个文件

2.如果新建的page的json文件是空内容，改页面不会被渲染，显示空白，解决方式在page的json中加个{}，让它符合json的规范。

案例演示:

演示页面demo1跳转到demo2的页面，然后点击demo2的图片挑转到demo3的页面。

1.准备3个页面

app.json

{"pages":["pages/demo1/demo1","pages/demo2/demo2","pages/demo3/demo3"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}

2.书写demo1的页面，定义个navigator的标签

<!--pages/demo1/demo1.wxml-->
<navigator url="../demo2/demo2">go demo2 page</navigator>

3.书写demo2的页面

<!--pages/demo2/demo2.wxml-->
<text>pages/demo2/demo2.wxml</text>
<navigator url="../demo3/demo3"><image src="../../images/12.png"></image>
</navigator>

4.书写demo3的页面

<!--pages/demo3/demo3.wxml-->
<text>pages/demo3/demo3.wxml</text>

看下效果:

会跳转到:

点击图片:

页面间传值

页面间参数传递:

1.传递: 跳转链接上加问号参数

2.接受 pnload的第一个参数(对象)

案例说明:

在demo1中携带参数跳转到demo2页面，看下demo2是否可以接受到参数值。

<!--pages/demo1/demo1.wxml-->
<navigator url="../demo2/demo2">go demo2 page</navigator>
<navigator url="../demo2/demo2?name=小明&age=18">小明</navigator>
<navigator url="../demo2/demo2?name=小红">小红</navigator>
<!-- 页面间参数传递:1.传递: 跳转链接上加问号参数2.接受 pnload的第一个参数(对象)-->

demo2.js

// pages/demo2/demo2.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options);},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

测试:

看下打印信息:

显示：接收到了参数。

看下控制台信息:

也接受到了信息。同时页面也已经跳转到了demo2页面

页面导航模式–redirect

前面的导航栏模式，demo1页面跳转到demo2的时候会有个返回，点击返回又返回到了demo1页面。

如果有这个需求:不想返回到原来的页面，就得用到导航的redirect模式（redirect设置为true）。

原来的方式:

可以看到又返回到demo1页面了。

改进：使用redirect方式跳转

<!--pages/demo1/demo1.wxml--><navigator url="../demo2/demo2" redirect>跳转过去(不回来了)</navigator>

说明，redirect模式设置成功。

导航元素点击高亮

在点击导航时，会有个高亮效果：如下图。

如果设置不高亮？

通过这种方式:

 <navigator hover-class="none">点我点我1</navigator>

如何自定义高亮效果

我们可以自己定义hover-class的样式。

 <navigator hover-class="my-hover">点我点我</navigator>

.my-hover{color: red;
}

测试:

普通元素如何设置高亮

2种方式，放在导航标签，另一种给元素标签添加cusor:pointer

举例说明:

  <!-- cursor pointer 的方式是一个我们发现的一个小技巧，可以让任何袁术点击时高亮 --><image class="hover-demo" src="../../images/12.png"></image>

.hover-demo{cursor: pointer;
}

页面导航api

wx.navigateTo

跳转到指定的页面。

demo1.wxml

 <button type="primary" bindtap="tapHandler">跳转过去</button>

demo1.js

Page({tapHandler:function(){//当我们点击按钮，系统会自动执行这里的代码console.log(111)// wx.navigateTo({//   url: '../demo2/demo2',// })// 相当于加上redirect的navigator// wx.redirectTo({//   url: '../demo2/demo2',// })wx.navigateTo({url: '../demo2/demo2?id=123',})}
})

测试：点击跳转按钮

显示：跳转到了demo2的页面:

携带参数

还是刚才的例子，使用问号携带了id=123.看下控制台

显示参数携带过来了。

wx.redirectTo

导航redirect模式，不能返回原来的页面：

demo.js

Page({tapHandler:function(){//当我们点击按钮，系统会自动执行这里的代码console.log(111)// wx.navigateTo({//   url: '../demo2/demo2',// })// 相当于加上redirect的navigatorwx.redirectTo({url: '../demo2/demo2',})// wx.navigateTo({//   url: '../demo2/demo2?id=123',// })}
})

看下效果:

跳转到了demo2的页面:

wx.navigateBack

返回到前面的页面。

指定delta就是返回到指定页面（值为数字，1代表前面的第一个页面，2代表前面的第2个页面）

当delta过大（超出历史记录）。默认返回最开始的页面

举例说明:

在demo3.页面测试

demo3.wxml

<!--pages/demo3/demo3.wxml-->
<text>pages/demo3/demo3.wxml</text>
<button bindtap="backHandler">返回</button>

demo3.js

// pages/demo3/demo3.js
Page({backHandler:function(){//默认返回到上一页//  wx.navigateBack()//指定delta就是返回到指定页面//当delta过大（超出历史记录）。默认返回最开始的页面wx.navigateBack({delta: 2,})//wx.navigateTo//wx.navigateBack//wx.redirectTo//传递参数 通过问号  }
})

案例演示:

demo1:

  tapHandler:function(){//当我们点击按钮，系统会自动执行这里的代码console.log(111)wx.navigateTo({url: '../demo2/demo2',})

点击跳转过去，进入demo2

<!--pages/demo2/demo2.wxml-->
<text>pages/demo2/demo2.wxml</text>
<navigator url="../demo3/demo3"><image src="../../images/12.png"></image>
</navigator>

点击图片进入demo3

// pages/demo3/demo3.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},backHandler:function(){//默认返回到上一页//  wx.navigateBack()//指定delta就是返回到指定页面//当delta过大（超出历史记录）。默认返回最开始的页面wx.navigateBack({delta: 2,})}
})

点击返回，返回到demo1的页面:

完

微信小程序学习笔记(4) -- 页面间的跳转和传值相关推荐

微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
微信小程序学习6：页面生命周期回调函数
微信小程序学习6:页面生命周期回调函数文章目录微信小程序学习6:页面生命周期回调函数 1 生命周期图像 2 生命周期回调函数触发条件 onLoad(Object query) onShow() o ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
微信小程序开发笔记—设置页面密码
文章目录一.功能概述二.实现效果三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...
微信小程序-学习笔记6-组件
基础内容组件:icon.text.progress <view class="container"><progress percent="20" ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...

微信小程序学习笔记(4) -- 页面间的跳转和传值

文章目录

页面间跳转