完美體驗!在小程式中用Git無縫管理版本開發!

諾墨發表於2018-08-28

前言

在微信小程式開發的過程中,程式碼版本管理往往需要使用第三方工具進行管理。雖然微信Web開發工具提供了對Git檔案版本狀態的提示,但實際的使用體驗依然不盡人意。

隨著微信Web開發工具的更新,最新的內測版本已經支援Git的直接管理,本文將就在微信Web開發工具中使用Git做版本管理做詳細介紹。

環境準備

  • 開發環境:Mac/Windows/Linux均可
  • 開發工具:微信Web開發者工具Beta版本、Git
  • Git託管服務:碼雲

使用Git服務需要在系統上先安裝好Git,相關Git環境的安裝,詳見Git入門Git的安裝

由於目前Git管理功能的支援尚在公測階段,故本文將使用微信Web開發者工具 Beta版本作為示例。訪問 developers.weixin.qq.com/miniprogram… 即可下載 微信Web開發者工具Beta版本(下文以微信Web開發者工具簡稱代替)

建立小程式專案

使用Git版本管理,首先需要有個git的倉庫。開啟微信Web開發者工具,新建/開啟小程式的專案。此處以新建專案為例,假設專案名為HelloGitee,填寫好相應路徑和appid,選擇建立普通快速啟動模板,確認並新建專案。

完美體驗!在小程式中用Git無縫管理版本開發!

建立完成後,得到了初始化後的專案。

完美體驗!在小程式中用Git無縫管理版本開發!

建立遠端倉庫

gitee.com 上登入自己的碼雲賬號,在右上角新建按鈕選擇**「新建專案」**。填寫相應的專案倉庫資訊。

此處我們選擇使用公開的倉庫,命名路徑為「HelloGitee」,開發語言選擇「JavaScript」。確認後點選「建立」按鈕初始化遠端倉庫。

完美體驗!在小程式中用Git無縫管理版本開發!

建立並初始化完遠端倉庫後,我們得到了一個空白倉庫如下圖。專案的倉庫地址是:https://gitee.com/normalcoder/HelloGitee.git 接下去我們將初始化本地的Git倉庫。

完美體驗!在小程式中用Git無縫管理版本開發!

初始化本地倉庫

微信Web開發者工具中點選皮膚上的「版本管理」按鈕,將彈出開發者工具中的版本管理皮膚。

由於是新建專案,並沒有初始化過Git倉庫,所以專案會提示初始化Git倉庫,點選「初始化 Git 倉庫」,點選「確認」,完成本地倉庫的初始化。

這一步驟相當於執行「git init」命令。

完美體驗!在小程式中用Git無縫管理版本開發!

完美體驗!在小程式中用Git無縫管理版本開發!

初始化完成後,我們可以看到本地的倉庫和當前的Git狀態。下圖為微信Web開發者工具初始化後的版本控制皮膚。

完美體驗!在小程式中用Git無縫管理版本開發!

配置倉庫資訊

初始化完成後,依次點選「工作空間」->「設定」->「通用」->「編輯」,編輯在Git中使用的使用者名稱和郵箱。這一步相當於git config命令中的配置操作。

$ git config --global user.name "使用者名稱"
$ git config --global user.email "郵箱"
複製程式碼

需要注意的是:此處配置的郵箱名需要和 碼雲 https://gitee.com 上的郵箱保持一致,才能保證提交後能統計到Git的提交貢獻資訊。

完美體驗!在小程式中用Git無縫管理版本開發!

完美體驗!在小程式中用Git無縫管理版本開發!

切換到倉庫設定的「遠端」選項卡,這時候會發現提示「未找到遠端倉庫資訊」,點選「新增」,將前面建立的遠端倉庫地址填進去,倉庫名稱此處命名為「master」,可自行命名。

完美體驗!在小程式中用Git無縫管理版本開發!

完美體驗!在小程式中用Git無縫管理版本開發!

新增完成後即可看到專案中的遠端分支資訊。

完美體驗!在小程式中用Git無縫管理版本開發!

推送程式碼到遠端倉庫

點選操作皮膚上的「推送按鈕」,在彈出視窗選擇「推送到新的遠端倉庫分支」,名稱填寫「master」,表示推送到遠端倉庫的master分支,然後點選「確定」。

完美體驗!在小程式中用Git無縫管理版本開發!

推送完成後,我們可以順利的看到「遠端倉庫」下出現了分支資訊。訪問碼雲上的倉庫,也能看到推送過去的資訊。此時我們已經完成了程式碼從本地倉庫到遠端倉庫到推送。

完美體驗!在小程式中用Git無縫管理版本開發!

完美體驗!在小程式中用Git無縫管理版本開發!

注意事項 和 身份授權設定

在推送的時候如果遇到了提示推送失敗,需要檢查使用者授權,表示可能微信Web開發者工具並沒有讀取到本地使用者的ssh授權配置,需要在開發工具中設定使用者的授權資訊。

完美體驗!在小程式中用Git無縫管理版本開發!

初始化完成後,依次點選「工作空間」->「設定」->「網路與認證」->「認證方式」,可以選擇遠端倉庫的認證方式,預設為「自動」。

選擇「輸入使用者名稱和密碼」,在下方輸入碼雲的賬號和密碼後,再次執行推送操作即可。

完美體驗!在小程式中用Git無縫管理版本開發!

修改並提交程式碼

接下來我們來修改我們的專案程式碼。

點選開發工具皮膚的「版本管理」按鈕,關閉「版本管理」皮膚,開啟「pages/index/index.wxml」,修改其中內容「獲取頭像暱稱」為「我的第一次修改提交」,儲存。

完美體驗!在小程式中用Git無縫管理版本開發!

再次切換到「版本管理」皮膚,可以看到當前本地分支有一個檔案等待提交,選中並勾選檔案,可以檢視當前檔案內發生的改動。

完美體驗!在小程式中用Git無縫管理版本開發!

在下方提交框填寫提交的備註資訊,點選「提交」,將程式碼提交到本地倉庫主幹分支上。提交後,可以在本地倉庫分支上檢視提交記錄。

完美體驗!在小程式中用Git無縫管理版本開發!

接下去我們再次將程式碼從本地分支推送到遠端倉庫。點選操作皮膚上的「推送按鈕」,在彈出視窗選擇「推送到一下遠端倉庫分支」,選擇一存在的遠端master倉庫的master分支,然後點選「確定」。

完美體驗!在小程式中用Git無縫管理版本開發!

推送完成後,即可在碼雲對應的倉庫主頁看到提交的程式碼變更。

完美體驗!在小程式中用Git無縫管理版本開發!

總結

在上面的操作中,我們通過微信Web開發者工具的版本管理功能,對小程式的程式碼進行了版本的管理控制,並提交到了遠端的Git倉庫中。

在實際的專案開發中,我們還可以充分利用Git在版本管理和協作上的特性,靈活的和他人進行協作,進而規範程式碼管理,更高效的進行協作開發。

相關文章