清云小程序教程：小程序开发工具的编辑模式和调试模式

89 阅读 0 评论 59 点赞

我是靠谱客的博主害羞蛋挞，最近开发中收集的这篇文章主要介绍清云小程序教程：小程序开发工具的编辑模式和调试模式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

在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

接口后的数据存储隋况。