小红书开发者工具官网版

小红书开发者工具是专为小红书小程序开发者打造的PC端核心利器，不仅囊括小程序开发、调试、预览、上传等全流程基础能力，更深度集成开发者服务模块。该工具完美适配Windows、Mac双系统，其核心目标始终聚焦于赋能开发者，显著提升小程序开发的整体效率。

小红书开发者工具官网版功能

1、模拟器

模拟器模拟小红书小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。开发者可以选择不同的设备，调试小程序在不同尺寸机型上的适配问题。

2、编辑器

编辑器模块内可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作，并集成了 Git、插件等功能。(操作逻辑类比vscode)

小红书开发者工具官网版调试器模块

1、Elements panelElements panel

用于帮助开发者开发 rml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 css 属性，同时可以通过修改对应 css 属性，在模拟器中实时看到修改的情况(仅为实时预览，无法保存到文件)。通过调试模块左上角的选择器，还可以快速定位页面中组件对应的 rml 代码。

2、Console panel

开发者可以在此调试代码。

3、Sources panelSources panel

用于显示当前项目的脚本文件，同浏览器开发不同，小程序框架会对脚本文件进行编译的工作，所以在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。

4、Network panelNetwork Panel

用于观察和显示 request 和 socket 的请求情况。

5、AppData panelAppData panel

用于展示以及修改当前 page 的 data 属性

6、Storage panel

可以查看 Storage 存储情况。

小红书开发者工具官网版常见问题

Q：无法运行，代码无法执行，样式报错等问题

A：请确保安装了node.js环境，同时在uniapp的目录里安装node_modules依赖(如果有package.json的情况下)。此外，还要注意样式插件等的安装，如sass-loader，如果出现样式解析报错，请根据报错信息在uniapp安装相应的解析loader

Q：如何在uniapp打包编译至小红书平台?

A：目前uniapp顶部选项卡并不支持一键编译打包到小红书ide，需要用户手动在当前目录的终端执行命令，"dev:mp-xhs": "cross-env NODE_ENV=development UNI_PLATFORM=mp-xhs vue-cli-service uni-build --watch", 即运行npm run dev:mp-xhs，该条命令可以在小红书uniapp demo模版里的package.json找到

Q：uniapp编译后，如何在小红书ide运行?

A：uniapp打包后，一般会有一个dist目录，dist/dev/mp-xhs，请在小红书ide打开这个目录，确保你在小红书ide运行的目录有app.json文件

Q：为什么tabbar设置tab徽标和显示红点无用?

A：目前小红书暂不支持这两项能力

Q：为什么xhs.setTabBarStyle设置颜色有时会失效?

A：目前在设置颜色时请输入完整的颜色值如#ffffff，而不是#fff

Q：为什么move-area设置横向或者纵向移动时无法拖动?

A：请设置movable-view的x，y属性，这两个属性目前是必填属性，没有默认值，如果不设置就会导致无法拖动的问题

Q：部分uni组件异常有问题无法使用?

A：uni-data-checkbox、uni-data-picker、uni-easyinput这些组件功能会有异常，请暂时不要使用这些组件

Q：为什么使用canvas组件相关api会报错?

A：当前虽然小红书平台支持canvas，但是uniapp编译到小红书平台时没有支持改项api，导致canvas的api为undefined