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


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 相关文章推荐
jquery png 透明解决方案(推荐)
Aug 21 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
vuex入门最详细整理
Mar 04 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
js计数器代码
2006/11/04 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python 全文检索引擎详解
2017/04/25 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Python中and和or如何使用
2020/05/28 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
ktv筹备计划书
2014/05/03 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
关于车尾的标语大全
2015/08/11 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript