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


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的一句代码实现表格的简单筛选
Jul 26 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 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 MYSQL 数据备份类
2009/06/19 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
python的exec、eval使用分析
2017/12/11 Python
Django之form组件自动校验数据实现
2020/01/14 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
学生实习介绍信
2014/01/15 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
小学生作文评语集锦
2014/12/25 职场文书
烟台的海导游词
2015/02/02 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书