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

奈何緣淺發表於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秋招】 即可獲取相應的驚喜哦!
  • 自己搭建的部落格地址:夢魘回生的部落格

「❤️ 感謝大家」

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

相關文章