写一个微信小程序不同变量之间传值
时间: 2024-05-11 16:18:54 浏览: 125
微信小程序_页面传值
在微信小程序中,可以通过以下方式实现不同变量之间的传值:
1. 使用全局变量
在app.js中定义一个全局变量,然后在不同的页面中使用getApp()方法获取该变量并进行修改。
示例代码:
app.js
```javascript
App({
globalData: {
name: '小明'
}
})
```
page1.js
```javascript
const app = getApp()
Page({
data: {
age: 18
},
onLoad: function () {
app.globalData.name = '小红'
}
})
```
page2.js
```javascript
const app = getApp()
Page({
onLoad: function () {
console.log(app.globalData.name) // 输出小红
}
})
```
2. 使用页面间传参
通过wx.navigateTo或wx.redirectTo方法跳转页面时,可以在url后面添加参数进行传递。在跳转的页面中可以通过options获取传递过来的参数。
示例代码:
page1.js
```javascript
wx.navigateTo({
url: '/pages/page2/page2?name=小明&age=18'
})
```
page2.js
```javascript
Page({
onLoad: function (options) {
console.log(options.name) // 输出小明
console.log(options.age) // 输出18
}
})
```
3. 使用事件传参
在微信小程序中,可以使用事件传参的方式将数据从子组件传递到父组件。
示例代码:
child.js
```javascript
Component({
methods: {
handleTap: function () {
this.triggerEvent('myevent', { name: '小明', age: 18 })
}
}
})
```
parent.js
```javascript
Page({
handleEvent: function (e) {
console.log(e.detail.name) // 输出小明
console.log(e.detail.age) // 输出18
}
})
```
parent.wxml
```html
<child bind:myevent="handleEvent"></child>
```
以上三种方式都可以实现不同变量之间的传值,具体选择哪种方式取决于实际需求。
阅读全文