微信小程序如何使用 Git 實現版本管理和協作開發

2020-12-18 開源中國

前言

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

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

環境準備

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

由於目前Git管理功能的支持尚在公測階段，故本文將使用微信Web開發者工具 Beta版本作為示例。

訪問 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 即可下載 微信Web開發者工具Beta版本（下文以微信Web開發者工具簡稱代替）

創建小程序項目

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

創建完成後，得到了初始化後的項目。

創建遠程倉庫

在 https://gitee.com 上登錄自己的碼雲帳號，在右上角新建按鈕選擇「新建項目」。填寫相應的項目倉庫信息。

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

創建並初始化完遠程倉庫後，我們得到了一個空白倉庫如下圖。項目的倉庫地址是：https://gitee.com/normalcoder/HelloGitee.git 接下去我們將初始化本地的Git倉庫。

初始化本地倉庫

在微信Web開發者工具中點擊面板上的「版本管理」按鈕，將彈出開發者工具中的版本管理面板。

由於是新建項目，並沒有初始化過Git倉庫，所以項目會提示初始化Git倉庫，點擊「初始化 Git 倉庫」，點擊「確認」，完成本地倉庫的初始化。

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

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

配置倉庫信息

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

$ git config --global user.name "用戶名"$ git config --global user.email "郵箱"
需要注意的是：此處配置的郵箱名需要和 碼雲 https://gitee.com 上的郵箱保持一致，才能保證提交後能統計到Git的提交貢獻信息。
切換到倉庫設置的「遠程」選項卡，這時候會發現提示「未找到遠程倉庫信息」，點擊「添加」，將前面創建的遠程倉庫地址填進去，倉庫名稱此處命名為「master」，可自行命名。
添加完成後即可看到項目中的遠程分支信息。
推送代碼到遠程倉庫
點擊操作面板上的「推送按鈕」，在彈出窗口選擇「推送到新的遠程倉庫分支」，名稱填寫「master」，表示推送到遠程倉庫的master分支，然後點擊「確定」。
推送完成後，我們可以順利的看到「遠程倉庫」下出現了分支信息。訪問碼雲上的倉庫，也能看到推送過去的信息。此時我們已經完成了代碼從本地倉庫到遠程倉庫到推送。
注意事項 和 身份授權設置
在推送的時候如果遇到了提示推送失敗，需要檢查用戶授權，表示可能微信Web開發者工具並沒有讀取到本地用戶的ssh授權配置，需要在開發工具中設置用戶的授權信息。
初始化完成後，依次點擊「工作空間」->「設置」->「網路與認證」->「認證方式」，可以選擇遠程倉庫的認證方式，默認為「自動」。
選擇「輸入用戶名和密碼」，在下方輸入碼雲的帳號和密碼後，再次執行推送操作即可。
修改並提交代碼
接下來我們來修改我們的項目代碼。
點擊開發工具面板的「版本管理」按鈕，關閉「版本管理」面板，打開「pages/index/index.wxml」，修改其中內容「獲取頭像暱稱」為「我的第一次修改提交」，保存。
再次切換到「版本管理」面板，可以看到當前本地分支有一個文件等待提交，選中並勾選文件，可以查看當前文件內發生的改動。
在下方提交框填寫提交的備註信息，點擊「提交」，將代碼提交到本地倉庫主幹分支上。提交後，可以在本地倉庫分支上查看提交記錄。
接下去我們再次將代碼從本地分支推送到遠程倉庫。點擊操作面板上的「推送按鈕」，在彈出窗口選擇「推送到一下遠程倉庫分支」，選擇一存在的遠程master倉庫的master分支，然後點擊「確定」。
推送完成後，即可在碼雲對應的倉庫主頁看到提交的代碼變更。
總結
在上面的操作中，我們通過微信Web開發者工具的版本管理功能，對小程序的代碼進行了版本的管理控制，並提交到了遠程的Git倉庫中。
在實際的項目開發中，我們還可以充分利用Git在版本管理和協作上的特性，靈活的和他人進行協作，進而規範代碼管理，更高效的進行協作開發。

