小程序开发工具—— Tuya MiniApp Tools 使用指南、工作区和真机调试详解

最新推荐文章于 2024-08-26 10:21:32 发布

IoT砖家涂拉拉

最新推荐文章于 2024-08-26 10:21:32 发布

阅读量867

点赞数 15

文章标签：服务器运维小程序 API App SDK 物联网

本文链接：https://blog.csdn.net/Ms_Smart/article/details/141325173

版权

使用指南

Tuya MiniApp Tools 帮助开发者进行 Tuya MiniApp 的开发调试，当前主要包括模拟器和调试器两大部分。后续我们会以插件的形式集成更多功能，来提升开发调试体验。

该工具没有集成代码编辑器的功能，所以它看起来像一个“小程序浏览器”。鉴于当前的代码编辑器（如 Visual Studio Code）已经相当成熟，我们推荐开发者采用开发者工具和自选代码编辑器配合的方式进行开发，就像开发 web 程序一样。

Tuya MiniApp 团队会专注在 Tuya MiniApp 本身的功能，也会探索如何与外部编辑器更好配合。

登录页

账号为涂鸦开发者平台的账号，可以在涂鸦开发者平台注册。
可以在右上角切换语言。

项目管理页

基本页面：

切换数据中心

在标题的旁边可以切换不同的数据中心。切换数据中心会影响以下功能：

真机调试
模拟器的 app 授权登录
开发者平台各种白名单

切换空间

在标题的旁边可以切换空间，从而可以关联不同空间的小程序和显示应已关联该空间下小程序的项目

新建项目

单击新建按钮，填写必要的数据：

项目路径：默认是一个固定的路径，和一个递增的文件夹名字。
项目名称：只是方便用户区分自己现有的小程序，暂时没有在其他地方用到。
关联智能小程序：把本地项目关联到 开发者平台 对应的小程序。
- 需要先在 开发者平台 创建一个小程序。
调试产品（非必选）：如果所选的 关联智能小程序 为面板小程序，则一定需要关联产品。后续调试会以该产品为调试对象。

选择初始化模板。

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

其他功能

在新建和导入项目后，都会生成快捷入口，可以直接单击该项目卡片进入工作区。每次都会自顶最后一次打开的项目。
悬浮在项目卡片上，右边出现删除按钮。如果选择 删除本地项目，本地文件夹也会被一起删除。

工作区页

进入工作区的时候，会有项目初始化的过程，时间会按项目复杂度变化。

确保系统安装了 node 和 yarn
检测项目是否已经安装依赖（node_modules），会优先用 yarn ，其次用 npm install --legacy-peer-deps
项目编译，可以在日志处看到过程和错误

基础页面:

下一步

工作区

模拟器

左边部分为模拟器，会尽可能地模拟移动端上的真实情况。但上线前，请在真机确认最终效果。

刷新：刷新模拟器
暗黑模式：可以在设置中切换暗黑模式。
多语言：切换多语言。具体参考文档。
机型：可以选择不同的机型进行预览。
缩放：可以选择不同的缩放比例进行预览。
授权登录：当需要模拟一些 app 能力的时间，则需要授权登录
- 模拟 app 请求的时候
- 面板小程序则必须登录
- 确保和 app 账号所属同一个城市
- app 账号是该小程序的成员

功能

工作区的顶部，会有各种功能

真机调试

远程模式：只需要联网，就可以在手机上运行小程序，方便调试。
局域网模式：与远程模式基本一致，优点是链接速度快且不受网络波动影响，缺点就是需要再同个局域网下
- iOS 需要 5.12.0 及以上版本
- Android 需要 5.15.0 及以上版本

真机预览

通过扫码，可以在手机上预览小程序，其实就是发布小程序的开发版本

需要添加 app 的账号到体验白名单
与真机调试的区别
- 编译模式不同，真机调试是 watch，真机预览是 build，真机预览和发布更相似
- 小程序的运行效率不同，真机预览更接近发布情况
- 真机预览没有调试能力

插件

插件是 IDE 能力的扩展，可以通过打开插件，来实现更多的功能。例如：面板工具

在 VS Code 中打开

可以在 VS Code 中打开当前的项目，方便开发者进行代码编辑。需要配置 VS Code 的 code 命令。

项目设置

基本信息：当前项目的基本信息，也可以改变绑定的小程序
- 小程序 ID：可以跳转到对应的小程序后台
- 代码包体积：需要在发布小程序后才能看到准确的信息
环境配置：主要是配置小程序的基础库和依赖的 kit 版本，具体请查看基础库与 kit
项目配置：一些会影响编译的配置

调试区

调试区功能主要是：

调试：其实就是 chrome 的 devtools 的能力
- console：查看小程序运行时的 console 输出
- element：查看小程序的 dom 结构
- 等等
日志：可以查看编译过程的日志，部分时候可以截图输出的错误反馈错误
- 初始化项目时的编译
- 打包上传发布的编译
- 真机预览的编译