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


Posted in Javascript onDecember 18, 2017

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

在安卓中页面跳转传值都是通过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方式进行传递。前端小白总结,希望前端丰富的同学可以提供更多思路。

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

Javascript 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
DOM 事件流详解
Jan 20 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 #Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 #Javascript
javaScript中的空值和假值
Dec 18 #Javascript
浅谈Webpack自动化构建实践指南
Dec 18 #Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 #Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 #Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 #Javascript
You might like
论坛头像随机变换代码
2006/10/09 PHP
php 中文和编码判断代码
2010/05/16 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
如何快速上手Vuex
2017/02/14 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
详解python和matlab的优势与区别
2019/06/28 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Django 返回json数据的实现示例
2020/03/05 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
家长会演讲稿范文
2014/01/10 职场文书
机关出纳岗位职责
2014/04/03 职场文书
作息时间调整通知
2015/04/22 职场文书
比赛口号霸气押韵
2015/12/24 职场文书