个人微信小程序开发入门教程:认识小程序开发页面（一）

学习开发微信小程序最最最最重要的就是学习微信小程序官方文档,因为文档可以解决我们在学习过程中遇到的大部分麻烦，所以先附上官方文档链接：

https://developers.weixin.qq.com/doc/

目录

模拟器、编辑器、调试器、可视化和云开发

打开已经安装好的微信开发者工具，没有安装的可以参考：

https://blog.csdn.net/weixin_62529383/article/details/123785826

页面如图所示：
![在这里插入图片描述]( https://img-blog.csdnimg.cn/994aed7f0a2b4de4862709f0b4b16347.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p6X5LiA55m-5LqM5Y2B5YWr,size_20,color_FFFFFF,t_70,g_se,x_16)

一、模拟器

打开软件便可以通过左上角的这个按钮来打开和关闭【模拟器】
在这里插入图片描述
打开【模拟器】之后便可以在左侧看到一个类似手机屏幕的窗口
![在这里插入图片描述]( https://img-blog.csdnimg.cn/9716ceef314c4d6284c647b9f64e1d30.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p6X5LiA55m-5LqM5Y2B5YWr,size_13,color_FFFFFF,t_70,g_se,x_16)
可以改变【模拟器】的型号来观察小程序的设计界面的兼容性

也可以通过改变【模拟器】的外部条件，例如Wifi状态来更真实模拟小程序在不同手机上可能遇到的状况

二、编辑器

打开软件便可以通过左上角的这个按钮来打开和关闭【编辑器】
在这里插入图片描述
【编辑器】的大致界面如图所示：
![在这里插入图片描述]( https://img-blog.csdnimg.cn/0e6bef4a636848f395bdb1ba77a213ff.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p6X5LiA55m-5LqM5Y2B5YWr,size_20,color_FFFFFF,t_70,g_se,x_16)
界面左边是【资源管理器】，可以看到小程序目录解构
![在这里插入图片描述]( https://img-blog.csdnimg.cn/480676e0cb2f4c89ab14227fb184601d.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p6X5LiA55m-5LqM5Y2B5YWr,size_13,color_FFFFFF,t_70,g_se,x_16)
界面右边就是【编辑器】，可以在这里编译代码
![在这里插入图片描述]( https://img-blog.csdnimg.cn/6ca38618c12447c8b1c200da611106ba.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p6X5LiA55m-5LqM5Y2B5YWr,size_20,color_FFFFFF,t_70,g_se,x_16)

三、调试器

打开软件便可以通过左上角的这个按钮来打开和关闭【调试器】
小程序的开发过程中，【调试器】至关重要，不仅可以为我们锁定项目中出现的bug问题，还能更加有效地帮我们进行问题分析和数据排查
在这里插入图片描述
调试器界面如图所示：
![在这里插入图片描述]( https://img-blog.csdnimg.cn/e9a5c594832440d3879fa80b295d6694.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p6X5LiA55m-5LqM5Y2B5YWr,size_20,color_FFFFFF,t_70,g_se,x_16)

四、可视化

打开软件便可以通过左上角的这个按钮来打开和关闭【可视化】
在这里插入图片描述
【可视化】界面如图所示：
![在这里插入图片描述]( https://img-blog.csdnimg.cn/f1a29b1d54f1419ea2a1798779573d59.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p6X5LiA55m-5LqM5Y2B5YWr,size_20,color_FFFFFF,t_70,g_se,x_16)
【可视化】可以更加便捷地帮助开发者观察各个组件的产生效果以及调试它们

五、云开发

云开发在打开后会出现这样一个界面

![在这里插入图片描述]( https://img-blog.csdnimg.cn/e35fe46fa4e74348a186c883038e397c.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p6X5LiA55m-5LqM5Y2B5YWr,size_20,color_FFFFFF,t_70,g_se,x_16)
具体分析可以参考：https://zhuanlan.zhihu.com/p/346062804

posted @ 2022-04-28 23:11  猫咪爱吃兔子  阅读(319)  评论(0)    收藏  举报