跳到主要内容

微信开发者工具预览

微搭编辑器中的预览主要是web应用的预览。如果要进行小程序应用预览,可以使用「微信开发工具预览功能」。

微信开发工具预览功能,是指在构建出小程序应用,并本地调起「微信开发者工具」,实时预览小程序的功能。在微搭编辑器编辑了应用之后,点击微信开发工具预览,会同步应用功能到本地「微信开发者工具」。

使用方法

前置环境安装#

微信开发工具预览有一些前置环境条件:

1.安装「微信开发者工具」#

本地需要安装「微信开发者工具」。推荐到官网下载最新版本

2.安装node和npm#

本地需要安装node和npm。推荐到官网下载,node安装会默认安装npm。

安装完后,在命令行输入以下命令查看版本:

# 查看node版本node -v
# 查看npm版本npm -v

如果是以下情况,说明安装成功了:

3.安装@cloudbase/cli#

本地需要安装@cloudbase/cli。推荐安装2.1.9及以上版本。安装命令如下:

npm i @cloudbase/cli -g

如果不是最新版本,建议删掉重装,命令如下:

# 删除版本npm uninstall @cloudbase/cli -g
# 清除缓存npm cache clean --force
# 重新安装npm i @cloudbase/cli -g

安装成功后,执行以下命令检查是否安装成功:

tcb -v

如果显示版本,则说明安装成功了:

4.登录@cloudbase/cli#

安装完 @cloudbase/cli 后,需要登录,执行以下命令进行登录:

tcb login# 或者这个命令也可以,和上面命令是同样作用:cloudbase login

启动微信开发工具预览步骤#

1.安装环境#

参考上一章「前置环境安装」进行环境准备。 1-4步都是必要步骤,否则无法调起成功

2.绑定小程序#

点击「发布」应用,选择小程序,等待发布成功

3.启动@cloudbase/cli watch模式#

命令如下:

tcb lowcode watch

如下所示即启动成功:

可能会遇到要求登录的情况,如果需要登录,则输入以下命令:

tcb login

按照提示进行登录。

4.检查微信开发者工具安全端口是否打开#

打开微信开发工具,并检查设置-安全端口-服务端口是否处于开启状态:

5.点击「微信开发工具预览」#

修改应用后点击保存,再点击微信开发工具预览,调起微信开发者工具。

等待调起:

打开微信IDE:

6.修改后再次点击「微信开发工具预览」#

在微搭编辑器修改了应用后,点击保存,再点击「微信开发工具预览」,进行同步。步骤同3.

如在过程中出现其他问题,参考以下「常见问题」

常见问题#

1.没有打开微信开发者工具端口#

默认情况下,「微信开发者工具」->「安全」->「服务端口」是默认打开的。如果出现以下错误,说明可能端口被关了:

打开IDE,但是端口关了,也可能出现这种报错:

需要将其打开:

2.node_modules安装失败或构建npm失败#

如果页面白屏或者控制台出错:

❗❗可能是由于项目中安装node_modules或这构建npm失败

解决方案: 打开黄色字体所在目录,执行以下命令:

# 清除npm缓存npm cache clean --force
# 安装依赖包npm i

安装node_modules,如果安装成功,会看到文件夹下有node_modules目录:

❗❗安装完node_modules后,一定要重新构建npm、点击编译刷新。按照以下步骤进行操作

点击编译之后,如果能看到应用,就说明成功了。如果点击编译没有效果,可以尝试重启「微信开发者工具」:

3.打开微信开发者工具失败#

如果打开微信开发者失败,先检查是否有打开端口,参考步骤2

或者可以手动用微信开发者工具打开命令行黄色字体:

然后再次点击微信开发工具预览,进行构建

4.@cloudbase/cli版本过低#

如果@cloudbase/cli版本过低,会导致其他不可预知问题出现,请先升级cli版本。执行命令如下:

# 删除版本npm uninstall @cloudbase/cli -g
# 清除缓存npm cache clean --force
# 重新安装npm i @cloudbase/cli -g

5.没有登录@cloudbase/cli#

如果执行tcb lowcode watch失败,出现以下错误,则说明没有登录。

执行以下命令进行登录:

tcb login

执行上面命令后,会打开授权页面,点击授权即可: