自己开发微信小程序教程（微信小程序开发教程---第一个小程序）

今天小美给大家收集了一些自己开发微信小程序教程，微信小程序开发教程---第一个小程序方面的信息来分享给大家，如果大家感兴趣的话就接着看下面得文章吧

等来近一年，微信小程序终于正式发布了，对于开发者朋友来说，今后都可以申请创建自己的小程序。那么微信小程序怎么申请？做一个微信小程序的实战开发教程，希望操作步骤，对初期开发者会有所帮助。材料/工具微信PC版方法

1、在安装完“微信Web开发者工具”之后，通过开发者的微信扫码进入后，如图。点击“添加项目”，填入之前获得的AppID（无AppID可忽略），输入项目名称“Hello WXapplet”,选定本地文件夹作为项目目录。勾选“在当前目录中创建quick start项目”后，点击“添加项目”按钮，即已成功创建了我们第一个微信小程序项目——Hello WXapplet。

2、开发者工具界面基本分为四大区域：1、区“顶部菜单”，2、区“导航菜单”，3、区“目录文件/模拟运行”，4、区“编辑/调试开发”、1、区与2、区是固定的。3、区与4、区会根据选择导航菜单区的不同功能或模式有所不同。1、区“顶部菜单”，“设置”是配置开发机运行程序时如何连接网络。“动作”是指“刷新”、“后退”、“前进”等操作，主要在网页或界面调试时使用。“帮助”是Web开发者工具的版本与版权声明等信息2、区“导航菜单”，是开发者经常使用的功能区。特别是其中的“编辑”与“调试”功能将是开发者使用最多的重要功能。

3、点击编辑按钮，出现如图所示的界面。

4、调试功能是开发者检测代码结果实现与排查问题的核心工具，如图。4、区此时变成调试工具与输出区。模拟器将如实地模拟微信小程序项目在客户端的逻辑与操作表现，绝大部分的功能与API调用均能在模拟器上正确呈现。调试工具与输出区的顶部是一行菜单，分别是：Console、Sources、Network、Storage、AppData、Wxml、Senser，最右边的扩展菜单项是定制与控制开发工具钮“┆”。Console页：控制台信息页，有两个作用：

5、开发者直接在此输入代码并调试。

6、显示小程序的错误输出。

7、Sources页：源文件调试信息页，用于显示当前项目的脚本文件。

8、Network页：网络调试信息页，用于观察和显示每个元素请求信息和套接字（socket）状态等网络相关的详细信息。

9、Storage页：数据存储信息页，用于显示当前项目使用存储API(wx.setStorage或wx.setStorageSync)接口的数据存储情况。比如在Console中输入：wx.setStorage({key:"name",data:"King"}),则在Storage页面中就可以看到我们存储了一个Key-Value数据。

1、0导航菜单区的“项目”功能，用来显示当前项目的细节，包括图标、AppID以及目录信息等。

本文到此结束，希望对大家有所帮助。