小程式雲開發專案的建立與配置

奈何緣淺發表於2021-06-16

要開始小程式雲開發，首先就需要先註冊一個小程式，開通雲開發服務，然後下載開發者工具和翻閱小程式開發與雲開發的技術文件。除此之外，還需要在建立雲開發專案時，注意一些配置的細節。

一 註冊微信小程式

小程式的註冊非常方便，開啟小程式註冊頁面，按照要求填入個人的資訊，驗證郵箱和手機號，掃描二維碼繫結你的微訊號即可，3分鐘左右的時間即可搞定。

註冊頁面：小程式註冊頁面

註冊小程式時不能使用註冊過微信公眾號、微信開放平臺的郵箱哦，也就是需要你使用一個其他郵箱才行。小程式和微信公眾號的登入頁都是同一個頁面，他們會根據你的不同的註冊郵箱來進行跳轉。

當我們註冊成功後，就可以自動登入到小程式的後臺管理頁面啦，如果你不小心關掉了後臺頁面，也可以點選小程式後臺管理登入頁進行登入。進入到小程式的後臺管理頁後，點選左側選單的開發進入設定頁，然後再點選開發設定，在開發者ID裡就可以看到AppID(小程式ID)，這個待會我們有用。

注意小程式的ID（AppID）不是你註冊的郵箱和使用者名稱，你需要到後臺檢視才行哦~

二 開發者工具與雲開發文件

1、開發者工具的下載與安裝

大家可以根據自己的電腦作業系統來下載相應的版本，一般選擇穩定版 Stable Build的開發者工具。但是如果你想嘗試小程式或者雲開發釋出的新功能，建議選擇下載預釋出版RC Build和開發版Nightly Build。

開發者工具：小程式開發者工具下載地址

由於小程式以及雲開發在不斷新增功能，更新非常頻繁，而它的很多更新與開發者工具有著非常緊密的聯絡，所以要確保自己的開發者工具是最新的。

我們可以在開發者工具的頂部看到當前開發者工具的版本號，注意版本號裡包含著日期，比如1.04.2008042，這裡20是2020年，0804是8月4日的版本，如果你的版本號太低注意及時更新。
開發者工具版本號

2、雲開發文件

和學習任何程式設計一樣，官方技術文件都是最值得閱讀的參考資料。技術文件大家先只需要花五分鐘左右的時間瞭解大致的結構即可，然後按照我們的教學步驟再來翻閱具體的知識細節。官方的技術文件過於全面而且詳細，對於初學者或者零基礎的朋友來說，我們會引導大家如何循序漸進的學習文件裡的技術知識。小程式、雲開發的功能更新非常頻繁，很多網上的教程內容都比較過時，而只有技術文件才是同步到最新的。無論你是初學者還是高手，技術文件都是我們技術開發的基礎與落腳點，常讀常新。

技術文件：雲開發官方文件

三 建立雲開發模板小程式

下載安裝完小程式開發者工具之後，我們使用微信掃碼登入開發者工具，然後使用開發者工具新建一個小程式的專案：

  • 專案名稱：這個可以根據自己的需要任意填寫；
  • 目錄：大家可以先在電腦上新建一個空資料夾，然後選擇它；
  • AppID：就是之前我們找到的AppID(小程式ID)（也可以下拉選擇AppID），這裡不能使用測試號哦；
  • 開發模式為小程式（預設）；
  • 後端服務選擇小程式·雲開發

建立雲開發模板小程式

點選新建確認之後就能在開發者工具的模擬器裡看到雲開發QuickStart小程式，在編輯器裡看到這個小程式的原始碼。

接下來，我們點選開發者工具的工具欄裡的預覽圖示，就會彈出一個二維碼，使用微信掃描這個二維碼就能在手機裡看到這個小程式啦。如果你沒有使用微信登入開發者工具，以及你的微信不是該小程式的開發者是沒法預覽的哦。

建立雲開發模板小程式

在手機裡（或模擬器）操作這個小程式，把小程式裡的每個按鍵都點一遍，看看會有什麼反應。我們會發現很多地方都會顯示“呼叫失敗”等，這非常正常，我們接下來會通過一系列的操作讓小程式不報錯。

四 雲開發專案初始化

1、開通雲開發

點選微信開發者工具的“雲開發”圖示（在偵錯程式圖示的右邊），在彈出框裡點選“開通”，同意協議後，會彈出建立環境的對話方塊。這時會要求你輸入環境名稱，以及當前雲開發的基礎環境配額（建議選擇“按量付費”，或者預設即可）。

建議你環境名稱可以使用xly，當你的雲開發環境出現問題的時候，你可以提供你的環境ID，雲開發團隊會有專人為你解答。

