视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
在微信小程序中如何实现页面跳转传值
2020-11-27 19:36:20 责编:小采
文档


这篇文章主要介绍了微信小程序实现页面跳转传值以及获取值的方法,结合实例形式总结分析了微信小程序页面跳转及传值的常用操作技巧,需要的朋友可以参考下

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

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

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在JS中如何实现网页版计算器

使用JS如何实现小球抛物线轨迹运动

使用JavaScript如何实现二叉树遍历

在axios中如何实现cookie跨域

在JavaScript中如何实现弹性效果

下载本文
显示全文
专题