taro开发小程序如何预览

taro 是一款基于 React 语法的多端开发框架，支持一次编写，多端运行，包括了小程序开发。在小程序开发过程中，需要通过一些手段实现代码的实时预览，以便在开发过程中能够及时发现问题并进行调整。

taro 为了方便开发者进行小程序的实时预览，提供了两个预览方式：H5 预览和小程序预览。

## H5 预览

在开发 taro 小程序时，可以通过在浏览器中打开一个链接，直接进行 H5 预览。具体操作如下：

### 1. 安装 taro

在命令行中输入以下指令，安装 taro：

```sh

npm install -g @tarojs/cli

```

### 2. 创建 taro 项目

使用以下指令在指定目录创建一个 taro 项目：

```sh

taro init myApp --template mini-program

```

等待依赖安装完毕，项目初始化完成之后，会在项目目录中生成一些文件和文件夹，其中 `src` 目录下存放了项目的源代码。

### 3. 启动项目

使用以下命令以开发模式启动项目：

```sh

npm run dev:weapp

```

此时命令行中显示项目启动成功并监听端口号即可。

### 4. 打开预览链接

在命令行中显示项目启动成功并监听端口号后，打开浏览器，输入下面的链接：

```sh

http://localhost:8080/weapp

```

在打开的页面中即可实时预览 taro 开发的小程序。

## 小程序预览

除了通过 H5 预览实现小程序实时预览外，taro 还提供了一种方式，即小程序预览。

### 1. 获取小程序预览码

在微信公众平台中，注册开发者账号并创建小程序后，就可以获取到小程序的 appid。在这个 appid 中，有一个叫“开发” 的选项卡，进入后可以看到“开发管理” 页面。

在页面的下方，可以看到“体验版”选项卡。点击“添加体验者”，填写体验者信息并等待审核通过。

审核通过后，在体验者管理页面中，可以看到一个叫“预览二维码” 的按钮。点击该按钮即可获取到小程序的预览码。

### 2. 小程序开发工具配置

在获取到预览码之后，需要配置小程序开发工具，才能使用预览码进行预览。具体操作如下：

* 打开小程序开发工具；

* 点击菜单栏上的“设置” 按钮，进入设置页面；

* 在设置页面中，点击“开发设置”选项卡；

* 在“开发设置”页面中，填写自己的小程序开发者账号和密码；

* 点击“编辑”按钮，输入上一步获取到的预览码，点击“确认”。

### 3. 预览小程序

在完成上述步骤后，即可使用预览码进行小程序的实时预览。具体操作如下：

* 在小程序开发工具中，点击菜单栏上的“预览” 按钮；

* 在弹出的窗口中，选择“小程序” 选项卡；

* 输入上一步获取到的预览码，点击“确定”。

成功输入预览码后，即可在小程序开发工具中实时预览 taro 开发的小程序。

总的来说，taro 的预览方式非常简单易用，通过上述两种预览方式，可以帮助开发者快速地进行开发，并实时修复问题，使开发过程更为高效。