盘点微信小程序跨页面传值的若干方式
直接给大家上干货
1、跳转页面传递参数
pageA.wxml
<button type="primary" bindtap="jumpTo">点击跳转</button>
pageA.js
jumpTo:function(){
//传数字
let number=0
//传字符串
let str="字符串"
//传json对象
let json={
name:'小王',
age:18
}
//传json数组
let jsonArray=[{
name:'小赵',
age:20
},{
name:'小李',
age:18
}]
/**
* url传值只能传字符串或数字,不能直接传json对象
* 所以要把json,jsonArray转化为字符串传值
* 当然到另一个界面要把字符串还原成json,jsonArray对象
*/
let jsonstr=JSON.stringify(json)
let jsonArraystr=JSON.stringify(jsonArray)
//skipurl换成你要跳转的url
//ex: ../page2/page2
wx.navigateTo({
url: 'skipurl?number='+number+'&str='+str+'&json='+jsonstr+'&jsonArray='+jsonArraystr,
})
},
pageB.js
onLoad: function (options) {
//接收number
let number = options.number
//接收str
let str = options.str
//接收json字符串,并将json字符串还原json
let json=JSON.parse(options.json)
//接收jsonArray字符串,并将jsonArray字符串还原jsonArray
let jsonArray=JSON.parse(options.jsonArray)
//打印接收到的数据
console.warn("传输数据成功!!")
console.log(number)
console.log(str)
console.log(json)
console.log(jsonArray)
},
2、缓存
pageA.js 写入
let obj={ name:'小明', age:3 }
wx.setStorage({ data: obj, key: 'test', })
pageB.js 读取
wx.getStorage({
key: 'test',
}).then(res=>{
console.log('获取缓存成功')
console.log(res.data)
})
3、全局的globalData对象
// 全局app.js
globalData: { id: 1 }
// xxxa页面
var app = getApp();
app.globalData.id = 18
// xxxb页面
var app = getApp();
console.log(app.globalData.id) // 18
4、eventChannel发布订阅
index.wxml
<button bindtap="jump">jump to next page</button>
index.js
Page({
jump: function () {
wx.navigateTo({
url: "./test",
events: {
// 监听methodsFromTest事件,并获取传递来的数据
methodsFromTest: function (data) {
console.log("index页面接收数据:", data);
},
},
success: function (res) {
// 通过res.eventChannel触发methodsFromIndex事件并传递出去数据
res.eventChannel.emit("methodsFromIndex", {
data: "send from opener page to test",
});
},
});
},
});
test.js
Page({
onLoad: function (option) {
console.log("test page onLoad");
// 通过this.getOpenerEventChannel()实例对象可以主动触发或监听事件
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit("methodsFromTest", {
data: "send from opened page to index",
});
eventChannel.on("methodsFromIndex", function (data) {
console.log("test页面接收数据:", data);
});
},
});
效果如下
盘点微信小程序跨页面传值的若干方式的更多相关文章
- 微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递 例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: <!--pages/list/list.js--&g ...
- 微信小程序跨页面获取数据示例
index.wxml <navigator class="navs" url="{{urls}}"> 中国 </navigator> i ...
- 微信小程序返回页面传值
一.通过url传递参数,但由于navigateTo无法跳转到导航页,所以无法往导航页传递参数 wx.navigateTo({ url: 'test?id=1' }) 二.通过wx.navigateBa ...
- 微信小程序之页面传值并且根据产品类别(主从关系)的赋值操作
<view class="title"> <view class="titleName">{{cname}}</view> ...
- 微信小程序:页面配置 page.json
微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
- 微信小程序前端页面书写
微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...
- 图解微信小程序---实现页面的跳转与返回操作
图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...
- 开发 | 如何在微信小程序的页面间传递数据?
我们在之前发布过小程序页面传值方法的简单介绍,说明了在小程序开发中,两种常见的页面之间传值方法. 本期,知晓程序(微信号 zxcx0101)为你带来的是「倒数记日」小程序开发者带来的,小程序开发中,有 ...
随机推荐
- PAT B1071 小赌怡情
题目描述: 常言道"小赌怡情".这是一个很简单的小游戏:首先由计算机给出第一个整数:然后玩家下注赌第二个整数将会比第一个数大还是小:玩家下注 t 个筹码后,计算机给出第二个数.若玩 ...
- Zookeeper中的Leader选取机制
一.Zookeeper是什么? ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应 ...
- 帝国CMS批量提取正文内容到简介
最近接到一个帝国CMS模板改版项目,自带的数据可能是采集的,以前的简介字段内容只截取了60个字,新模板的简介60字符太少了,不美观,想让简介都截取200个字,怎么批量修改呢,文章太多了手动改肯定不行, ...
- Django中间件、csrf跨站请求、csrf装饰器、基于django中间件学习编程思想
django中间件 中间件介绍 什么是中间件? 官方的说法:中间件是一个用来处理Django的请求和响应的框架级别的钩子.它是一个轻量.低级别的插件系统,用于在全局范围内改变Django的输入和输出. ...
- openfeign使用踩坑记录
1.报ClassNotFound com.netflix.config.CachedDynamicIntProperty问题,原因是spring-cloud-starter-openfeign的spr ...
- 关于croptool无法裁剪分辩率过低的图片
在使用croptool.js时,如果图片的分辨率过低,则无法裁剪超过分辨率的大小.比如说 function chooseImg(event){ var files = event.files || e ...
- 几种比较经典的波形及其FFT变换(正弦波,三角波,方波和锯齿波)
之前上学时我的信号学得最差了,主要原因还是我高数学得不怎么样.可能是人总敬畏自己最不会的,所以我觉得我学过诸多科目中,数学是最博大精深而最妙的,从最开始的一次函数到反比例函数,二次三次函数和双曲线,椭 ...
- windows10家庭版启用组策略gpedit.msc
启用组策略gpedit.msc 家庭版很多功能不能使用,凑巧用的就是家庭版. 还想使用gpedit.msc来关闭windows10的更新. 找到一个可行的方法. 需要创建一个脚本. 如果你没有编辑器, ...
- Java学习day10
在类内定义的类就称为内部类.内部类可以访问外部类的所有成员,外部类要访问内部类,必须先建立对象 内部类分为成员内部类和局部内部类 外界创建public修饰的成员内部类对象的格式:外部类名.内部类名 对 ...
- partTwo自动出题程序
需求介绍 一家软件公司程序员二柱的小孩上了小学二年级,老师让家长每天出30道四则运算题目给小学生做. 二柱立马就想到写一个小程序来做这件事. 这个事情可以用很多语言或者工具来实现: Excel, C/ ...