NO.3--- 微信小程序登录界面学习记录(游客模式)
一、微信小程序登录界面的相关信息。
1.1、开启软件
打开已安装好的微信开发者工具。

1.2、登录界面
第一次登陆应该是弹出一个二维码框,如一下这样:

1.3、登录模式
从登陆界面可以看到有两种登陆方式,一种是微信扫描二维码登入,另一种是以 “游客模式” 登入。我们可以先点击 “游客模式” 登入看看情况。

1.4、项目创建界面
“游客模式” 登入后可以看到以下几个板块。

二、浅探用户模式各版块的功能
2.1、小程序
2.1.1、界面左侧板块的小程序项目下有“小程序”、“小游戏”...等选项。从字面上理解小程序 和 小游戏应该就是不同的开发板块。

2.1.2、点击小程序中的 + 号窗体是创建小程序项目。

2.1.3、创建小程序的相关选项,进入到创建小程序界面,可见有 6 个内容,分别是:项目名称,目录,AppID,开发模式,后端服务,语言。

(一)、项目名称:字面意思。
(二)、目录:项目保存的路径。
(三)、AppID:游客模式会自动匹配了 touristappid,这个 AppID 对于小程序开发很重要,它是小程序的唯一标识,不同的AppID具有不同的身份、权限和使用场景。AppID 具有以下作用:
-
1、鉴权和身份认证:通过AppID,微信可以对小程序进行身份认证,确保小程序的合法性和安全性。
-
2、接口调用权限管理:小程序在使用微信开放平台提供的API时,需要使用AppID来进行接口调用权限的管理,确保只有具备权限的小程序可以调用相关接口。
-
3、数据统计和分析:通过AppID,微信可以对每个小程序的数据进行统计和分析,包括用户访问量、使用时长等指标,为开发者提供数据支持和运营分析。
-
4、微信支付:如果小程序需要使用微信支付功能,就需要在小程序中绑定与该AppID对应的商户号,才能实现支付功能。
-
5、小程序发布和管理:每个小程序在发布时都需要有独特的AppID,通过AppID可以对小程序进行发布、版本控制和管理。
AppID是微信小程序的重要标识和权限管理的凭证,对于小程序的开发、发布、调用接口和数据分析都具有重要作用。
游客模式 AppID 的所属身份、权限、功能、场景和开发流程:
-
1、所属身份:游客模式的AppID是临时的身份,仅用于代码的编辑和调试,不能进行上传和发布等操作。
-
2、权限和功能:游客模式的AppID功能有限,只能进行代码调试和简单的开发操作。
-
3、使用场景:游客模式的AppID适用于个人开发者或初步的功能验证和调试阶段。
-
4、开发流程:在开发过程中,游客模式的AppID不需要进行审核和发布流程,开发人员可以随时进行调试。
(四)、开发模式:有小程序和插件两个选项(默认小程序)。

(五)、后端服务:只能选择 “不使用云服务”,微信云开发不可选。

(六)、语言有 JavaScript(默认)、TypeScript、TypeScript+Less、TypeScript+Sass 可选。

(七)、开发模式选择 “插件”,会有宿主 AppID 和 插件 AppID 项。游客模式 AppID 均为 touristappid。

2.2、小游戏

2.2.1、创建小游戏的相关选项,有 4 个内容,分别是:项目名称,目录,AppID 和 后端服务。

2.2.2、创建小游戏同样有项目名称,目录,AppID,后端服务。相对于创建小程序,小游戏没有了开发模式和语言。
2.3、代码片段
2.3.1、创建代码片段,点击 “代码片段”时,右侧会有所提示,并附带“了解详情”。

2.3.2、点击进入 “了解详情”,打开了微信官方文档。对于 “代码片段” 这一功能还有一定篇幅的介绍。 “代码片段” 在微信官方文档的路径是 开发--》工具--》代码片段。

2.3.3、通过阅读 “代码片段” 的功能特性和操作演示后,结合网上搜索到的一些信息。总结一下自己关于 “代码片段” 的一些理解。
“代码片段”的用途和作用理解如下:
-
1、原型验证与快速开发:代码片段可以用于快速验证某个功能或界面的原型。通过创建代码片段,可以进行快速迭代和调试,方便开发人员进行功能验证和调整,从而加快小程序的开发速度。
-
2、效果展示与分享:代码片段可以用于展示一些小程序的特定功能或效果,类似于代码的Demo。开发者可以将代码片段分享给其他人,以展示小程序的某个方面,或者作为学习和交流的案例。
-
3、代码复用与团队协作:通过创建代码片段,可以将一些常用的代码片段保存下来,并在其他小程序中进行复用。这对于提高开发效率、减少重复工作是非常有用的。同时,代码片段也方便开发团队进行代码共享和协作。
需要注意的是,代码片段是在小程序开发者工具内使用的,只能在预览模式下运行,不能发布成正式的小程序。如果开发者需要发布小程序,还需要创建一个完整的小程序项目,而不仅仅是代码片段。
2.3.4、创建代码片段。

