点击“添加项目”,填入之前获得的AppID(无AppID可忽略),输入项目名称“Hello WXapplet”,选定本地文件夹作为项目目录。
勾选“在当前目录中创建quick start项目”后,点击“添加项目”按钮,即已成功创建了我们第一个微信小程序项目——Hello WXapplet。
开发者工具操作与使用
开发者工具界面基本分为四大区域:1区“顶部菜单”,2区“导航菜单”,3区“目录文件/模拟运行”,4区“编辑/调试开发”、1区与2区是固定的。3区与4区会根据选择导航菜单区的不同功能或模式有所不同。
1区“顶部菜单”,“设置”是配置开发机运行程序时如何连接网络。“动作”是指“刷新”、“后退”、“前进”等操作,主要在网页或界面调试时使用。“帮助”是Web开发者工具的版本与版权声明等信息。亲自体验微信小程序,测评微信小程序。
2区“导航菜单”,是开发者经常使用的功能区。特别是其中的“编辑”与“调试”功能将是开发者使用最多的重要功能。
编辑功能
点击编辑按钮,出现如图所示的界面。
原来的4区部分变成项目的文件列表区及对应文件的代码编辑区,我们也称之为代码编辑器。
代码编辑器现在支持4种文件的编辑:wxml、wxss、js以及json文件。代码编辑器还提供了较为完善的自动补全功能,大大方便了开发者。
代码编辑器也支持快捷键操作,部分常用快捷键如下:
Ctrl+End:移动到文件结尾
??Ctrl+Home:移动到文件开头
??Ctrl+i:选中当前行
??Shift+End:移动到行尾
??Shift+Home:移动到行首
??Ctrl+Shift+L:选中所有匹配
??Ctrl+D:选中匹配
??Ctrl+U:光标回退
??Shift+Al t+F:代码格式化
??Alt+Up,Alt+Down:上下移动一行
??Shift+Alt+Up,Shfit+Alt+Down:向上向下复制一行
??Ctrl+Shift+Enter:在当前行上方插入一行
调试功能
调试功能是开发者检测代码结果实现与排查问题的核心工具,如图。