【零基础上手微信小程序006】_工具界面介绍

241 阅读3分钟

官方文档对微信开发者工具做了详细的介绍:

image.png

一、开发模式选择

一般使用小程序调试

image.png

二、常用快捷键

image.png

更换方法:

image.png

三、构建npm

菜单栏“工具”---->“构建npm”

对于现在来讲,构建npm没有什么作用。

npm包想要在小程序中使用,必须通过构建npm来使用。

注意:“工具栏”中所有的东西都在“菜单栏”--->“工具”中存在,只是进行一个铺开。

image.png

四、小程序模式

现在开发小程序,使用小程序模式。

如果以后开发插件,使用插件模式。

image.png

五、编译模式

5.1 编译模式概述

每次点击编译时,可以快速的跳转到我们需要展示的编译页面。

以后写哪个页面,就将哪个页面添加一个编译模式,点击刷新,就可以快速跳转到我们想要跳到的页面。

image.png

5.2 添加编译模式

image.png

六、真机调试和预览的区别

真机调试可以查看很多参数。

例如:请求过程中花费的时间、页面里面写的调试代码在真机调试的时候调试出来。

七、清缓存

后面开发中会使用到各种各样的缓存。

例如:数据缓存。

image.png

和浏览器一样,浏览器也有一个清缓存的功能。

八、详情

关于小程序的一些基本的设置。

8.1 基本信息

image.png

8.2 本地设置

image.png

注意1:勾选“不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书”的意义?

前端页面需要对接接口,如果不勾选,后端接口必须基于https,很麻烦.

谁在项目开发阶段,配置https。

项目开发中,一般不去配置https。

注意2:勾选“预览及真机调试时主包、分包体积上限调整为4M”意义?

项目预览时,不能超过2M

如果不勾选,超过2M,项目就不能进行预览。

8.3 项目配置

现在用不到,将来会用到。

image.png

哪里进行配置呢?

“开发”--->“开发管理”--->“开发设置”--->滑到下面“服务器域名”--->点击“修改”--->扫码

image.png

8.4 性能质量/分析

对后台进行后台、后端进行性能分析。

后端是有一个性能分析的。

点击“统计”

image.png

九、机型选择

image.png

提供常见的机型

做响应式开发标准的机型:Iphone 6/7/8----->最符合UI设计稿的版本

十、工具界面

image.png

10.1 工具栏介绍

(1)用户头像

点击用户头像可以扫码切换用户;但是用户必须是该小程序的开发人员或管理员;

(2)模拟器/编辑器/调试器

用来打开或关闭对应的视口;

①模拟器:模拟我们写的代码在设备上的显示效果; 机型:iphone6/7/8,官方推荐;

(3)普通编译下拉项 + 编译按钮:当每次点击编译按钮/或者保存操作,默认是编译首页;

(4)添加编译模式:

(5)预览:扫码在真机查看实际的效果;

(6)真机调试:预览 + 调试模式;

(7)清缓存:清除数据缓存、清除授权缓存;

(8)上传:上传代码到微信服务器;

(9)版本管理:查看历史版本;

(10)详情:关于项目的所有配置都在这里定义;

基础信息:小程序的基本信息;

本地设置(开发阶段勾选):不校验合法域名...