新手如何开发第一个微信小程序(如何开发一个微信小程序)

安装“微信Web开发者工具”后，通过开发者的微信扫码进入，如图。

点击“添加项目”，填写之前获取的AppID(没有AppID可以忽略)，输入项目名称“Hello WXapplet”，选择本地文件夹作为项目目录。

勾选“在当前目录下创建快速启动项目”后，点击“添加项目”按钮，我们已经成功创建了我们的第一个微信小程序项目——Hello wx applet。

开发者对工具的操作和使用

开发者界面基本分为四个区域:区域1“顶部菜单”，区域2“导航菜单”，区域3“目录文件/仿真运行”，区域4“编辑/调试开发”，区域1和区域2是固定的。根据导航菜单区域的不同功能或模式，区域3和4会有所不同。

区域1“顶部菜单”，“设置”是如何配置开发机器在运行程序时连接到网络。“动作”是指“刷新”、“后退”、“前进”等操作，主要在调试网页或界面时使用。“帮助”是Web开发人员工具的版本和版权声明等信息。亲自体验微信小程序，评价一下。

区域2“导航菜单”是开发者经常使用的功能区域。尤其是“编辑”和“调试”将是开发者使用的最重要的功能。

编辑功能

点击编辑按钮，出现如图界面。

原来的4区变成了项目的文件列表区和对应文件的代码编辑区，我们也称之为代码编辑器。

代码编辑器现在支持四种文件的编辑:wxml、wxss、js和json文件。代码编辑器还提供了比较完善的自动补全功能，大大方便了开发者。

代码编辑器还支持快捷键操作，一些常用的快捷键如下:

Ctrl+End:移动到文件末尾Ctrl+Home:移动到文件开头Ctrl+i:选择当前行Shift+End:移动到行尾Shift+Home:移动到行首Ctrl+Shift+L:选择所有匹配的Ctrl+D:选择匹配的Ctrl+U:光标后移+Alt+F:代码格式化Alt+Up、Alt+Down:上下移动一行Shift+Alt+Up、Shfit+Alt+Down:上下复制一行Ctrl+Shift+Enter

调试功能

调试功能是开发人员检测代码结果实现和排查问题的核心工具，如图。

区域4现在成为调试工具和输出区域。模拟器会如实模拟微信小程序项目在客户端的逻辑和运行表现，大部分功能和API调用都能在模拟器上正确呈现。

调试工具和输出区的最上方是一排菜单，分别是:控制台、源代码、网络、存储、AppData、Wxml和Senser，右边扩展菜单项是用于定制和控制开发工具的按钮“┆”。

控制台页面:控制台信息页面，有两个功能:

1)开发者直接在这里输入代码，进行调试。

2)显示小程序的错误输出。

源代码页面:源文件调试信息页面，用于显示当前项目的脚本文件。

注意:因为applet框架会编译脚本文件，所以我们在源页面看到的文件实际上是经过处理的脚本文件。所以我们写的代码包含在define函数里。对于页面的代码，在打包脚本文件的末尾，require函数将完成主动调用动作。网络页面:网络调试信息页面，用于观察和显示网络的详细信息，如每个元素的请求信息和套接字状态。

存储页面:数据存储信息页面，使用存储API(wx.setStorage或wx.setStorageSync)接口显示当前项目的数据存储情况。比如在控制台中输入:wx.setStorage ({key: name，data: king})，可以看到我们在存储页面中存储了一个key -值的数据。

存储页面:数据存储信息页面，使用存储API(wx.setStorage或wx.setStorageSync)接口显示当前项目的数据存储情况。比如在控制台中输入:wx.setStorage ({key: name，data: king})，可以看到我们在存储页面中存储了一个key -值的数据。

相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

微信小程序开发中全局变量缓存问题的解决方案

微信小程序开发中如何实现微信支付