2.3.5、创建代码片段的相关选项,有 4 个内容,分别是:项目名称,目录,AppID 和 开发模式。

游客模式下的 AppID 都是 touristappid,开发模式有小程序、小游戏框架和插件选项。

2.4、公众号网页项目

2.4.1、点击公众号网页一栏不会像小程序、小游戏栏目那样,右侧出现 +号 创建项目框。点击公众号网页一栏会直接开启一个调试窗体的界面。左上角有一个 “云开发” 的按钮,估计是云开发的入口。

2.4.2、点击 “云开发” 按钮,弹出 “进入云开发控制台” 并要求填入公众号 AppID,估计应该是通过 公众号 AppID 关联到对应的公众号,进行编辑吧?

2.4.3、关于公众号网页项目一栏,现阶段的知识储备还不够。因此,上网学习了一下前辈们的经验与分析,总结了几点方便日后翻阅,以后有机会学习时可以作为一个指导方向。
“公众号网页项目”是微信小程序创建时的一个选项,选择此项的主要用途和作用如下:
-
1、小程序与公众号互通:公众号网页项目可以将小程序与公众号进行互通,为用户提供更全面的服务和体验。例如,用户可以通过公众号打开小程序,或在小程序中进行一些操作后返回公众号等。
-
2、公众号导流和用户转化:公众号可以作为小程序的一个入口,用于向用户介绍小程序的特点和功能,并将用户导流到小程序体验。同时,小程序也可以将用户转化为公众号的关注者,提高用户粘性和转化率。
-
3、公众号界面样式适配:公众号网页项目可以让小程序在公众号内展现更好的样式效果,使小程序可以更好地适应公众号的风格和界面,提高用户体验。
需要注意的是,选择“公众号网页项目”并不是必需的,在某些情况下,小程序与公众号的互通也可以通过其他方式进行实现。开发者需要根据具体业务需求和用户场景来判断是否需要选择“公众号网页项目”。
2.5、其他

2.5.1、由于不太清楚 “其他” 这一栏的用途,因此,上网搜索了一下相关的资料,整理了几点作为学习引导。
在微信小程序创建时的“其他”选项是用来填写小程序的其他相关信息和说明的。它的主要作用如下:
-
1、补充说明和备注:可以在“其他”选项中填写一些额外的说明和备注信息,包括小程序的特色功能、开发者的联系方式、特殊需求等。这些信息可以帮助开发者和审核人员更好地了解和理解小程序的背景和特点。
-
2、特殊要求和定制需求:当开发者对于小程序的创建或审核有一些特殊要求和定制需求时,可以在“其他”选项中进行说明和提出申请。例如,特定场景下需要使用定制化的开发接口或权限等。
-
3、其他补充信息:在一些特殊情况下,开发者可能需要填写一些与小程序相关的其他信息,例如,与其他业务或平台的关联,需要与其他开发者进行合作开发的情况等。
需要注意的是,填写“其他”选项的内容应当与小程序的实际情况和需求相符,遵循相关规定和要求,且不应填写违规、虚假或不相关的信息。
2.5.2、创建 “其他” 项目。
通过对 “其他” 这一功能的了解,它的用途是 “补充说明” 和 “备注” 方面的一些扩展信息记录。我们可以做一些简单的操作。了解基本的内容。
2.5.3、点进 “其他”,展开了一个创建界面,也没有备注信息。

2.5.4、点击 + 号进入创建其他项目界面。出现 “目录” 和 “项目名称”。“目录”指保存路径,项目名称顾名思义就是项目的取名。用 “目录” 和 “项目名称” 的默认值点击 “确定”。

2.5.5、进入编辑界面。

2.5.6、展开创建的 OTHER-1 里面暂时什么也没有。右侧有 4 个图标,分别是:新建文件、新建文件夹、刷新资源管理器、在资源管理器中折叠文件夹。

2.5.7、通过右侧的新建文件和新建文件夹图标进行文件结构搭配,也可以通过鼠标右键的新建文件和新建文件夹进行文件结构搭配。


2.5.8、然后创建 1 个文件夹和 1 个文件构成文件结构看看效果。

通过 “其他” 一栏的功能,可以系统的构建出关于程序的补充说明和备注。
2.5.9、可通过 “在资源管理器中显示” 找到文件的储存位置。操作只需鼠标左键选择文件夹或文件,然后鼠标右键弹出菜单栏,点击菜单栏中的 “在资源管理器中显示”。就能打开到文件储存的路径。

2.5.10、这就是文件 备注1 的保存路径。

2.5.11、同样的操作也可用在查找文件夹的保存路径上。

2.5.12、这就是文件夹 补充说明 的保存路径。

