微信小程序页面跳转url传参，对象、数据过长、特殊字符问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序页面跳转url传参，对象、数据过长、特殊字符问题相关的知识，希望对你有一定的参考价值。
参考技术A 1、传递参数为对象格式若参数为对象则需先使用 JSON.stringify()进行转换 , 接收后使用JSON.parse()转为对象.
但这样传参有一个问题，当对象数据长度过大时会报错，因为url传参时程序把过长的那段数据给截取掉了，导致数据转换回来时格式不对而报错。
2、传递参数中含有? = &等特殊字符
若传递参数中含有=,?,&等特殊字符，无法正常传递参数，则需要进行编码解码。
解决：
这时可以再添加另一个API：encodeURIComponent(obj) 和 decodeURIComponent(options.obj)，在encodeURIComponent之前要用JSON.stringify()先转换数据，decodeURIComponent之后再用JSON.parse()转换回来。
encodeURIComponent(JSON.stringify(obj)) 为跳转url时的转换方法。
JSON.parse(decodeURIComponent(options.obj)) 为接收参数页面的转换方法。
例如：
微信小程序页面传参实现列表中item点击跳转并传参到编辑页面
写在前面
常见的需求操作：在一些页面中，我们一般会对后台请求的数据列表中的每项item进行CRUD 操作，点击对应的itme，跳转到编辑页面，并显示相应的数据，这涉及到一个很常见的操作：页面传参。下面演练实现一下上面的场景需求：
发送数据端==> 列表页面：list.wxml:
在控件中，通过自定义属性data-xxx设置要发送的数据，其中data-是固定格式，xxx为你自定义的属性名，属性名必须全部小写，=后面是你要携带的数据值value。
list.js
在触发的事件中，通过e.currentTarget.dataset.xxx 捕获发送的数据值，在wx.navigateTo方法中，以&name(参数名) + name(值) 拼接发送过去；
点击button触发携带发送的数据
接收数据端==> 编辑页面：edit.wxml
接受的页面，用value='{{value}}'绑定接收的值
在edit.js中onLoad中加载获取传过来的值：edit.js
在onLoad中打印接收的数据：
核心代码
list.wxml:
<view class="meeting-list" >
<scroll-view scroll-y="true" style="height:auto;" bindscrolltoupper="upper" bindscrolltolower="lower"
bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view class="meeting-list-item" wx:for="{{meetingList}}" wx:key="id" >
<view class="item-title">
<text class="item-title-id">{{item.id}}</text>
<text class="item-title-name">{{item.name}}</text>
<text class="item-title-state">{{ item.status == 1 ? '未开始' : '已结束' }}</text>
<image class="item-img" src="../../assets/images/up_icon.png"></image>
</view>
<view class="content">
<view class="item-content">
<text class="item-content-title">名称</text>
<text class="item-content-detail">{{item.name}}</text>
</view>
<view class="item-content">
<text class="item-content-title">时间</text>
<text class="item-content-detail">{{item.time}}</text>
</view>
<view class="item-content">
<text class="item-content-title">开始时间</text>
<text class="item-content-detail">{{item.beginTime}}</text>
</view>
<view class="item-content">
<text class="item-content-title">结束时间</text>
<text class="item-content-detail">{{item.endTime}}</text>
</view>
<view class="item-content">
<text class="item-content-title">最大容纳人数</text>
<text class="item-content-detail">{{item.max}}</text>
</view>
<view class="item-content">
<text class="item-content-title">操作</text>
<view class="item-handle">
<view class="handle-delete" bindtap="deleteMeeting" data-id='{{item.id}}' data-name='{{item.name}}' data-index='{{index}}'>
删除
<image bindtap="deleteMeeting" class="handle-img" src="../../assets/images/delete_icon.png" />
</view>
<view class="handle-update" bindtap="goEdit"
data-id='{{item.id}}'
data-name='{{item.name}}'
data-time='{{item.time}}'
data-begintime='{{item.beginTime}}'
data-endtime='{{item.endTime}}'
data-max='{{item.max}}'>
编辑
<image class="handle-img" src="../../assets/images/ok_icon.png" style="margin-left:15rpx;" />
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
list.js:
// 触发并传参到修改页面
goEdit:function(e) {
let id = e.currentTarget.dataset.id;
let time = e.currentTarget.dataset.time;
let name = e.currentTarget.dataset.name;
let beginTime = e.currentTarget.dataset.begintime;
let endTime = e.currentTarget.dataset.endtime;
let max = e.currentTarget.dataset.max;
console.log("发送端:" + id);
console.log("发送端:" + name);
console.log("发送端: " + beginTime);
console.log("发送端:" + endTime);
console.log("发送端: " + max);
console.log("发送端: " + time);
wx.navigateTo({
url: '/pages/edit/edit?id='+id+'&time='+time+'&name='+name+'&beginTime='+beginTime+'&endTime='+endTime+'&max='+max
})
}
edit.wxml:
<!-- edit.wxml -->
<view class="form-container">
<form bindsubmit="formSubmit" class="formContent">
<view class='form-item form-id'>
<text>id</text>
<input name="id" type='text' value='{{id}}' disabled="true" placeholder-style='font-size:28rpx;' style="color:#AFAFAF"></input>
</view>
<view class="form-item">
<text>名称</text>
<input name="name" type='text' value="{{name}}" placeholder-style='font-size:28rpx;' placeholder='请输入名称'></input>
</view>
<view class='form-item'>
<view><text class="require">*</text>开始时间</view>
<picker class="picker-timer" mode="time" value="{{beginTime}}" start="09:00" end="10:00" bindchange="beginTimeChange">
<view class="picker" name="beginTime" bindtap="bindTimeChange">
{{beginTime}}
<image class="picker-icon" src="../../assets/images/down_icon.png"></image>
</view>
</picker>
</view>
<view class='form-item'>
<view>结束时间</view>
<picker class="picker-timer" mode="time" value="{{endTime}}" start="10:01" end="11:01" bindchange="endTimeChange">
<view class="picker" name="endTime" bindtap="bindTimeChange">
{{endTime}}
<image class="picker-icon" src="../../assets/images/down_icon.png"></image>
</view>
</picker>
</view>
<view class='form-item'>
<text>最大容纳人数</text>
<input name="max" type='number' value="{{max}}" placeholder-style='font-size:28rpx;' placeholder='请输入最大容纳人数'></input>
</view>
<view class='form-item form-admin'>
<text>管理员</text>
<input name="admin" type='text' value='{{admin}}' placeholder-style='font-size:28rpx;' placeholder='请输入管理员名称'></input>
</view>
<view class="form-item">
<button bindtap="updataMeeting" class="btn-next" form-type="submit">提交</button>
<button bindtap="reset" class="btn-next" form-type="reset">清空</button>
</view>
</form>
</view>
edit.js:
Page({
data: {
name: '',
id: '',
beginTime: '',
endTime: '',
admin: '',
max: '',
},
onLoad: function(options) {
this.initValidate();
// 从列表页item传过来的值
console.log('接收端:' + options.id);
console.log('接收端:' + options.name);
console.log('接收端:' + options.max);
console.log('接收端:' + options.beginTime);
console.log('接收端:' + options.endTime);
let that = this;
if(options.id==undefined) {
return;
}
this.setData({
id: options.id,
name: options.name,
beginTime: options.beginTime,
endTime: options.endTime,
admin: options.admin,
max: options.max,
keyword: options.name
})
}
})
以上是关于微信小程序页面跳转url传参，对象、数据过长、特殊字符问题的主要内容，如果未能解决你的问题，请参考以下文章