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


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 动态加载 css 方法总结
Jul 11 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
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
php下intval()和(int)转换使用与区别
2008/07/18 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
js静态作用域的功能。
2006/12/25 Javascript
最短的IE判断代码
2011/03/13 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Python随手笔记之标准类型内建函数
2015/12/02 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
python实现字典嵌套列表取值
2019/12/16 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
自主招生自荐书
2013/11/29 职场文书
绩效专员岗位职责
2013/12/02 职场文书
体育教师自我鉴定
2014/02/12 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
服装发布会策划方案
2014/05/22 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
个人授权委托书样本
2014/09/13 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技