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


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 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
javascript与CSS复习(三)
Jun 29 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
JS实现图片切换效果
Nov 17 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 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
thinkphp实现图片上传功能分享
2014/03/04 PHP
php数组添加元素方法小结
2014/12/20 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
jquery trigger实现联动的方法
2016/02/29 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
Python识别处理照片中的条形码
2020/11/16 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
Python之Sklearn使用入门教程
2021/02/19 Python
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python