微信小程序实现页面跳转传值以及获取值的方法分析

转载 2018年04月17日 16:50:45

本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法。分享给大家供大家参考,具体如下:

在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值。

my.wxml

<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
 <view class="info_list">
  <block wx:for="{{userListInfo}}" >
   <view class="weui_cell" data-index="{{item.index}}" id="{{item.index}}"
    bindtap="userinfo_item">
    <view class="weui_cell_hd">
     <image src="{{item.icon}}"></image>
    </view>
    <view class="weui_cell_bd">
     <view class="weui_cell_bd_p"> {{item.text}} </view>
    </view>
    <view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}</view>
    <view class="with_arrow"></view>
   </view>
  </block>
 </view>
</view>

my.js

var app = getApp()
Page({
 data: {
  userInfo: {},
  userListInfo: [{
   icon: '../../images/iconfont-dingdan.png',
   text: '我的订单',
   isunread: true,
   unreadNum: 2,
   index:1
  }, {
   icon: '../../images/iconfont-kefu.png',
   text: '联系客服',
   index: 5
  }, {
   icon: '../../images/iconfont-help.png',
   text: '常见问题',
   index: 6
  }]
 },
 onLoad: function () {
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function (userInfo) {
   //更新数据
   that.setData({
    userInfo: userInfo
   })
  })
 },
 userinfo_item: function (e) {
  var index = e.target.dataset.index;
  console.log("----index----" + index)
  console.log('-----id-----'
   + e.currentTarget.id)
  var app = getApp();
  //设置全局的请求访问传递的参数
  app.requestId = e.currentTarget.id;
  app.requestIndex = index;
 }
})

微信小程序设置id的方法标识来传值

在要跳转的item处,设置一个id并给当前的id赋值上对应的key值,
如 id="{{item.index}}"
后我们在js的bindtap的响应事件中获取,并传递到下一个界面中;
获取到id传的值
通过e.currentTarget.id;获取设置的id值,并通过设置全局对象的方式来传递数值,
获取全局对象 var app=getApp(); //设置全局的请求访问传递的参数 app.requestDetailid=id;
在调试模式下:我们也可以在,wxml中查看到我们设置的每一个item的id值

通过使用data - xxxx 的方法标识来传值

通过使用data - xxxx 的方法标识来传值,xxxx可以自定义取名 比my.wxml中的data-index。
如何获取data-xxxx传递的值?
在js的bindtap的响应事件中:
通过数据解析一层层找到数据,var id=e.target.dataset.index(根据你的data-id的取名)
如js中的两个打印就是通过两种不同方式获得的id。

微信小程序如何跨页面获取值

依据上面的方式设置要传递的值,页面跳转后,我们就需要在下一个页面拿到传递的数据(这个数据在传递前,就已经被设置成全局变量)相当于给全局变量添加了新的key,value
在跳转后的js页面,接收传递过来的数据detail.js
同样通过全局额方式取值出来,(即和app.js中取某个变量的值是一样的)

var id=getApp().requestId;
var index=getApp().requestIndex;
console.log(id);
console.log(index);

通过链接传参:

wx.navigateTo({
 url: '/pages/account/feedback/feedback?test=feedback_test&name=jia',
 success: function(res) {},
 fail: function(res) {},
 complete: function(res) {},
})

点击页面跳转时通过?方式传参。在跳转后的页面JS中做如下接收:

onLoad: function (e) {
  var movieid = getApp().requestId;
  var movieIndex = getApp().requestIndex;
  console.log("-----feedback--movieid--" + movieid +" " + movieIndex);
  console.log("-----feedback--test--" + e.test);
  console.log("-----feedback--name--" + e.name);
 },

感觉比较好的方法还是通过链接方式进行参数传递,第一种有些像安卓中进行页面跳转,把一些传递的参数写到Application中,第二种是像通过bundle方式进行传递。前端小白总结,希望前端丰富的同学可以提供更多思路。

希望本文所述对大家微信小程序开发有所帮助。

原文链接:http://blog.csdn.net/jia635/article/details/73810079

使用目录内容建立菜单

目的:根据目录内容,建立一个菜单。菜单项为目录中的文件和子目录(以弹出方式显示)。解决方案:遍历子目录,建立一个文件路径数组。菜单项的ID是数组的索引。当用户单击某个菜单项时,从数组中读取文件路径并执...
  • jiangsheng
  • jiangsheng
  • 2001-08-02 22:58:00
  • 2072

微信小程序之页面跳转、传参

年前最后一天上班了,公司几个人在上班,没事做,还是来学习一下小程序吧。 本博客说一下页面跳转,页面跳转又分为三种:跳转新页面,当前页面跳转及tab跳转。 先来看看navigator相关属性: 直...
  • hedong_77
  • hedong_77
  • 2017-01-24 14:12:08
  • 5916

微信小程序开发之三级联动地址选择器

微信小程序开发-三级联动地址选择器开发教程
  • qq_38125123
  • qq_38125123
  • 2017-07-13 09:41:51
  • 7136

微信小程序把玩(十八)picker组件

picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器。测试时时间和日期点击无反应不知道是BUG还是啥!没法手机测试现在也不知道咋回事!!主要属性:普通...
  • u014360817
  • u014360817
  • 2016-09-26 11:12:02
  • 38111

微信小程序实战篇:商品属性联动选择(案例)

本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶。效果演示:代码示例1、commodity.xml ...
  • zhenghhgz
  • zhenghhgz
  • 2018-03-28 13:59:21
  • 202

微信小程序学习:使用picker封装省市区三级联动模板

目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用。目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来...
  • eadio
  • eadio
  • 2016-10-28 11:13:36
  • 24065

微信小程序通过api接口将json数据展现到小程序示例

这篇文章主要介绍了微信小程序通过api接口将json数据展现到小程序示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧实现知乎客户端的一个重要知识前提就是,要知道怎么通过...
  • qq_24531461
  • qq_24531461
  • 2018-04-17 16:31:19
  • 26

微信小程序--多个按钮选中的联动效果

场景:画图应用需选择画笔颜色,有4种颜色按钮可供选择,用户点击任意按钮进行颜色切换。 思路:通过curColorIndex变量保存当前选中的颜色下标,选中后添加额外的选中样式。 一,can...
  • rolan1993
  • rolan1993
  • 2017-10-21 11:15:06
  • 1283

微信小程序实用组件:省市区三级联动demo

http://www.wxapp-union.com/home.php?mod=space&uid=2&do=thread&view=me&from=space http://www.wxapp-u...
  • sinat_17775997
  • sinat_17775997
  • 2016-12-13 13:12:55
  • 5610

微信小程序------联动选择器picker

从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。 先来看看效果图:        ...
  • yelin042
  • yelin042
  • 2018-01-20 11:56:45
  • 264
收藏助手
不良信息举报
您举报文章:微信小程序实现页面跳转传值以及获取值的方法分析
举报原因:
原因补充:

(最多只允许输入30个字)