E企盈小程序营销工具技术服务商 热线:4006-838-530

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

E企盈小程序直播系统

我们在导航菜单击“编辑”按钮进入编辑模式,可以看到,主操作区会显示小程序的目录树和代码编辑区域,目录树用于小程序的文件管理,我们的代码编写工作需要在代码编辑区域完成。    在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接口后的数据存储隋况。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 清云小程序教程:小程序开发工具的编辑模式和调试模式
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