微信小程序创建两个页面 通过按钮实现跳转

好的，以下是实现步骤：

1. 在微信开发者工具中创建一个新的小程序项目。
2. 在项目根目录下创建两个页面，分别命名为page1和page2。
3. 在app.json文件中添加以下代码：

"pages": [
  "pages/page1/page1",
  "pages/page2/page2"
],

4. 在page1页面的wxml文件中添加一个按钮，并绑定跳转事件：

<view>
  <button bindtap="gotoPage2">跳转到page2</button>
</view>

5. 在page1页面的js文件中添加跳转事件的方法：

gotoPage2: function() {
  wx.navigateTo({
    url: '/pages/page2/page2'
  })
}

6. 在page2页面的wxml文件中添加一个按钮，并绑定返回事件：

<view>
  <button bindtap="goBack">返回page1</button>
</view>

7. 在page2页面的js文件中添加返回事件的方法：

goBack: function() {
  wx.navigateBack()
}

8. 运行小程序，在page1页面点击按钮跳转到page2页面，在page2页面点击返回按钮返回到page1页面。

相关问题

微信小程序制作两个页面跳转，一个是点击按钮跳转到新页面，一个是点击图片跳转到新页面。

微信小程序中实现页面间的跳转有两种常见方式：

1. **通过`wx.navigateTo`或`wx.redirectTo`**:
- 点击按钮跳转：当用户点击一个按钮时，可以在对应的事件处理函数中调用`wx.navigateTo`方法，例如：

     buttonClick: function(e) {
       wx.navigateTo({
         url: '/pages/newPage/newPage', // 替换为你要跳转的具体页面路径
       })
     }

- 点击图片跳转：如果你的图片是一个`image`组件，并且需要长按或tap事件触发跳转，可以设置它的`bindtap`属性，同样使用`wx.navigateTo`：

     imageComponent bindtap="jumpToNewPage"
     jumpToNewPage: function() {
       wx.navigateTo({
         url: '/pages/newPage/newPage',
       })
     }

2. **通过路由模式**: 如果你想在当前应用内管理多个页面，推荐使用路由模式。首先，在项目的`app.json`文件中配置页面路径，然后在需要跳转的地方使用`navigator`组件，如：

   "pages": [
     "pages/index/index",
     "pages/newPage/newPage",
     ...
   ]

跳转时，你可以使用`navigator`组件动态改变`current`属性，例如：

   navigator.current = 'newPage'

记得在实际项目中替换上述示例中的页面路径为你实际的页面名称。

微信小程序按钮页面跳转

在微信小程序中，页面之间的跳转可以通过多种方式实现，特别是对于按钮触发的跳转，通常会用到` wx.navigateTo`或`wx.switchTab`等API。这里简单介绍两种常见的方法：

1. **wx.navigateTo**：
这个API用于在同一级目录内进行页面间的跳转。例如，如果你有一个“主页”（index）和“详情页”（detail），你可以这样使用：

   wx.navigateTo({
     url: 'detail?id=123', // 带参数的跳转，id是你想传递的数据
   });

如果你想不带参数跳转，只需去掉参数部分。

2. **wx.switchTab**：
如果你需要在小程序底部导航栏（ tabBar）中切换页面，适合于主页面与多个子页面之间的跳转：

   wx.switchTab({
     url: '/pages/detail/detail', // 需要切换到的页面路径
   });

在调用这些API时，记得确保你的小程序已经配置了相应的页面路径，并且在微信开发者工具中的"项目设置" -> "页面路径管理"中有对应的配置。