按照對話方塊提示的要求填寫完之後，點選建立，會初始化環境，環境初始化成功後會自動彈出雲開發控制檯，這樣我們的雲開發服務就開通啦。大家可以花兩分鐘左右的時間熟悉一下雲開發控制檯的介面。

如果你的小程式開發者工具看不到“雲開發”的圖示或開通不了、打不開雲開發服務，說明你沒有填入相應的appid（比如你填的appid是測試號，或者其他人的小程式的appid），或者你沒有掃描登陸微信開發者工具，如果還是有問題，建議你點選清理快取–全部清除，重啟開發者工具，再掃碼登陸與填寫appid。

2、找到雲開發的環境ID

點選雲開發控制檯視窗裡的設定圖示，在環境變數的標籤頁找到環境名稱和環境ID。

使用者在開通雲開發之後就建立了一個雲開發環境，微信小程式可擁有最多兩個環境，每個環境都對應一整套獨立的雲開發資源，包括資料庫、雲端儲存、雲函式、靜態託管等，各個環境是相互獨立的。每個環境都有一個唯一的環境ID（環境名稱不唯一）。

雲開發環境ID

注意環境名稱與環境ID的區別，尤其是環境ID在書寫時要注意格式，建議在後面的填寫時使用複製貼上的方式。我們點選環境名稱的下拉三角可以切換雲開發的環境。

3、指定開發者工具的雲開發環境

當雲開發服務開通後，我們可以在小程式原始碼cloudfunctions資料夾名看到你的環境名稱。如果在cloudfunctions資料夾名顯示的不是環境名稱，而是“未指定環境”，可以滑鼠右鍵該資料夾，可以看到彈窗的第一項為“當前環境”，有個小三角，在這裡可以選擇或切換已經建好的雲開發環境。如果環境為空白，重啟開發者工具，再來選擇。

注意這裡要指定雲開發的環境

4、指定小程式的雲開發環境

在開發者工具中開啟原始碼資料夾miniprogram裡的app.js檔案，找到如下程式碼：

wx.cloud.init({
  // env 引數說明：
  //   env 引數決定接下來小程式發起的雲開發呼叫（wx.cloud.xxx）會預設請求到哪個雲環境的資源
  //   此處請填入環境 ID, 環境 ID 可開啟雲控制檯檢視
  //   如不填則使用預設環境（第一個建立的環境）
  // env: 'my-env-id',
  traceUser: true,
})

在 env: 'my-env-id'處改成你的環境ID，注意需要填入的是你的環境ID而不是環境名稱哦，結果如下：

wx.cloud.init({
  env: 'xly-xrlur',
  traceUser: true,
})

因為雲開發可以建立多個環境，比如微信小程式就可以建立兩個免費的雲開發環境，一個用於測試，一個用於正式釋出。如果你沒有在小程式端指定環境，會預設選擇為你建立的第一個雲開發環境。我們可以通過修改env的引數來切換小程式端用來呼叫的雲開發環境。

雲開發能力全域性只需要初始化一次即可，這裡的traceUser屬性設定為true，會將使用者訪問記錄到使用者管理中，在雲開發控制檯的運營分析—使用者訪問裡可以看到訪問記錄。

5、基礎庫版本與開發者工具設定

除了開發者工具的版本，小程式以及雲開發的能力都非常依賴基礎庫，如果開發者工具的基礎庫版本過低，就會出現很多API會報錯；基礎庫的版本和微信iOS、安卓、PC和Mac的終端是有對應關係的，高版本的基礎庫無法相容低版本的微信客戶端，我們可以在開發者工具看到不同的基礎庫使用者終端的佔比情況。

點選開發者工具右上角的詳情，在本地設定可以看到除了可以設定基礎庫以外，還有一些其他設定。 基礎庫版本與開發者工具設定

  1. 如果是為了體驗功能，選擇基礎庫時當然是越高越好，更高版本的基礎庫意味著更多的功能支援以及更少的bug，基礎庫新增了哪些功能，做了哪些改動，可以閱讀了解一下基礎庫的更新日誌；不過實際使用時，要考慮使用者的分佈情況；
  2. 增強編譯可以增強ES6轉ES5的能力，小程式端就能支援大部分es6等一些JavaScript的語法，比如表常用的async/await；
  3. 建議在學習時，勾選“不校驗合法域名、業務域名、TLS版本以及HTTPS證照”，讓小程式支援除錯外部連結；

資源傳送門

  • 關注【做一個柔情的程式猿】公眾號
  • 在【做一個柔情的程式猿】公眾號後臺回覆 【python資料】【2020秋招】 即可獲取相應的驚喜哦！
  • 自己搭建的部落格地址：夢魘回生的部落格

「❤️ 感謝大家」

  • 點贊支援下吧，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
  • 歡迎在留言區與我分享你的想法，也歡迎你在留言區記錄你的思考過程

相關文章