在微信小程序页面间传递数据总结
在微信小程序页面间传递数据
原文链接:https://www.jianshu.com/p/dae1bac5fc75
在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况,也遇到了开发过程微信小程序限制情况,特此做个总结。
- 全局变量之中传递参数数据
- 在微信小程序的开发过程之中,需要从A页面跳转到B页面,并且把A页面的数据传递到B页面使用。可以使用全局变量使用的方法,微信小程序官方提供app.js全局变量定义文件,里面可以定义需要在全局需要使用的变量与及变量值,例如用户登录之后,需要在所有页面中使用用户登录状态等。
- 微信小程序初始化时,首先会加载app.json全局样式配置文件和全局变量文件,例如下面的globalData变量。
- 在app.js定义全局变量后,可以在各页面间直接加载全局变量,小程序提供了getApp()方法,可以直接获取到App({...})这个全局实例对象。
App({ /**
* 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function () { }, /**
* 当小程序启动,或从后台进入前台显示,会触发 onShow
*/
onShow: function (options) { }, /**
* 当小程序从前台进入后台,会触发 onHide
*/
onHide: function () { }, /**
* 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
*/
onError: function (msg) { },
//全局变量
globalData:{
userInfo:null
} }) //page/index/index
var app=getApp();//取得全局App({..})实例
var userInfo=app.globalData.userInfo;//取得全局变量需要的值使用本地缓存的方法保存全局变量,本地缓存是有存储限制的,所以建议手动删除不再需要的缓存数据。
- 假如在A页面保存需要的信息,如下图就可以直接保存键名为cargo的数据。
var cargo={
id:'12345',
count:2,
name:'xx书籍',
price:85,
picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'
};
wx.setStorage({
key:"cargo",
data:cargo
})
- 在B页面直接可以使用小程序的wx.getStorage并传入要获取到的键值名就可以获取本地缓存的数据。
wx.getStorage({
key: 'cargo',
success: function(res) {
console.log(res.data)
}
})
- 通过在跳转、重定向等转变页面时候,可以直接通过url来传送数据。
- 在A页面传递数据到B页面中使用的时候可以直接使用以下数据。
//page A
wx.navigateTo({
url: 'test?id=1'
})
//or page A
wx.redirectTo({
url: 'test?id=1'
})
// or page A
wx.reLaunch({
url: 'test?id=1'
})
//page B
Page({
onLoad: function(option){
console.log(option.query)
}
})- wx.navigateTo和wx.redirectTo不能跳转到tabar定义的页面,查看了微信小程序提供了wx.switchTab进行跳转,但是switchTab不可以传递url参数,后面提供了wx.reLaunch函数。
- 往组件模板之中传递数据,可以直接在模板的data-*中传递数据。
<template is="模板名" data="数据对象"/>
- 通过页面栈获取到上一页面对数据进行修改
- 假设从A页面跳转到B页面,而B页面需要对A页面的数据进行修改处理。
//pageA
page({
data:{
user:kiwis
}
})
//pageB
page({
updateData:function(){
var pages=getCurrentPages();
var prevPage=pages[pages.length-2];
prevPage.setData({
user:'LaternKiwis'
})
}
}) - 对于全局变量的,也可以直接通过第三方服务器用数据库进行保存,是要使用的时候直接从数据库里面直接读取全局变量。
- 使用wx.request提交与读取数据
//提交数据给第三方服务器进行插入缓存数据库处理
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
username:'kiwis',
gender:1,
picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'
},
method:'POST',
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
//从缓存数据库读取数据
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
username:'kiwis'
},
method:'GET',
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
}) - 在使用url进行参数传递时候,传递数据有字节限制;详情可以查阅微信小程序的文档;在使用url传参数数据时候,如果传送的参数值是一个json数据,要使用JSON.stringify对json对象转换成字符串的形式;在开发小程序过程中,使用Nodejs获取传递的参数时,没有经过字符串序列化,在后台获取不到参数值,显示为null。所以需要JSON.stringify,然后在后台逻辑之中使用JSON.parse序列化成对象使用。
- 小程序通过wx.navaigaTo跳转到具体的页面,并传递相关联的参数数据过去案例如下,class为item的view绑定了tap事件,传递数据通过data-* 来定义(*是自定义的储存数据变量值,其中的item是真实数据)例如wxml页面如下所示:
<view class="container">
<view class="item" wx:for="{{items}}" data-video="{{item}}" bindtap="play">
<image src="{{item.image_url}}" class="newsPic"></image>
<view class="source">
<text>{{item.source}}</text>
<text class="count">评论 {{item.comments_count}}</text>
</view>
<view class="icon" >
<text>{{item.title}}</text>
<image src="../../images/{{path}}" class="play"></image>
</view>
</view>
</view> - 在wx的js文件中,通过play事件通过下面的方式传递数据,通过event.currentTarget.dataset获取我们自定义的video变量:
play:function(event){
var video = event.currentTarget.dataset.video;
console.log(video)
// this.setData({
// path:'play.png'
// })
wx.navigateTo({
url: '../logs/logs?imgUrl=' + video.image_url + '&source_url=' + video["source_url"] + "&title=" + video.title + "&group_id=" + video["group_id"]
})
} - 在要接收上一页面传递过来的数据的页面通过onLoad事件的options参数里面包含了上一页面所有传递过来的参数数据,可以通过下面的方式进行获取。
onLoad:function(options){
var that=this
that.setData({
imgUrl:options.imgUrl,
title:options.title,
videoSrc:options.videoSrc,
group_id:options["group_id"]
})
},
在微信小程序页面间传递数据总结的更多相关文章
- [转] 微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
- 微信小程序——页面之间传递值
小程序页面传值的方式: 1.正向传值:上一页面 --> 下一页面 url传值 本地储存 全局的app对象 2.反向传值:下一页面 --> 上一页面 本地储存 全局的app对象 先说一下 ...
- 微信小程序函数间传递url的参数丢失问题
可以使用encodeURIComponent():函数可把字符串作为 URI 组件进行编码. 可以使用decodeURIComponent():函数可把字符串作为 URI 组件进行解码.
- 微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序--页面与组件之间如何进行信息传递和函数调用 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...
- 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?
原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复 ...
- 微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...
- StoryBoard学习(5):使用segue页面间传递数据
StoryBoard学习(5):使用segue页面间传递数据 函数: - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sen ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- 微信小程序前台的用户数据入库(后台Laravel)
首先 我们可以看到微信小程序官方 文档 wx.login api-login.jpg 通过此图 我们知道 前台要传 一个 code给后台,后台拿到code 并结合appid和appsecret请求 ...
随机推荐
- ASP.NET SignalR 系列(七)之服务端触发推送
前面几章讲的都是从客户端触发信息推送的,但在实际项目中,很多信息可能是由系统服务端推送的,下面2图分别展示两种通道 客户端触发推送 服务端推送 下面我们就重点介绍下服务端如何调用集线器的对象进行推送 ...
- javascript原型深入解析1-prototype 和原型链、js面向对象
1.用prototype 封装类 创建的每个函数都有一个prototype(原型属性),他是个指针,指向的对象,这个对象的用途就是包含了这个类型所有实例共享的属性和方法. 回味这句,想想java或者C ...
- Spring Security 解析(六) —— 基于JWT的单点登陆(SSO)开发及原理解析
Spring Security 解析(六) -- 基于JWT的单点登陆(SSO)开发及原理解析 在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因此决定先把 ...
- Java之路---Day12(多态)
2019-10-26-22:40:09 目录: 1.多态的概念 2.多态的分类 3.实现多态的三个必要条件 4.多态的格式 5.多态成员变量的使用特点 6.多态成员方法的使用特点 7.多态的好处 8. ...
- English--五大基本句型基本概念
English|五大基本句型基本概念 英语的基本句型是整个英语的框架体系,所以,祝愿看到此文的伙伴们,都可以牢牢掌握! 前言 目前所有的文章思想格式都是:知识+情感. 知识:对于所有的知识点的描述.力 ...
- Workerman MySQL组件Connection用法总结
一.初始化连接 $db = new \Workerman\MySQL\Connection('host', 'port', 'user', 'password', 'db_name'); 二.获取所有 ...
- 英特尔加速 Android 应用
下载地址 https://software.intel.com/zh-cn/android https://github.com/intel/haxm 解压目录 双击.exe,安装即可 检查SDK M ...
- select用法 多并发处理
select默认最大检查套接口数量是1024,有定义 #define __NFDBITS (8 * sizeof(unsigned long)) #define __FD_SETSIZE 1024 # ...
- CentOS6.7搭建部署FTP服务 (详解主配置文件)
FTP传输 三种解析: username -->UID :/etc/passwd 将用户名转换成UID的库. hostname---> IP :DNS服务,/et ...
- python笔记43-加解密AES/CBC/pkcs7padding
前言 有些公司对接口的安全要求比较高,传参数的时候,不会明文的传输,先对接口加密,返回的数据也加密返回. 目前比较常见的加密方式是AES/CBC/pkcs7padding. AES五种加密模式 在AE ...