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


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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 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
十天学会php之第八天
2006/10/09 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
Python 模块EasyGui详细介绍
2017/02/19 Python
python生成密码字典的方法
2018/07/06 Python
Python 中的lambda函数介绍
2018/10/10 Python
python实现任意位置文件分割的实例
2018/12/14 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
家长给老师的道歉信
2014/01/13 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
学风建设主题班会
2015/08/17 职场文书
学习心得体会
2019/06/20 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
python基础之爬虫入门
2021/05/10 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js