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


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 相关文章推荐
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
vue 实现element-ui中的加载中状态
Nov 11 Javascript
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
php 删除cookie和浏览器重定向
2009/03/16 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
PHP 时间日期操作实战
2011/08/26 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
js中判断控件是否存在
2010/08/25 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
会计顶岗实习心得
2014/01/25 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
营销与策划专业求职信
2014/06/20 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书