微信小程序之页面跳转和参数传递的实现


Posted in Javascript onSeptember 29, 2017

微信小程序之页面跳转和参数传递的实现

前言:

在微信小程序里面的跳转其实和html里的超链接a差不多,我们实现跳转可以通过标签实现,也可以通过js实现,下面一一演示给大家看一下。

在展示demo前,我们需要先简单的建好项目文件夹做好准备。如下:

微信小程序之页面跳转和参数传递的实现

标签实现

 小程序里面有一个类似于a标签的navigator标签,用来做跳转处理。

index页面:

<navigator url="../navigator/navigator?title=我是navi">跳转到新的页面</navigator>
  <navigator url="../redirect/redirect?title=我是red" redirect>跳转到当前页面</navigator>

navigator页面和redirect页面:

<view> {{title}} </view>

navigator.js页面和redirect.js页面:

Page({
 data:{
  title:''
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
  this.setData({
    title:options.title
  })
 },
})

 而跳转也分为两种,一是跳转到新页面url后面的路径并可以携带参数,一种是在后面加上redirect,在当前页面打开,并携带参数。

注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。

tips:所跳转的页面一定不要忘了在app.json里配置哟,否则会报错。

2. js实现

 用js实现只需要写上跳转代码即可,其它如上。

wx.navigateTo({
 url: '../navigator/navigator?title=我是navi'
})
wx.redirectTo({
 url: '../redirect/redirect?title=我是red'
})

tips:仔细观察下面图片会发现,跳转到其他页面会带有返回按钮,在当前页面打开则不会有。

图片展示:

微信小程序之页面跳转和参数传递的实现

微信小程序之页面跳转和参数传递的实现

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js取得url地址参数实例
Feb 22 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
深入了解JavaScript 私有化
May 30 Javascript
微信小程序之选项卡的实现方法
Sep 29 #Javascript
vue-cli的eslint相关用法
Sep 29 #Javascript
JavaScript数组的5种迭代方法
Sep 29 #Javascript
微信小程序之GET请求的实例详解
Sep 29 #Javascript
js仿微信抢红包功能
Sep 25 #Javascript
给vue项目添加ESLint的详细步骤
Sep 29 #Javascript
微信小程序 POST请求的实例详解
Sep 29 #Javascript
You might like
php开发工具之vs2005图解
2008/01/12 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php eval函数一句话木马代码
2015/05/21 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
警示教育活动总结
2014/05/05 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
Python装饰器详细介绍
2022/03/25 Python
MySQL 数据 data 基本操作
2022/05/04 MySQL