微信小程序如何使用 Git 实现版本管理和协作开发
<div id="articleContent" class="content"><h3>前言</h3>
<p>在微信小程序开发的过程中，代码版本管理往往需要使用第三方工具进行管理。虽然<code>微信Web开发工具</code>提供了对<code>Git</code>文件版本状态的提示，但实际的使用体验依然不尽人意。</p>
<p>随着<code>微信Web开发工具</code>的更新，最新的内测版本已经支持<code>Git</code>的直接管理，本文将就在<code>微信Web开发工具</code>中使用<code>Git</code>做版本管理做详细介绍。</p>
<h3>环境准备</h3>
<ul class=" list-paddingleft-2">
<li>
<p>开发环境：Mac/Windows/Linux均可</p>
</li>
<li>
<p>开发工具：微信Web开发者工具Beta版本、Git</p>
</li>
<li>
<p>Git托管服务：码云</p>
</li>
</ul>
<p>使用<code>Git</code>服务需要在系统上先安装好<code>Git</code>，相关<code>Git</code>环境的安装，详见Git入门和Git的安装。</p>
<p>由于目前<code>Git</code>管理功能的支持尚在公测阶段，故本文将使用<code>微信Web开发者工具 Beta版本</code>作为示例。</p>
<p>访问 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 即可下载 <code>微信Web开发者工具Beta版本</code>（下文以<code>微信Web开发者工具</code>简称代替）</p>
<h3>创建小程序项目</h3>
<p>使用<code>Git</code>版本管理，首先需要有个git的仓库。打开<code>微信Web开发者工具</code>，新建/打开小程序的项目。此处以新建项目为例，假设项目名为<code>HelloGitee</code>，填写好相应路径和<code>appid</code>，选择<code>建立普通快速启动模板</code>，确认并新建项目。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_2Zwx.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346810382433.jpg"></p>
<p>创建完成后，得到了初始化后的项目。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_NN90.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346813000993.jpg"></p>
<h3>创建远程仓库</h3>
<p>在 https://gitee.com 上登录自己的码云账号，在右上角新建按钮选择「新建项目」。填写相应的项目仓库信息。</p>
<p>此处我们选择使用公开的仓库，命名路径为「HelloGitee」，开发语言选择「JavaScript」。确认后点击「创建」按钮初始化远程仓库。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_E13H.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346817972319.jpg"></p>
<p>创建并初始化完远程仓库后，我们得到了一个空白仓库如下图。项目的仓库地址是：<code>https://gitee.com/normalcoder/HelloGitee.git</code> 接下去我们将初始化本地的<code>Git</code>仓库。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_RIwz.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346819340476.jpg"></p>
<h3>初始化本地仓库</h3>
<p>在<code>微信Web开发者工具</code>中点击面板上的「版本管理」按钮，将弹出开发者工具中的版本管理面板。</p>
<p>由于是新建项目，并没有初始化过<code>Git</code>仓库，所以项目会提示初始化<code>Git</code>仓库，点击「初始化 Git 仓库」，点击「确认」，完成本地仓库的初始化。</p>
<p>这一步骤相当于执行「git init」命令。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_11eC.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346822736932.jpg"></p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_9g2X.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346827485051.jpg"></p>
<p>初始化完成后，我们可以看到本地的仓库和当前的Git状态。下图为<code>微信Web开发者工具</code>初始化后的版本控制面板。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_lWdQ.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346831910870.jpg"></p>
<h3>配置仓库信息</h3>
<p>初始化完成后，依次点击「工作空间」->「设置」->「通用」->「编辑」，编辑在<code>Git</code>中使用的用户名和邮箱。这一步相当于<code>git config</code>命令中的配置操作。</p>
<pre class="cke_widget_element" data-cke-widget-data="%7B%22code%22%3A%22%24%20git%20config%20--global%20user.name%20%5C%22%E7%94%A8%E6%88%B7%E5%90%8D%5C%22%5Cn%24%20git%20config%20--global%20user.email%20%5C%22%E9%82%AE%E7%AE%B1%5C%22%5Cn%22%2C%22classes%22%3Anull%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet">$ git config --global user.name "用户名"
$ git config --global user.email "邮箱"</pre>
<p> </p>
<p>需要注意的是：此处配置的邮箱名需要和 码云 https://gitee.com 上的邮箱保持一致，才能保证提交后能统计到Git的提交贡献信息。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_v3tj.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346833423007.jpg"></p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_BXYm.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346836186575.jpg"></p>
<p>切换到仓库设置的「远程」选项卡，这时候会发现提示「未找到远程仓库信息」，点击「添加」，将前面创建的远程仓库地址填进去，仓库名称此处命名为「master」，可自行命名。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_sf2K.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346836692763.jpg"></p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_ncMu.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346838356910.jpg"></p>
<p>添加完成后即可看到项目中的远程分支信息。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_XeeA.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346840837602.jpg"></p>
<h3>推送代码到远程仓库</h3>
<p>点击操作面板上的「推送按钮」，在弹出窗口选择「推送到新的远程仓库分支」，名称填写「master」，表示推送到远程仓库的<code>master</code>分支，然后点击「确定」。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_YZ5z.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346840245468.jpg"></p>
<p>推送完成后，我们可以顺利的看到「远程仓库」下出现了分支信息。访问<code>码云</code>上的仓库，也能看到推送过去的信息。此时我们已经完成了代码从本地仓库到远程仓库到推送。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_cFZw.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346849002576.jpg"></p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_mz9n.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346849153525.jpg"></p>
<h3>注意事项 和 身份授权设置</h3>
<p>在推送的时候如果遇到了提示推送失败，需要检查用户授权，表示可能<code>微信Web开发者工具</code>并没有读取到本地用户的ssh授权配置，需要在开发工具中设置用户的授权信息。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_KkLJ.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346846113342.jpg"></p>
<p>初始化完成后，依次点击「工作空间」->「设置」->「网路与认证」->「认证方式」，可以选择远程仓库的认证方式，默认为「自动」。</p>
<p>选择「输入用户名和密码」，在下方输入码云的账号和密码后，再次执行推送操作即可。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_HMuk.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346850785533.jpg"></p>
<h3>修改并提交代码</h3>
<p>接下来我们来修改我们的项目代码。</p>
<p>点击开发工具面板的「版本管理」按钮，关闭「版本管理」面板，打开「pages/index/index.wxml」，修改其中内容「获取头像昵称」为「我的第一次修改提交」，保存。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_Xlwc.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346853890725.jpg"></p>
<p>再次切换到「版本管理」面板，可以看到当前本地分支有一个文件等待提交，选中并勾选文件，可以查看当前文件内发生的改动。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084828_GFV9.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346855980791.jpg"></p>
<p>在下方提交框填写提交的备注信息，点击「提交」，将代码提交到本地仓库主干分支上。提交后，可以在本地仓库分支上查看提交记录。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084829_lohx.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346857820900.jpg"></p>
<p>接下去我们再次将代码从本地分支推送到远程仓库。点击操作面板上的「推送按钮」，在弹出窗口选择「推送到一下远程仓库分支」，选择一存在的远程<code>master</code>仓库的<code>master</code>分支，然后点击「确定」。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084829_Do6n.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346858476723.jpg"></p>
<p>推送完成后，即可在码云对应的仓库主页看到提交的代码变更。</p>
<p><img src="https://static.oschina.net/uploads/img/201808/20084829_DroO.jpg" alt="" src="http://mweb.normalcoder.com/2018-08-19-15346860228975.jpg"></p>
<h3>总结</h3>
<p>在上面的操作中，我们通过<code>微信Web开发者工具</code>的版本管理功能，对小程序的代码进行了版本的管理控制，并提交到了远程的Git仓库中。</p>
<p>在实际的项目开发中，我们还可以充分利用<code>Git</code>在版本管理和协作上的特性，灵活的和他人进行协作，进而规范代码管理，更高效的进行协作开发。</p>
</div>
<div class="news-links">
<h3>相关链接</h3>
<ul class="link-list">
<li>Gitee 的详细介绍：点击查看</li>
<li>Gitee 的下载地址：点击下载</li>
</ul>
</div>
</div>
<div id="MySignature" role="contentinfo">
作者：子钦加油<br>
出处：https://www.cnblogs.com/zmdComeOn/<br>
<span style="color: #DD2C2A">个性签名</span>：努力生活，努力走路<br>
阿里云拼团：https://www.aliyun.com/1111/home?userCode=f4ee1llo1核2G1M，86一年，229三年；2核4G5M，799三年；2核8G5M，1399三年<br>
腾讯云三月采购计划特价：https://cloud.tencent.com/act/cps/redirect?redirect=1073&cps_key=15d0b1673287c43fe946626d9f4e2eee&from=console1核2G1M，88一年；1核2G1M，268三年；2核4G5M，998一年；4核8G5M，2888元三年<br>
<div class="div_masklayer" id="div_masklayer" style="display: none;"></div>
<div class="div_popup" id="Div_popup" style="display: none; margin-top: -386px;">
<img class="img_zfb" id="img_zfb" src="https://images.cnblogs.com/cnblogs_com/zmdComeOn/1584136/o_191107040714WechatIMG85.jpeg">
<p class="mid">您的资助是我最大的动力！<br>金额随意,欢迎来赏！</p>
<img class="img_zfb" id="img_wx" src="https://images.cnblogs.com/cnblogs_com/zmdComeOn/1584136/o_191107040644WechatIMG84.png">
</div>
<div class="blogds">如果，想给予我更多的鼓励，<span class="bold">求打</span> </div><br><br>
来源：https://www.cnblogs.com/zmdComeOn/p/11749280.html
頁:
[1]