微信小程序页面跳转完整代码
时间: 2023-07-24 17:30:47 浏览: 120
以下是微信小程序页面跳转的完整代码示例:
页面 A 的 WXML 文件:
```html
<view class="container">
<button class="btn" bindtap="navigateToB">跳转到页面 B</button>
</view>
```
页面 A 的 JS 文件:
```javascript
Page({
navigateToB() {
wx.navigateTo({
url: '/pages/b/b',
});
},
});
```
页面 B 的 WXML 文件:
```html
<view class="container">
<button class="btn" bindtap="navigateBack">返回上一页</button>
</view>
```
页面 B 的 JS 文件:
```javascript
Page({
navigateBack() {
wx.navigateBack();
},
});
```
这个示例中,页面 A 包含了一个按钮,点击按钮后会跳转到页面 B;页面 B 包含了一个按钮,点击按钮后会返回上一页。页面跳转使用了微信小程序提供的 wx.navigateTo 和 wx.navigateBack 方法。需要注意的是,wx.navigateTo 方法只能跳转到非 tabBar 页面,而 wx.switchTab 方法可以跳转到 tabBar 页面。
相关问题
微信小程序页面跳转实现代码
微信小程序页面跳转可以使用 `wx.navigateTo` 方法,该方法可以实现跳转到新的页面,并且可以在新页面中返回原页面。
具体实现代码如下:
```javascript
wx.navigateTo({
url: '/pages/newPage/newPage'
})
```
其中 `/pages/newPage/newPage` 表示要跳转的页面路径,需要在小程序的 `app.json` 文件中进行配置。
如果需要传递参数,可以在跳转路径中添加参数,例如:
```javascript
wx.navigateTo({
url: '/pages/newPage/newPage?id=1&name=test'
})
```
在新页面中可以通过 `onLoad` 方法获取传递的参数,例如:
```javascript
onLoad: function(options) {
console.log(options.id) // 打印 1
console.log(options.name) // 打印 test
}
```
注意,如果是从非 tabbar 页面跳转到 tabbar 页面,需要使用 `wx.switchTab` 方法。如果是返回上一页,则可以使用 `wx.navigateBack` 方法。
微信小程序页面跳转代码
微信小程序页面跳转可以使用以下代码:
1. `wx.navigateTo({url: '/pages/xxx/xxx'})` 用于跳转到应用内的某个页面,该页面需要在 `app.json` 中注册。
2. `wx.switchTab({url: '/pages/xxx/xxx'})` 用于跳转到应用内的某个 tabBar 页面,该页面需要在 `app.json` 中注册。
3. `wx.redirectTo({url: '/pages/xxx/xxx'})` 用于关闭当前页面,跳转到应用内的某个页面,该页面需要在 `app.json` 中注册。
4. `wx.reLaunch({url: '/pages/xxx/xxx'})` 用于关闭所有页面,打开应用内的某个页面,该页面需要在 `app.json` 中注册。
其中,`/pages/xxx/xxx` 表示要跳转的页面路径。