微信小程序传值

1、页面跳转传值

<button bindtap="byValueFun">点击传值</button>

// 点击函数
byValueFun: function () {//点击事件
	wx.navigateTo({
	url: '../xxx?id=xxx'//传值
})

// 页面创建时获取数据
onLoad: function (options) {
	console.log('data',options)
}

2、本地存储传值

wx.setStorage({
  key:"key",
  data:"value"
})

wx.setStorage({
key: "key",
data: "很多的数据"
})

3、全局app对象

const app = getApp()
app.datakey='sks';
 
const app = getApp()
var sks = app.datakey;
console.log(sks) // sks
<think>嗯,用户想了解微信小程序中页面或组件之间的方法。我需要根据之前提供的引用内容来整理回答。首先,用户的问题是关于页面的,所以我要先回顾引用里的信息。 引用1提到了父组件通过属性给子组件,子组件用{{}}接收。引用2详细列出了五种方式:URL参数、全局变量、缓存存储、路由参和事件触发。引用3展示了通过URL的代码示例,引用4补充了模板参和修改上一页数据的方法。 我需要将这些方法分门别类,可能分为页面间和组件间。页面间包括URL参数、全局变量、缓存、路由参,而组件间则是父子组件,或者事件触发。另外,引用4还提到了通过getCurrentPages修改上一页的数据,这也是一种方法。 要注意用户可能对每种方法的具体实现步骤和代码示例感兴趣,所以每个方法都需要给出例子。比如URL时如何在onLoad中获取参数,全局变量如何使用app.js,缓存用setStorageSync等。同时,组件要分父子和子父,可能需要用到triggerEvent。 另外,用户的问题可能包括组件,所以除了页面之间的,还要涵盖组件之间的方法。比如父子用属性,子父用事件,还有兄弟组件可能需要通过父组件中转或者使用全局数据。 需要确保回答结构清晰,分点列出,每种方法都有步骤和代码示例。可能还要比较不同方法的适用场景,比如URL适合简单数据,缓存适合大量数据或持久化,全局变量适合多个页面共享的数据。 最后生成相关问题,帮助用户深入理解,比如如何选择方式,如何递复杂数据,或者组件间的其他方法。要确保问题覆盖用户可能感兴趣的后续内容。</think>微信小程序页面/组件方法教程 一、页面间方法 1. URL参数(适合简单参数) - 发送方: ```javascript wx.navigateTo({ url: '/pages/detail/detail?id=123&name=test' }) ``` - 接收方在`onLoad`中获取: ```javascript onLoad(options) { console.log(options.id) // 输出123 console.log(options.name) // 输出test } ``` 该方法适用于递少量简单参数,注意URL长度限制[^3] 2. 全局变量 - 在`app.js`中定义: ```javascript App({ globalData: { userInfo: null } }) ``` - 设置数据: ```javascript getApp().globalData.userInfo = {name: '张三'} ``` - 获取数据: ```javascript const app = getApp() console.log(app.globalData.userInfo) ``` 3. 本地缓存(支持复杂数据) - 存储数据: ```javascript wx.setStorageSync('key', {arr: [1,2,3]}) ``` - 获取数据: ```javascript const data = wx.getStorageSync('key') ``` 4. 页面栈修改 ```javascript // 在目标页面修改上一页数据 const pages = getCurrentPages() const prevPage = pages[pages.length - 2] prevPage.setData({backData: '已更新'}) ``` 二、组件间方法 1. 父子组件 - 父组件使用属性: ```xml <child transfer="{{data}}"></child> ``` - 子组件properties声明: ```javascript Component({ properties: { transfer: { type: Object, value: {} } } }) ``` 2. 子父组件 - 子组件触发事件: ```javascript this.triggerEvent('myevent', {value: '数据'}) ``` - 父组件监听事件: ```xml <child bind:myevent="onMyEvent"></child> ``` 3. 兄弟组件 可通过共同父组件中转,或使用全局数据/缓存方案 三、模板 ```xml <template name="itemTpl" data="{{item}}"> <view>{{item.title}}</view> </template> ``` 使用时: ```xml <template is="itemTpl" data="{{...itemData}}" /> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值