阅读(354) (6)

百度智能小程序工具 调试

2018-07-10 15:27:47 更新

模拟器


模拟器提供了和百度App客户端一致的运行环境,对于绝大部分的 API 均能够在模拟器上呈现出与客户端一致的状态。

百度智能小程序工具 调试

自定义编译


点击工具栏中的编译按钮,可以编译当前代码,并自动刷新模拟器。同时为了帮助开发者调试从不同场景值进入具体的页面,开发者可以添加或选择已有的自定义编译条件进行编译和代码预览(如图)。已有的自定义编译条件会记录在project.swan.json中,开发者可以将其托管于工具内部处理。

注:编译条件跟项目相关,每个项目可以保存自己相关的编译条件

百度智能小程序工具 调试

编译


点击工具栏中的编译按钮,可以编译当前工程代码,并自动刷新模拟器,展现最新的页面效果。

百度智能小程序工具 调试

前后台切换


工具栏中切后台模拟了智能小程序被切换到后台的情况。

d238688e45990a0f15e9d771eef7896a3281226a

调试工具


调试工具分为 6大功能模块:Swan、Sources、Network、Console、Storage、App data、Sensors。

Swan panel

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

百度智能小程序工具 调试

Sources panel

Sources panel 用于显示当前项目的脚本代码文件,智能小程序框架会对脚本文件进行打包编译的工作,因此在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件。

百度智能小程序工具 调试

Network panel

Network Panel 中展示了 request 和 socket 的请求情况。

百度智能小程序工具 调试

注:uploadFile 、downloadFile暂时不支持在 Network Panel 中查看

Console panel

开发者可以在此输入和调试代码, 程序中的 console 信息也会在 Console panel 中提示。

百度智能小程序工具 调试

Storage panel

Storage panel 用于显示当前项目使用 swan.setStorage 或者 swan.setStorageSync 后的数据存储情况。

可以直接在 Storage panel 上对数据进行删除(按 delete 键)、新增、修改。

百度智能小程序工具 调试

App data panel

用于显示当前项目运行时智能小程序 AppData 具体数据,实时地反映项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。

百度智能小程序工具 调试

Sensors panel

用于设置地理信息、陀螺仪、指南针数据,调用相关 API 时会读取在这里设置好的数据。

百度智能小程序工具 调试

预览&发布


当开发者登录后,如果填写项目信息时的 AppID 是正确的,此时工具栏会显示预览和发布按钮

百度智能小程序工具 调试

预览

当点击预览按钮时,开发者工具会对当前项目进行编译,然后制作压缩包上传到服务器,并生成预览二维码,用百度app扫码后可以看到相应页面。

百度智能小程序工具 调试

发布

当点击发布按钮时,开发者工具会对当前项目进行编译,然后制作压缩包上传到服务器,上传成功后,可以在智能小程序官网的开发管理一栏看到提交的相关信息。