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


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 CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
vue 封装面包屑组件教程
Nov 16 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中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python实现最长公共子序列
2018/05/22 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
数控专业大学生的自我鉴定
2013/11/13 职场文书
《童年》教学反思
2014/02/18 职场文书
青年志愿者活动方案
2014/08/17 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
导游词之西递宏村
2019/12/10 职场文书
python 调用js的四种方式
2021/04/11 Python
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python