免费试用

跨平台小程序在线开发工具,用做网页的技术做小程序,兼容微信、支付宝、抖音、快手、百度等主流小程序平台!

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 的预览方式非常简单易用,通过上述两种预览方式,可以帮助开发者快速地进行开发,并实时修复问题,使开发过程更为高效。


相关知识:
阿里云钉钉小程序开发使用指引
随着移动互联网的快速发展,钉钉成为了企业级沟通、协作、管理的主流平台之一。为方便企业用户使用钉钉平台,阿里云提供了钉钉小程序开发服务。本文将从原理、使用步骤和开发指南三个方面,介绍阿里云钉钉小程序开发的详细内容。一、原理钉钉小程序开发是一种基于钉钉平台的轻
2023-08-09
安徽微信小程序开发公司价格
随着移动互联网的快速发展,微信已经成为了人们日常生活中必不可少的社交工具,同时也催生出了微信小程序。微信小程序是指可以在微信平台内直接使用的应用程序,具有轻量化、便捷性、无需安装等特点,被越来越多的企业用于宣传、销售、服务等方面。那么,针对安徽地区,微信小
2023-08-09
vue开发微信小程序全站
Vue是一款现代 JavaScript 库,可用于构建单页面应用程序(SPA)和跨平台应用程序。同时,Vue也可以与小程序结合使用,让你可以用更高效的方式来开发小程序。本文将详细介绍如何使用Vue开发微信小程序全站,包括原理、技术栈以及步骤。一、原理Vue
2023-08-09
uniapp混合开发小程序全栈商城设计
Uniapp混合开发小程序全栈商城设计是一种利用Uniapp技术栈进行开发的全栈商城。Uniapp是一种基于Vue.js生态的多端统一开发框架,它可以支持开发微信小程序、支付宝小程序、H5、App等多个平台的应用。Uniapp混合开发小程序全栈商城设计将小
2023-08-09
uniapp微信小程序开发工具哪个好
Uniapp是由DCloud团队推出的一款多端开发框架,可同时支持微信小程序、支付宝小程序、H5、APP等多个平台。Uniapp微信小程序开发工具也是多种多样,但最常用的有两款——HBuilderX和VS Code。HBuilderX是DCloud团队研发
2023-08-09
uniapp开发小程序调用后端接口
Uniapp是一种跨平台的应用开发框架,支持同时开发多种平台应用,如小程序、APP、H5等等。在开发小程序时,我们需要向后端API接口发送请求,获取数据或实现特定的功能。下面,我将详细介绍Uniapp开发小程序如何调用后端API接口的原理和方法。1.发送H
2023-08-09
uniapp 小程序开发视频
UniApp 是一种基于 Vue.js 框架的跨平台应用开发方案。它可以同时开发 iOS、Android、小程序等多个平台应用,大大提高了开发效率和代码复用性。UniApp 的小程序开发流程与普通小程序开发大致相同,步骤如下:1. 安装开发工具首先需要安装
2023-08-09
qq小程序开发使用的什么语言
QQ小程序开发使用的是一种叫做WXML的标记语言、WXSS样式语言和JavaScript编程语言。首先,WXML是一种类似于HTML的标记语言,用于构建小程序页面的结构。WXML基本语法和HTML相似,但也有些不同之处。例如,在WXML中不能使用令人困惑的
2023-08-09
java 程序 打包 exe
Java程序打包成exe文件是很多Java开发人员希望实现的功能。尽管Java被宣传为平台无关的语言,但在实际应用中,将程序打包成一个独立的可执行文件(exe)对于用户的体验和在特定操作系统上的发布依然很重要。将Java程序打包成exe文件的原理是通过一个
2023-05-26
云溪小程序开发工具
云溪小程序开发工具是一款为开发者提供小程序开发能力的集成式开发工具。它是针对小程序开发提供定制化解决方案的一款工具,旨在帮助开发者快速、高效、稳定地进行小程序开发。云溪小程序开发工具的特点:1.提供完整的小程序开发流程,包括开发、调试、测试和发布等环节;2
2023-05-26
小程序开发工具制作教程视频
小程序开发工具是一个用于开发微信小程序的工具,其主要功能包括代码编辑、存储管理、调试、预览和发布等。对于每一个希望自主开发小程序的开发者来说,掌握小程序开发工具的技能是至关重要的。在本教程中,我们将介绍小程序开发工具的制作原理以及详细的制作步骤。在本教程中
2023-05-26
微信小程序开发工具好学吗
微信小程序是一种轻量级的应用,它可以直接在微信内进行使用。开发工具是我们在进行小程序开发的时候必不可少的东西,而微信小程序开发工具也是一种非常好的选择。下面将介绍微信小程序开发工具的原理和具体使用方法。微信小程序开发工具原理:微信小程序开发工具是由微信提供
2023-05-26