微信小程序--简单页面跳转
封面图
•
2025-12-24
•
小程序
216
0
0
0
在微信小程序中,实现**简单页面跳转**主要通过 `wx.navigateTo` 或 `wx.redirectTo` 等 API 来实现。下面是一个简单的示例,帮助你理解如何从一个页面跳转到另一个页面。 --- ## ✅ 1. 页面结构 假设你有两个页面: - **index.js / index.wxml / index.json**:首页 - **detail.js / detail.wxml / detail.json**:详情页 --- ## ✅ 2. 在首页(index)中跳转到详情页(detail) ### ✅ 2.1 在 `index.js` 中添加跳转逻辑 ```javascript // index.js Page({ data: { // 页面数据 }, // 点击按钮跳转 goToDetail: function () { wx.navigateTo({ url: '/pages/detail/detail', // 跳转的路径 success: function () { console.log('跳转成功'); } }); } }); ``` ### ✅ 2.2 在 `index.wxml` 中添加按钮 ```html <!-- index.wxml --> <button bindtap="goToDetail">跳转到详情页</button> ``` --- ## ✅ 3. 在详情页(detail)中返回上一页 ### ✅ 3.1 在 `detail.js` 中添加返回逻辑 ```javascript // detail.js Page({ data: { // 页面数据 }, // 返回上一页 goBack: function () { wx.navigateBack({ delta: 1, // 返回的页面数 success: function () { console.log('返回成功'); } }); } }); ``` ### ✅ 3.2 在 `detail.wxml` 中添加返回按钮 ```html <!-- detail.wxml --> <button bindtap="goBack">返回首页</button> ``` --- ## ✅ 4. 注意事项 | 方法 | 说明 | |------|------| | `wx.navigateTo({url: 'path'})` | 跳转到新页面,**保留当前页面**(可以返回) | | `wx.redirectTo({url: 'path'})` | 跳转到新页面,**关闭当前页面**(不能返回) | | `wx.navigateBack({delta: 1})` | 返回上一页 | --- ## ✅ 5. 配置页面路径(在 `app.json` 中) 确保在 `app.json` 的 `pages` 数组中添加了这两个页面: ```json { "pages": [ "pages/index/index", "pages/detail/detail" ], "window": { "navigationBarTitleText": "我的小程序" } } ``` --- ## ✅ 6. 示例效果 - 点击首页按钮 → 跳转到详情页 - 点击详情页按钮 → 返回首页 --- 如果你需要更复杂的跳转(如带参数、跳转后传值等),也可以告诉我,我可以继续扩展。😊
上一篇:
微信小程序-消息提示框
下一篇:
微信小程序通过js动态修改css样式的方法
标题录入,一次不能超过6条
留言
评论