• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 微信小程序 页面跳转传递值几种方法详解

微信小程序 页面跳转传递值几种方法详解

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了亚马逊前台页面详解,页面置换算法详解,微信小程序页面跳转,微信小程序页面传值,微信小程序页面等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

微信小程序 页面跳转传递值

微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转。

1、js导航

 (1)、wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。


wx.navigateTo({ 
 url: 'test?id=1' 
}) 
</div>

获取传递的值:

//test.js 
Page({ 
 onLoad: function(option){ 
  console.log(option.id) 
 } 
}) 
</div>

 (2)、wx.redirectTo(OBJECT):关闭当前页面,跳转到应用内的某个页面。


wx.redirectTo({ 
 url: 'test?id=1' 
}) 
</div>

 (3)、wx.navigateBack(OBJECT):关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。

2、wxml导航

navigator:页面链接。


注:navigator-hover默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator/>的子节点背景色应为透明色

示例代码:

/** wxss **/ 
/** 修改默认的navigator点击态 **/ 
.navigator-hover { 
  color:blue; 
} 
/** 自定义其他点击态样式类 **/ 
.other-navigator-hover { 
  color:red; 
} 
</div>
<view class="btn-area"> 
 <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator> 
 <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator> 
</view> 
</div>

获取页面传递的值:

// redirect.js navigator.js 
Page({ 
 onLoad: function(options) { 
  this.setData({ 
   title: options.title 
  }) 
 } 
}) 
</div>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 微信小程序 页面跳转及数据传递详解
  • 微信小程序 详解页面跳转与返回并回传数据
  • 详解浏览器渲染页面过程
  • 微信小程序 页面跳转和数据传递实例详解
  • 微信小程序 页面之间传参实例详解
  • 微信小程序 页面跳转传递值几种方法详解

相关文章

  • 2017-05-11Nodejs 发送Post请求功能(发短信验证码例子)
  • 2017-05-11jquery实现轮播图效果
  • 2017-05-11JS实现根据密码长度显示安全条功能
  • 2017-05-11SyntaxHighlighter自动识别并加载脚本语言 原创
  • 2017-08-26《Javascript DOM编程艺术》读书笔记
  • 2017-05-11PHP:微信小程序 微信支付服务端集成实例详解及源码下载
  • 2017-05-11基于bootstrap实现收缩导航条
  • 2017-05-11js如何判断是否在iframe中及防止网页被别站用iframe嵌套
  • 2017-05-11深入理解在JS中通过四种设置事件处理程序的方法
  • 2017-05-11微信端开发--登录小程序步骤

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 完美实现js焦点轮播效果(一)
    • JS实现复选框的全选和批量删除功能
    • 原生js实现轮播图
    • ajax接收后台数据在html页面显示
    • 微信小程序遇到修改数据后页面不渲染的问题解决
    • 微信小程序 聊天室简单实现
    • 浅谈JavaScript正则表达式-非捕获性分组
    • 基于JQuery的购物车添加删除以及结算功能示例
    • JavaScript中值类型和引用类型的区别
    • 基于JavaScript实现类名的添加与移除

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有