本文主要介绍,页面跳转间的数据传递。传递的数据类型主要有1,基本数据类型;2,对象;3,数组集合;

先告诉你,本质上都是string类型传递。但是对于对象和数组集合的传递需要小小的处理一下传递时的数据和接收后的数据。

1,传递基本数据类型

index.js 发送页JS

Page({
data: {
testStr: '字符串str'
},
onLoad: function () {
},
next: function(e){
wx.navigateTo({
url: '/pages/test/test?str='+this.data.testStr,
})
}
})

test.js 接受页JS

Page({
data:{
},
onLoad:function(options){
console.log("接收到的参数是str="+options.str);
}
})
打印的Log如下:
接收到的参数是str=字符串str
 
2,传递对象{}
index.js 发送页JS
Page({
data: {
testData:{name:'我是name', extra:'我是extra'}
},
onLoad: function () {
},
next: function(e){
wx.navigateTo({
url: '/pages/test/test?extra='+JSON.stringify(this.data.testData)
})
}
})

test.js 接受页JS

Page({
data:{
testData:null
},
onLoad:function(options){  
console.log("接收到的参数是obj="+options.extra);//此处打印出来的仅仅是字符串 需要解析,解析如下
this.dat.testData = JSON.parse(options.extra);//解析得到对象
}
})
打印的Log如下:
test.js [sm]:16 接收到的参数是obj={"name":"我是name","extra":"我是extra"}
 
3,传递数组集合[ ]
index.js 发送页JS
Page({
data: {
list:['item-A','item-B']
},
onLoad: function () {
},
next: function(e){
wx.navigateTo({
url: '/pages/test/test?list='+JSON.stringify(this.data.list),
})
}
})

test.js 接受页JS

Page({
data:{
list:[]
},
onLoad:function(options){
console.log("接收到的参数是list="+options.list);//此处打印出来的是字符串,解析如下
this.data.list = JSON.parse(options.list);//解析得到集合
}})
打印的Log如下:
test.js [sm]:17 接收到的参数是list=["item-A","item-B"]
 
 
另外,还可以通过缓存(wx.setStorage(OBJECT),wx.setStorageSync(KEY,DATA))来传递数据,只是保存后需要清除,防止缓存过大的情况
转载自:https://blog.csdn.net/wangsf789/article/details/53433676/

  

微信小程序之数据传递的更多相关文章

  1. 在微信小程序页面间传递数据总结

    在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...

  2. 微信小程序请求数据

    微信小程序请求数据,在页面展示,可以在onLoad生命周期中进行请求. 1.新建目录http,新建文件http.js 2.在js文件中暴露需要使用的变量 var baseUrl = 'http://1 ...

  3. 微信小程序之数据缓存

    关于缓存,举个示例,假定我不是通过微信授权登录的方式,小程序又是如何识别我登录后的身份呢???效果图: 这个功能我是通过缓存实现的. 关键核心代码如下: wx.setStorage({ key: 'u ...

  4. 微信小程序开放数据解密 AES-128-CBC 解密(C#版本)

    最近在开发小程序,需要跟微信服务端交互,微信敏感数据都有加密返回,需要在服务端接收进行解密后再返回给客户端小程序,今天就通过C# 进行数据的解密,官方下载下来是Node.C++.php等,就是没有C# ...

  5. 20171018 微信小程序客户端数据和服务器交互

    -- 时常在想,怎么样才能把知识写的清晰,其实是我理解的不够清晰 微信小程序其实是一个客户端页面,也是需要和服务器交互才能体现数据. 1 --服务器搭建Web API :MVC4 中的一个模板, 如下 ...

  6. 微信小程序动态数据跑马灯组件编写

    开发必备:熟悉微信小程序组件开发 开发思路:如果只有一条数据,直接用css3关键帧动画:如果有多条数据,则在当前动画运动到一定时间的时候,将其数据替换掉,使之在视觉效果上有一个从下到上播放的状态.数组 ...

  7. 【微信小程序】数据与界面UI不同步,不能直接操作Page.data

    问题:数据层与UI不同步 微信小程序也采用UI绑定数据源的形式,根据以前做WPF的经验,直觉上认为修改了数据层(Page.data)后,UI会自动更新,然而实验发现数据层修改后UI层未修改,导致数据层 ...

  8. 微信小程序——页面之间传递值

    小程序页面传值的方式: 1.正向传值:上一页面 -->  下一页面 url传值 本地储存 全局的app对象 2.反向传值:下一页面 -->  上一页面 本地储存 全局的app对象 先说一下 ...

  9. 微信小程序用户数据解密

    概述 通过微信web开发者工具创建登录,获取用户信息,发送至后台,进行用户数据解密 详细 代码下载:http://www.demodashi.com/demo/10705.html 一.准备工作 1. ...

随机推荐

  1. visual studio 2013的C++开发环境不错--vs2013安装试用手记

    原文:http://blog.csdn.net/haoyujie/article/details/24370189 从visual studio 体系,最后一次对C++实现了大的改进,那还是vs 7. ...

  2. Python爬虫教程-29-验证码识别-Tesseract-OCR

    本篇是关于验证码识别问题,也是Python爬虫笔记的一个结尾,使用 Tesseract Python爬虫教程-29-验证码识别-Tesseract-OCR 常见反爬虫手段: 验证码 1.简单图片,扭曲 ...

  3. 使用spring aop遇到的坑

    1.aop 切点配置无误但只对控制器无效. 检测你的aop开启配置是否放在了spring配置文件中,如果是请把它移到mvc配置文件中. 我们知道当spring项目使用了spring mvc时,项目是存 ...

  4. Xwiki安装部署详解

    一.Xwiki简介XWiki是一个由Java编写的基于LGPL协议发布的开源wiki和应用平台.XWiki是一款基于java所编写的wiki,它可以运行在如Tomcat,Jetty,JBoss,Web ...

  5. M-AddTwoNumbers-未完成

    /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...

  6. JS如何将变量作为一个对象的Key

    var lastWord = 'last word'; var a = { 'first word': 'hello', [lastWord]: 'world' }; a['first word'] ...

  7. 小程序——微信小程序初学踩过的坑

    微信小程序初学踩过的坑 一.前言     最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上 ...

  8. Task ‘run’ not found in root project

    问题现象: Task 'run' not found in root project 'springframework'. 问题原因: 没有在gradle.build文件中添加如下配置, mainCl ...

  9. Selenium应用代码(读取excel的内容进行注册的案例)

    1. 封装读取excel数据的方法:import java.io.*;import java.util.ArrayList;import java.util.List; import jxl.*;im ...

  10. 华为路由设备SSH配置

    一.环境 路由 IP:192.168.56.2 本地云 IP:192.168.56.1 二.路由器配置 [Huawei]aaa 添加用户[Huawei-aaa]local-user test pass ...