微信小程序 页面跳转及数据传递详解


Posted in Javascript onMarch 14, 2017

微信小程序 页面跳转及数据传递详解

类似 Android 的 Intent 传值,微信小程序也一样可以传值:

例如:wxml 中写了一个函数跳转:

<view class="itemWeight" catchtap="jumpToOverMissionList">
 <view class="textStatus">已完成任务</view>
 <view class="containVertical textNum">{{finishedMissionCount}}</view>
</view>

在 js 代码中写:其中,url 是跳转的相对路径,?问号后面加的是参数,以 key-value 的方式,

这里传了个 value 为 2 的参数过去

//跳转到已结束任务列表页
jumpToOverMissionList:function(){
 wx.navigateTo({
  url:"mission/missionList/missionList?type=2"
 });
},

然后在 missionList.js 中的 OnLoad()方法得到值:option.type 就可以得到了

onLoad: function(option) {
  this.setData({
   type:option.type,
  });
  console.log(option.type);
}

页面跳转

今天尝试了下小程序点击页面跳转,有两种方式:navigator 组件跳转和添加点击事件跳转。

navigator 组件跳转

和 a 标签跳转差不多,给 navigator 添加要跳转到的 url 地址即可(这里需要注意下,我们在使用微信 web 开发者工具按 enter 自动补全时生成的组件有错,navigator 闭合标签的“/” 位置应该是在 navigator 前,而自动生成的是<navigator/>,导致编译报错,同样的还有 image 组件等)

<span style="font-size:14px;">
 <navigator url="../logs/logs">点击跳转到 logs 页面</navigator>
</span>

为组件绑定跳转事件

index.wxml 中为 image 绑定事件

<span style="font-size:14px;"> 
 <image src="{{item.imgsrc}}" bindtap="tz"></image>
</span>

index.js 文件中添加跳转方法:

<span style="font-size:14px;">tz: function(){
 wx.navigateTo({
  url: '../logs/logs',
  success: function(res){
  // success
  },
  fail: function() {
   // fail
  },
  complete: function() {
  // complete
  }
 })
}</span>

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

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
快速入门Vue
Dec 19 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
koa源码中promise的解读
Nov 13 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
JavaScript ES6中export、import与export default的用法和区别
Mar 14 #Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 #Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 #Javascript
vuejs响应用户事件(如点击事件)
Mar 14 #Javascript
微信小程序 在线支付功能的实现
Mar 14 #Javascript
JS和canvas实现俄罗斯方块
Mar 14 #Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 #Javascript
You might like
Sony CFR 320 修复改造
2020/03/14 无线电
自己做矿石收音机
2021/03/02 无线电
用PHP来写记数器(详细介绍)
2006/10/09 PHP
php调用mysql存储过程
2007/02/14 PHP
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
javascript的函数作用域
2014/11/12 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
Python编程把二叉树打印成多行代码
2018/01/04 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
python绘制封闭多边形教程
2020/02/18 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
自我鉴定四大框架
2014/01/17 职场文书
劳动实践课感言
2014/02/01 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
职工年度考核评语
2014/12/31 职场文书
个园导游词
2015/02/04 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
Java spring单点登录系统
2021/09/04 Java/Android