「这是我参与11月更文挑战的第13天,活动详情查看:2021最后一次更文挑战」
前言
随着我们对于小程序的不断完善和升级,小程序所呈现出的功能越来越成熟,可用性也在不断提高,这是对于用户而言的。那么我们作为开发者,要如何管理好我们的小程序项目,这就涉及到一个非常重要的话题——代码管理。
为什么要进行代码管理
源码保护
回到做小程序的一开始,我们从官网下载了开发者工具并初始化了项目。当时提到,所谓小程序项目,其实就如同我们电脑上的其他文件夹一样,只是一堆文件的组合。只不过由于某些特殊文件格式及内容的存在,整个文件夹可以被开发者工具识别为小程序项目,这样的文件夹我们成为小程序源码目录。
那么想象这样一些场景:
假如我们换了一台电脑,那是不是就没法继续开发我们的小程序了,的确如此,不过也可以通过拿U盘拷贝之前电脑上的小程序源码目录到新电脑上解决。
或者我们的源码目录找不到或者误删了,那是不是没法继续开发小程序了,的确如此,此类情况可参考 已发布的小程序,源码不小心丢失了
虽然这种情况也许也有办法找回,但毕竟方法是很麻烦的,这就是为什么我们要做好代码管理。
版本控制
另一个原因是,随着我们对于小程序的改动越来越多,我们可能希望能够知道每次改动的内容是什么,或者想看一下之前的改动记录,而这都是可以通过代码管理做到的。
管理方式
个人git管理
这种方式适合于具备代码管理经验的开发者,因为git是用于代码管理的主流技术工具,许多代码项目都会在一开始就使用git工具进行初始化并进行版本管理。
微信开发者代码管理
这种方式是基于微信开发者工具实现的代码管理方式,适合于没有代码管理经验的人学习使用。我们以自己的小程序项目为例,按照 官方文档 一步步来为我们的小程序项目增加代码管理能力。
git本地初始化
首先,我们初次点击开发者工具右上角的版本管理会提示我们对项目进行git初始化
然后我们确认后,开发者工具会为我们完成小程序源码所在目录的初始化工作。
版本管理面板
在完成目录初始化后,我们可以再次点击右上角的版本管理菜单即可打开版本管理面板
这是开发者工具为我们提供的用于管理项目版本的可视化操作界面。我们可通过这个面板完成对所有文件的git操作,关于git的使用可参考 git基本操作文档 进行学习。
代码管理范围
这里我们需要搞清楚什么是需要进行代码管理的内容,比如下图中红框所选的内容对于我们是很重要的内容,因为它们包含了我们开发的页面、组件、静态资源和配置文件等等。
而对于红框以外的内容,其中node_modules是我们项目中依赖的第三方包,比如vant,miniprogram_npm的内容则是我们使用开发者工具进行npm包构建功能时所使用的,具体可参考 文档 进行了解。
对于这部分,由于我们只要在关键配置文件中指明,可以每次通过开发者工具进行生成,而且这部分是我们依赖的第三方代码,我们不会对其进行改动,所以不需要加入代码管理范围。对于不需要工具进行管理的文件,我们要在.gitignore文件中声明,这样版本管理工具才会忽略对它们的管理。
代码提交
确认了代码管理范围以后,我们就可以进行首次提交。我们点击开发者工具右上方的版本管理唤出面板,然后点击左上角的刷新按钮获得文件最新状态,接着勾选全选按钮,选中全部文件。
在下方的输入框中,我们可以填写本次提交的备注信息。
管理后台登录
然后我们介绍一下代码管理的网页后台,这里是我们管理代码存储在远端的管理后台。
你可以理解为我们使用版本管理工具既可以在本地查看我们项目中所有文件每次的修改记录,同时微信还在远端为我们提供了一片空间用于备份我们的小程序项目源码。
这样当我们使用版本管理工具将本地的小程序源码同步到远端,就不怕本地源码文件丢失或者误删了,因为我们可以随时通过版本管理工具将远端的备份拉取下来进行使用。
代码管理后台的登录方式有以上3种,我们使用任意一种打开即可。
同样地,初次登录代码管理后台也是需要进行账号初始化的,我们点击右上角头像,然后点击立即初始化账户即可看到下图设置界面。
这里我们需要为账户取一个独一无二的名称,因为会有很多开发者使用这个代码管理后台进行小程序代码的管理。
这个账号名就是我们使用的代码管理后台的用户名,这个名称要记住,因为它是登录代码管理后台的重要信息。
远程项目创建
在管理后台初始化完成后,我们需要在当前小程序默认创建好的项目中新建一个项目,用于作为我们本地小程序的远程备份。
我们可以在后台页面通过左侧的项目组菜单找到与我们当前小程序关联的项目组,点击进入后创建一个空项目,名称任意即可。
本地远程关联
接着,我们回到开发者工具,打开版本管理面板,点击设置菜单,找到远程这一项,然后添加对应的远程项目,即我们刚在网页后台创建好的空项目。
这里开发者工具会自动识别到当前小程序所在项目组的远程项目,我们直接点击即可,开发者工具会为我们自动填写项目的名称和和远程项目所在的地址。
点击确认后,我们本地的项目就与远端项目建立了关联。接着,我们还需要点击设置,进入网络和认证修改认证方式,方式如下图
这里输入的就是我们刚刚设置过的用户名和密码。
然后我们点击左上角的推送按钮即可将本地的所有在git管理范围内的文件及其提交记录都同步到远端的项目。
远程项目查看
在完成本地项目与远程项目同步后,在本地的开发者工具可以看到本地和远程的所有提交记录,并且在代码管理后天可以查看远程项目的所有文件
总结
本篇我们介绍了使用小程序版本管理工具及代码管理后台的使用,对于初次接触代码管理的开发者来说可能有点难,但使用几次以后就好了。
代码管理的价值不言而喻,对于一个小程序项目,源代码就是项目的全部,如果代码丢失会导致我们的小程序无法继续更新,所以做好代码管理非常重要。另外,利用git管理项目,可以更加方便地查看我们每次对于项目文件的修改,这对于后续我们对小程序的不断修改无疑是一个很好的帮助。