相關焦點

  • 微信小程序該如何開發？
    微信小程序是一種基於微信公眾平臺，且不需要下載安裝就可以使用的應用，它實現了應用「觸手可及」的夢想，用戶通過微信掃一掃或搜一下即可打開應用。那麼小程序該如何開?小程序是依託微信而生的，而微信屬於強社交平臺，所以其小程序自帶的一個天然強社交屬性。同時通過觀察小程序的設計，可以發現微信官方在分享這一功能上做了很大的創新，其不再局限於公眾號類的內容共享，更多的是一種全新的協作方式。
  • 團隊協作開發,你需要知道這些git操作
    目錄Git和簡介什麼是Git如何安裝Git基礎操作初始化倉庫克隆倉庫查看分支切換分支查看文件狀態忽略文件暫存更改提交更改推送更改拉取更改創建標籤進階操作創建分支推送新分支到伺服器合併分支解決衝突查看衝突取消合併刪除分支查看提交記錄高階操作再次提交撤回提交查看提交詳情打包倉庫遠程伺服器管理合併兩個不同倉庫Git簡介什麼是Git？
  • 微信小程序開發系列一：微信小程序的申請和開發環境的搭建
    我最近也剛剛開始微信小程序的開發，想把我自學的一些心得寫出來分享給大家。這是第一篇，從零開始學習微信小程序開發。主要是小程序的註冊和開發環境的搭建。這裡需要使用身份證號碼和手機驗證碼進行登記。登記完畢之後，就可以進入微信開發者工具了。我選擇的是小程序項目：這是我註冊的用於學習目的的微信小程序：在開發管理->開發設計菜單裡，找到我們剛才註冊的微信小程序的ID：抄下來，後面要用。
  • Git版本管理完全指南—學好Git一文足矣
    1. git push origin test 推送本地分支到遠程倉庫2. git rm -r --cached 文件/文件夾名字 取消文件被版本控制3. git reflog 獲取執行過的命令4. git log --graph 查看分支合併圖5. git merge --no-ff -m '合併描述' 分支名  不使用Fast forward方式合併
  • 強烈推薦的幾個微信小程序開發小技巧，簡單又實用
    開發中可能遇到的坑以及 Tips本來想寫個小技巧的，結果我總結了一堆坑，沒上手之前完全想像不到微信小程序的開發體驗是如此之差、如此之爛，從微信開發者工具到所謂的「全新語言」，都有一種濃濃的半成品的 five 即視感，實在讓我 emmm....
  • Git教程(一)
    版本控制（Revision control）是一種在開發的過程中用於管理我們對文件、目錄或工程等內容的修改歷史，方便查看更改歷史記錄，備份以便恢復以前的版本的軟體工程技術。在處理生物信息數據的過程中，隨著內容的增多，我們面臨著如何管理不同的文件版本的挑戰，同時，我們也希望可以有一種更好的方式來團隊協作。
  • 強烈推介的幾個微信小程序開發小技巧，提效又實用
    前段時間在下開發了個微信小程序，開發過程中總結了一些我覺得對我有用的小技巧，提煉出來，相當於一個總結復盤，也希望可以幫助到大家。開發中可能遇到的坑以及 Tips本來想寫個小技巧的，結果我總結了一堆坑，沒上手之前完全想像不到微信小程序的開發體驗是如此之差、如此之爛，從微信開發者工具到所謂的「全新語言」，都有一種濃濃的半成品的 five 即視感，實在讓我 emmm.... 另外我發現網上的小程序文章大部分都是如何使用和如何避坑的實用文，而不是技巧文，這也從側面反映了小程序的坑多。
  • 版本管理工具Git,你用對了了嗎?這一招絕對好用
    對於開發人員來說，一個團隊一起開發，那麼肯定會涉及到團隊協作開發，這個時候版本管理工具就起了很大的作用，今天我們就來說說超強版本管理工具git應該怎麼用才最好，怎麼用能最大程度保證master分支代碼的乾淨。
  • 微信支持AR了 微信小程序版本WebAR即將開發
    打開APP 微信支持AR了 微信小程序版本WebAR即將開發 工程師3 發表於 2018-05-11 16:50:00 剛剛，視+AR旗下EasyAR團隊宣布正式開放WebAR，滿足開發者和市場對AR的多樣化需求，讓更多人能通過微信或者瀏覽器來使用增強現實技術。
  • 微信小程序模塊化開發實踐
    微信小程序官方文檔了解應用狀態管理方案: Redux, 也是Flux架構的具體實現了解Javascript打包工具: webpack了解ES6/7代碼轉譯(transcompile)工具: Babel, 原理大致是藉助語法分析工具(Esprima之類的), 將代碼解析成抽象語法樹, 再"重寫"成最終的代碼.
  • 1小時搞懂 Git 版本控制
    當時因為需要做一個項目，所以他教我如何使用 Git 將寫好的代碼推送到 GitHub 上，然後再從遠程倉庫拉到本地。起初因為沒有接觸過 Git，覺得這玩意很難學，又是一大堆命令需要記憶，在他教我的時候內心是牴觸的，當時覺得為什麼不把寫好的代碼發送給我呢？你是否也有過這樣的疑問呢？學習 Git 的時候，因為沒有和他認真學，在他教過我一遍之後還是一臉懵逼，寫命令的時候也是不時地回頭查看。
  • 12 款各種程式語言實現的 Git 代碼託管系統
    Gitlab —— Ruby 開發GitLab是一個利用 Ruby on Rails 開發的開源應用程式，實現一個自託管的Git項目倉庫，可通過Web界面進行訪問公開的或者私人項目。開源中國的 Git@OSC 就是基於 GitLab 開發的。
  • Git 入門指引--「就是這麼任性,我只用 Git 控制版本!」
    所以，所謂「版本控制系統」，就是來解決這類問題的。Git又是什麼？沒錯，Git 就是一個版本控制軟體。在進行軟體開發時，一個團隊的人靠使用 Git，就能輕鬆管理好項目版本，做好項目的追蹤和輔助進度控制。確切的講，Git 是一款分布式版本控制系統。
  • 微信小程序教程入門篇_微信小程序開發
    一般來說，通過認證的微信公眾號申請的小程序帳號是免費的，但是用第三方小程序生成平臺發布小程序，是需要收費的小程序費用。如果你懂代碼知識，可以使用微信官方開發者工具。這種開發方式可以讓你自由做出你想要的小程序效果，不過需要一定技術基礎，比較浪費時間。三、小程序正規價格表？
  • git commit emoji 使用指南
    README.md執行 git commit 時使用 emoji 為本次提交打上一個 "標籤", 使得此次 commit 的主要工作得以凸現，也能夠使得其在整個提交歷史中易於區分與查找。截取的 gitmoji 快照:
  • 微信小程序開發系列教程三：微信小程序的調試方法
    微信小程序開發系列教程這個教程的前兩篇文章，介紹了如何用下圖所示的微信開發者工具自動生成一個Hello World的微信小程序，並講解了這個自動生成的微信小程序的視圖開發原理。這個系列的下一步，會繼續介紹這個微信小程序的控制器index.js的實現。
  • 非程式設計師如何使用 Git——版本控制你的生活
    以及其他常用的功能的需求，優秀的協作工具（比如Google Drive）變得越來越受歡迎。然而，這些工具並沒有提供好用的版本控制功能——它們只能線性的前進或回退到某一步（版本）上。如果我們希望通過同一文件不同的版本去測試某個問題的不同方法，或者在同一個內容上做操作，同時又不希望影響到別人或創建一個新的文件，這些工具顯 然沒辦法實現。
  • 2014 年度 Git@OSC 最熱門的 50 個項目
    http://git.oschina.net/ligerui/LigerUI6. 師說CMS一款使用Java語言開發的CMS，使用了Spring MVC,Spring,MyBatis等流行框架，提供首頁大圖管理、目錄管理、文章管理和管理員管理等功能。是學習和二次開發的首選。
  • 【Git】多人協作和rebase操作
    多人協作時，大家都會往master和dev分支上推送各自的修改。當你的開發夥伴從遠程庫clone時，默認情況下，你的開發夥伴只能看到本地的master分支。可以用git branch命令查看。要在dev分支上開發，就必須創建遠程origin的dev分支到本地，就得用這個命令創建本地dev分支：$ git checkout -b dev origin/dev在dev上繼續修改，然後，時不時地把dev分支push到遠程：$ git add env.txt
  • 您必須知道的 Git 分支開發規範,附 Git 常用命令大全!
    使用 Git 添加新功能的示例如下：(dev)$: git checkout -b feature/xxx # 從dev建立特性分支(feature/xxx)$: blabla # 開發(feature/xxx)$: git add xxx(feature/xxx)$: git commit -m 'commit comment