小程序开发工具怎么显示当前页面

小程序开发工具是一个完整的开发工具，它不仅提供了代码编辑、文件管理等基础功能外，还提供了可实时预览和调试小程序的功能，让开发者更加高效的进行开发工作。

在小程序开发过程中，我们可能会遇到需要调试某个页面的情况，这时候需要知道如何在小程序开发工具中显示当前页面。接下来，我们将详细介绍小程序开发工具如何显示当前页面的原理和方法。

在小程序开发工具中，要显示当前页面主要分为以下两种方式：

1. 打开小程序并进入相应页面

在小程序开发工具中，如果你想显示某个页面，那么首先需要打开小程序，并进入相应的页面。具体操作步骤如下：

步骤一：在小程序开发工具中找到所需的小程序。

步骤二：点击左上角的“预览”按钮，弹出二维码。

步骤三：用微信扫描该二维码，在手机上打开该小程序。

步骤四：在手机上进入到所需页面。

步骤五：在小程序开发工具中，点击左上角的“调试”按钮，在弹出的页面中点击“刷新”按钮，即可看到当前页面的效果。

2. 点击页面预览按钮

在开发小程序时，可以通过在代码中添加页面预览按钮，点击后即可直接打开对应的页面，并在小程序开发工具中显示。具体操作步骤如下：

步骤一：在代码中引入weui样式库。

```html

```

步骤二：在页面中添加weui组件 `weui-btn`。

```html

预览本页

```

步骤三：在 JS 文件中编写 `previewPage` 方法，并在该方法中使用 `wx.navigateTo` 打开对应的页面。

```javascript

Page({

previewPage: function() {

wx.navigateTo({

url: 'pages/page-name/page-name'

})

}

})

```

步骤四：在小程序开发工具中打开该页面并点击“预览本页”按钮，即可显示当前页面。

总之，小程序开发工具可以快速预览和调试代码，方便开发者开发调试，显示当前页面的方法也是非常简单的。