小程序开发环境的搭建二,小程序开发工具的编辑模式和调试模式

我们在导航菜单击“编辑”按钮进入编辑模式,可以看到,主操作区会显示小程序的目录树和代码编辑区域,目录树用于小程序的文件管理,我们的代码编写工作需要在代码编辑区域完成。

    在ct目录树’’窗口我们可以方便地查看和管理文件,如图4-6所示。单击“目录树”右上角三个点的按钮可以从硬盘打开小程序代码文件、查找文件里的关键词和新建目录或者代码文件。

    开发工具目前提供了wxml、wxss、js、json共4种文件的编辑功能和图片文件的预览,在我们编辑代码时,也可以实时地在模拟器里预览代码编辑的情况。

    在编写代码的过程中,开发工具会自动帮助用户保存当前的代码编辑状态,关闭工具或者切换到别的项目并不会丢失已经编辑的文件状态,但只有按下[Ctrl+s]快捷键保存代码后,修改过的代码才能够被重新编译。

同现在大部分成熟的代码编辑器一样,小程序开发工具提供了自动补全功能,编辑is文件时系统会帮助我们补全所有的API,并自动给出相关的注释解释,编辑wxml文件时系

统会帮助开发者直接写出相关的标签,编辑json文件时系统会帮助我们补全相关的配置,并给出实时提示。

    下面是小程序开发工具常用的快捷键,其中最重要的是[Ctrl+s]保存文件快捷键,每次修改代码后都需要用这个快捷键保存更改的内容:

·Ctrl+S:保存文件

·ctrl+[,Ctll+]:代码行缩进

·Ctrl+Shift+[,Ctrl+Shift+]:折叠打开代码块

·Ctrl+c,Ctrl+V:复制,粘贴,如果没有选中任何

文字则复制粘贴一行

·Shift+Alt+F:代码格式化

·Alt+up,Alt+I)own:上下移动一行

·Shift+mt+Up,Shift+A1t+:Down:向上向下复制一行

·Ctrl+Shift+Enter:在当前行上方插入一行

·ctrl+Shift:+F:全局搜索

光标操作快捷键:

·Ctrl+End:移动到文件结尾

·ctrl+Home:移动到文件开头

·Ctrl+i:选中当前行

·Shift+End:选择从光标到行尾

·Shift+Home:选择从行首到光标处

·Ctll+Shift+L:选中所有匹配

·Ctrl+D:选中匹配

·Ctrl+U:光标回退

界面操作快捷键:

·ctrl+\:隐藏侧边栏

·ctrl+m:打开或者隐藏模拟器

单击导航菜单的“调试”按钮进入调试模式,主操作区会显示调试工具,调试工具有6个窗口:“Console'’、“Wxml”、“Sources'’、“Network”、“AppData'’、“Storage'’。

    “Console'’窗口就是小程序的调试控制台,也被叫作终端窗口,用于给开发者输入调试代码和查看调试信息,也用于小程序的错误输出,是我们在小程序调试时最常用的面板。

“Wxml”窗口用于帮助开发者开发wxml文件转化后的界面。类似我们在Chrome浏览器窗口查看一个页面时,单击鼠标右键“开发者工具”的“Elements'’窗口看到的信息,在这里可以看到真实的页面结构和结构对应的WXSS属性,同时可以通过修改WXSS属性在模拟器中实时看到修改的情况。通过调试模块左上角的选择器,还可以快速找到页面中组件对应的wxml代码。关于wxm]及WXSS文件,我们会在后面的章节详细介绍。

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

    "AppData"窗口用于在调试中实时查看和编辑项目数据情况,在此处编辑数据,将会实时反馈到模拟器界面上。

    “Storage”窗口是存储器窗口,用于显示项目在使用WX.setStorage接口或者WX.setStorageSync

接口后的数据存储隋况。


版权保护: 本文由 清云小程序 原创,转载请保留链接: http://www.0575yun.com/articledetail/id/30.html