2.5.13、如果在项目导航栏中不选择任何的文件夹和文件,右键执行 “在资源管理器中显示” 会定位到项目文件夹 other-1 的保存路径。

2.5.14、这就是 other-1 项目保存的路径。

2.5.15、另外发现了一个情况,打开硬盘上储存的文件会提示选择打开方式。

2.5.16、选择了 “记事本” 方式才能打开文件。

2.5.17、打开硬盘上的文件需要选择打开方式,这是因为硬盘储存的文件没有扩展名。这种情况,开发者工具创建文件时可以为文件添加扩展名。下面我们在开发者工具创建多 2 个文件,命名为 “备注2.txt” 和 “备注3.doc”。
2.5.18、鼠标选中补充说明,鼠标右键弹出菜单栏,点击 “新建文件”。

2.5.19、创建 “备注2.txt” 文件。(输入文件名后,回车或鼠标左键点击空白处则可创建成功)

2.5.20、同样的操作,创建 “备注3.doc” 文件。

2.5.21、从创建出来的文本文件可以看到 .txt 和 .doc 的图标都有所有区别。现在,分别为 “备注2.txt” 和 “备注3.doc” 写上内容并保存(保存操作,菜单栏---文件---保存。或用快捷键 Ctrl+S。)。


2.5.22、鼠标左键选中 “备注3.doc”,鼠标右键弹出菜单,点解 “在资源管理器中显示” 找到文件所保存的路径。

2.5.23、从打开的路径可以发现 “备注2.txt” 和 “备注3.doc” 的图标和 “备注1” 的不同,这时可以直接打开 “备注2.txt” 和 “备注3.doc” 则看查看文件内容。



2.5.24、开发者工具中对文件重命名。选中 “备注1” 鼠标右键在弹出的菜单栏中点击 “重命名”。

2.5.25、重命名加上 .txt 扩展名。

2.5.26、选中 “备注1.txt” 鼠标右键在弹出的菜单栏中点击 “在资源管理器中显示”,找到文件保存在硬盘的位置。

2.5.27、重命名成功,可直接通过 txt 文本打开文件。


2.5.28、删除文件,鼠标左键选中需要操作的文件,鼠标右键弹出菜单栏,菜单栏中点击 “删除” 。

2.5.29、按下删除时,会有弹出提示。提示文件移动到回收站,可以从回收站还原。实际上,开发者工具的资源管理器删除文件并不是物理删除。它只是从资源管理器中临时剔除了。

当按下“移动到回收站”时,“备注3.doc” 文件在资源管理器消失了。

但其实,只要刷新一下资源管理器,“备注3.doc” 文件又会回来了。


因为,开发者工具资源管理器删除的文件,实际上硬盘储存的文件仍在,这就是为什么刷新后文件又会出现的原因。如,在资源管理器删除了 “备注3.doc” 文件。再通过 “备注2.txt” 文件的 “在资源管理器中显示” 打开文件的储存位置。

“备注3.doc” 文件仍在硬盘中。

所以说开发者工具资源管理器删除的文件实际上并不是物理删除,如果确定文件不需要了,想真正的删除文件,就要在硬盘里删除文件。
关于 “其他” 这个功能,已浅析了它的用途与基础操作。
2.6、注销

2.6.1、注销就是退出当前用户账号,返回登录界面。按下 “注销” 返回登录界面。

2.7、导入和管理

2.7.1、除了 “公众号网页项目” 这一版块,“小程序”、“小游戏”、“代码片段” 和 “其他” 版块都有导入和管理功能。
2.7.2、“小程序”、“小游戏”、“代码片段” 和 “其他” 版块只要创建了项目都有快捷方式。而导入和管理功能就是对这些快捷方式进行管理。正如我们之前在 “其他” 版块创建了一个 other-1 项目,那么这个项目就会在 “其他” 这个版块有快捷方式。

2.7.3、通过快捷方式可以快速的打开项目。

打开后的项目。

2.7.4、管理
点击 “管理”,进入管理模式,可单选项目或左下角 “全选”,对于选中的项目只有一个 “删除” 操作。

点击 “删除” 会弹出一个提示框,大意是只删除记录,不会删除硬盘上的项目文件。

确定删除后,“其他” 版块上的 other-1 项目已经被删除记录了。

正如弹窗提示讲到的,只删除记录,不会删除硬盘上的项目文件。我们可以到硬盘对应的路径找到 other-1 项目依然存在。

2.7.5、导入。
已知,“其他” 版块现在没有项目。

通过导入功能完成项目导入。点击 “导入” 功能 ---》弹窗选择需要导入的项目文件夹 ---》选择文件夹。

确认无误后点击“确定”。

打开项目。

关闭项目后,返回 “其他” 界面。other-1 项目重新建立了快捷方式。

小程序、小游戏、代码片段的项目,导入和管理一样的操作方式。