1. 通过url带参数传递
1.1 固定参数传递
例如，从 list 页面到 detail 页面, 传递一个或多个固定值
list页面传值：
点此进入 detail
detail页面取值：
onLoad: function (options) {
this.setData({
detail_id: options.id,
detail_name: options.name
})
}
1.2 从列表取值
从列表页进入详情页时，需要传递列表被点击项目的 id 至详情页，方法：
在列表页通过data-id='{{item.id}}'给各个项目绑定一个 id ；
在详情页通过 onload 拿到 id;
列表页：
{{item.title}}
￥{{item.price}}
// 进入详情页时 传递 id
goDetail (e) {
console.log(e.currentTarget.dataset.id),
wx.navigateTo({
url: `/pages/detail/detail?id=${e.currentTarget.dataset.id}`,
})
}
详情页:
// pages/detail/detail.js
Page({
data: {
detail: {},
loading: true
},
onLoad: function (options) {
this.loadDetail(options.id); // 拿到列表页传过来的 id
console.log(options.id)
},
loadDetail (id) {
wx.showLoading({
title: '详情加载中...',
})
wx.request({
url: 'http://10.0.1.109:3000/list',
success: (res) => {
console.log(res.data.cityList);
let thisPlace = res.data.cityList.filter((val) => val.id == id)
console.log(thisPlace)
this.setData({
detail: thisPlace[0],
loading: false
});
console.log(this.data.detail)
wx.hideLoading();
}
})
},
})
2. 通过页面栈传值
getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
注意：
不要尝试修改页面栈，会导致路由以及页面状态错误。
不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
页面栈应用
例如，在首页 index 进入列表页 list，再进入详情页 detail 后，如果需要能从detail页一键返回到index页，并且传值给index页，这里就可以用页面栈来实现。
首页：
{{tag}}
//index.js
Page({
data: {
tag: ''
}
})
详情页：
返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
点此返回首页
// pages/detail/detail.js
Page({
data: {
tag: '土豆'
},
backToIndex () {
let pages = getCurrentPages() // 获取页面栈，pages为一个数组，里面存储了从首页到当前页的所有页面，如下图所示
console.log(pages)
let tag = this.data.tag // 拿到当前页的tag
wx.navigateBack({
delta: 2,
success () {
pages[0].setData({
tag: tag // 将当前detail页的tag赋值给首页index中的tag
})
}
})
},
})
console.log(pages) 打印值：
3. 通过globalData
在 app.js 中定义全局变量
globalData：{
name: '姓名'
}
在其他页面可以取到全局变量
let app = getApp();
console.log(app.globalData.userInfo) // 姓名
4. 通过 缓存 setStorage
bindinput: 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值
bindconfirm: 点击完成按钮时触发，event.detail = {value: value}
搜索
// pages/search/search.js
Page({
data: {
inputValue: ''
},
bindKeyInput(e) {
this.setData({
inputValue: e.detail.value
})
console.log(this.data.inputValue)
},
// 进入搜索结果页 -> list
goSearch() {
let content = this.data.inputValue
if (!content) {
console.log('内容为空')
return
}
wx.navigateTo({
url: `/pages/list/list?content=${content}`,
})
}
})
微信小程序把玩(五)页面生命周期
原文:微信小程序把玩(五)页面生命周期 这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS ...
微信小程序开发：学习笔记[9]——本地数据缓存
微信小程序开发:学习笔记[9]——本地数据缓存 快速开始 说明 本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...
微信小程序中使用全局变量解决页面的传值问题
由于项目需要,最近便在做 一个类似于美团的餐饮平台的的微信微信小程序,项目有十几个页面,那么页面间的传值被经常用到.在小程序中页面间的传值主要有使用全局变量和本地存储这两种方法,在这个项目中我采用的 ...
微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...
微信小程序--ajax服务器交互及页面渲染
网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这 ...
微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面
如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',}) 不起作用,需要使用 w ...
微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案
场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...
微信小程序 (全局配置和页面配置)
全局配置 app.json文件用来对微信小程序进行全局配置. 一.配置页面路径 二.window 配置全局默认的窗口 navigationBarTextStyle:导航栏的标题颜色 navigati ...
【微信小程序】模仿58同城页面制作以及动态数据加载
完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...
随机推荐
Apache Shiro 学习记录1
最近几天在学习Apache Shiro......看了一些大神们的教程.....感觉收获不少.....但是毕竟教程也只是指引一下方向....即使是精品教程,仍然有很多东西都没有说明....所以自己也稍 ...
SVG Drawing Animation - SVG 绘制动画
一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...
unity3d 扩展NGUI Tweener —— TweenFillAmount
好久没写博客了,上一篇是在今年上班之前写的 从年初到现在一篇没写过,每天都在加班,实在太忙了 上班半年多了,学到不少东西 今天分享一下刚写的小功能TweenFillAmount 用过NGUI Twn ...
Java乔晓松-android中获取图片的缩略图(解决OutOfMemoryError)内存溢出的Bug
由于android获取图片过大是会出现内存溢出的Bug 07-02 05:10:13.792: E/AndroidRuntime(6016): java.lang.OutOfMemoryError 解 ...
Linux下的进程与线程(二)—— 信号
Linux进程之间的通信: 本文主要讨论信号问题. 在Linux下的进程与线程(一)中提到,调度器可以用中断的方式调度进程. 然而,进程是怎么知道自己需要被调度了呢?是内核通过向进程发送信号,进程才得 ...
k.tt 研究下生成的逻辑代码：从壹开始前后端分离 [.netCore 填坑 ] 三十二║ 四种方法快速实现项目的半自动化搭建
更新 1.更新小伙伴 @大龄Giser提出好点子:试试VS的插件扩展:VSIX.ItemProject等,将T4模板给制作插件,这里先记下,有懂的小伙伴可以自己先试试,我会在以后更新. 2.感谢小伙 ...
HQL包含中文查询失败
jdbc:mysql://172.16.9.6:3306/school?useUnicode=true&characterEncoding=UTF-8配置文件中的url加上编码,一般mysql ...
Mysql的唯一性索引unique
目录 唯一性索引unique影响: unique与primary key的区别: 存在唯一键冲突时,避免策略: insert ignore: replace into: insert on dupli ...
Stephen Hawking Taught Us a Lot About How to Live
勇气.好奇心.幽默感,那些霍金教给我们的事Stephen Hawking Taught Us a Lot About How to LiveStephen Hawking, the English c ...
Uploadify多文件上传插件.NET使用案例+PHP使用案例
ploadify是一个非常好用的多文件上传插件 插件下载: 下载后需要用到的文件: 接下来就是直接添加代码: Default.aspx代码
如果觉得《微信小程序页面栈_微信小程序之页面传值(路由 页面栈 globalData 缓存)》对你有帮助，请点赞、收藏，并留下你的观点哦！
