微信小程序开发教程—创建第一个微信小程序
这是一款来自小程序免费开发制作网的小程序demo源码，希望大家喜欢。
|
在安装完“微信Web开发者工具”之后，通过开发者的微信扫码进入后，如图。 (此图片来源于网络，如有侵权，请联系删除! ) 点击“添加项目”，填入之前获得的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:移动到文件结尾
调试功能 调试功能是开发者检测代码结果实现与排查问题的核心工具，如图。 (此图片来源于网络，如有侵权，请联系删除! ) 4区此时变成调试工具与输出区。模拟器将如实地模拟微信小程序项目在客户端的逻辑与操作表现，绝大部分的功能与API调用均能在模拟器上正确呈现。 调试工具与输出区的顶部是一行菜单，分别是：Console、Sources、Network、Storage、AppData、Wxml、Senser，最右边的扩展菜单项是定制与控制开发工具钮“┆”。 Console页：控制台信息页，有两个作用： 1）开发者直接在此输入代码并调试。 (此图片来源于网络，如有侵权，请联系删除! ) 2）显示小程序的错误输出。 (此图片来源于网络，如有侵权，请联系删除! ) Sources页：源文件调试信息页，用于显示当前项目的脚本文件。 (此图片来源于网络，如有侵权，请联系删除! )
注意：因小程序框架会对脚本文件进行编译工作，在源文件页面中我们看到的文件其实是经过处理之后的脚本文件。所以我们编写的代码都被包含在define函数中。对于页面（page）的代码，则在打包脚本文件尾部，require函数会完成主动调用动作。 Network页：网络调试信息页，用于观察和显示每个元素请求信息和套接字（socket）状态等网络相关的详细信息。 (此图片来源于网络，如有侵权，请联系删除! ) Storage页：数据存储信息页，用于显示当前项目使用存储API(wx.setStorage或wx.setStorageSync)接口的数据存储情况。比如在Console中输入：wx.setStorage({key:”name”,data:”King”}),则在Storage页面中就可以看到我们存储了一个Key-Value数据。 (此图片来源于网络，如有侵权，请联系删除! ) AppData页：用于调试显示当前小程序项目此时此刻的应用具体数据，实时地回显项目数据情况。我们可以在此处编辑修改数据，反馈到当前界面上去。 Wxml页：用于帮助开发者调试wxml转化后的界面。通过这里的调试可以看到真实的页面结构及对应的wxss属性，同时可通过修改对应的wxss属性，在模拟器中即时查看修改后的情形。（类似chrome中开发者选项中的Element、IE开发者选项中的DOM Explorer）
项目功能 导航菜单区的“项目”功能，用来显示当前项目的细节，包括图标、AppID以及目录信息等。 (此图片来源于网络，如有侵权，请联系删除! ) |
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
本资源来自易用通，如有侵权，请联系站长。
本站为避免不必要的纷争，分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台，站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意，所以如有遗漏资源侵犯了您的合法权利，请联系站长删除。
【小程序源码网资源下载使用说明】：
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网毫无人看的介绍】：
本站又称Z站，原名贼娘网，开站于2018年，换过三任站长，目前站长是第四任站长，本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站，主要小程序资源有用于学习的小程序源码，也有正版原创可商用的小程序源码，是一个公益博客型网站。
【小程序源码网原创源码版权申明】：
未经小程序源码网许可，任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内，版权无使用限制)，否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】：
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网站长最后的屁话】：
如有您认为本站有任何侵犯您合法权益的文章，或者您有什么疑问需求，欢迎联系站长QQ，站长24小时在线，备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理，如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论，就不用加站长啦，对于白嫖党，QQ群才是处理问题的天堂，当然站长也欢迎大家骚扰~
小程序源码网 » 微信小程序开发教程—创建第一个微信小程序
