小程序云開發實例教程，微信小程序云開發操作全解

“云開發自帶的Demo例程，了解一下！”

1 開始第一個小程序

安裝完微信開發者程序以后，打開軟件。

因為后續將要開發的會議室預定小程序要用到云開發，所以在新建項目的時候勾選上。

新建完以后自動生成云開發的基礎Demo。最左側為模擬器生成的模擬頁面，中間為目錄結構展示，最右側為當前打開文件內容。脫機調試的話直接在模擬頁面上進行操作即可，例如你想確定“上傳圖片”點擊后的響應，則直接點擊“上傳圖片”就可以模擬手機端點擊操作。

如果需要實際在真機中測試，可以選擇“真機調試”，會彈出二維碼，供你的手機掃碼調試。

2 小程序是如何顯示和與用戶交互的

因為之前都是做嵌入式軟件開發的，所以在做系列一的時候，還未完全理解小程序的頁面是如何顯示出來并且響應用戶行為的。因此在本章節中提下我對這塊的理解。

如果之前有從事過網頁設計開發，可略過此章節。

重新貼下系列一中歸納的文件基礎結構。

之前看到網上歸納了HTML、CSS、JavaScript之間的關系，原文鏈接如下。

同樣的，以此去理解WXML（HTML）、WXSS（CSS）、JavaScript之間的關系。

“HTML就像一個人的骨骼、器官，而CSS就是人的皮膚，有了這兩樣也就構成了一個植物人了，加上javascript這個植物人就可以對外界刺激做出反應，可以思考、運動、可以給自己整容化妝（改變CSS）等等，成為一個活生生的人”

具體而言：JavaScript是一種腳本語言，其源代碼在發往客戶端運行之前不需經過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。

舉個例子。在我們剛才創建的Demo工程中，在index.wxml中為第一欄創建了兩個Button。

第一個button描述：

這個Button的作用為獲取用戶基本信息，綁定的響應操作為onGetUserInfo函數，頭像圖片的獲取路徑定義為avatarUrl。onGetUserInfo對應到js文件的代碼為

第二個button描述：

這個button的文本為“點擊獲取 openid”，點擊以后關聯的操作為onGetOpenid。相應的js代碼如下：

具體該欄長成什么樣子，則在對應的wxss文件中做了細化了，如背景顏色，對齊，大小等。

類似的，打開其他頁面的文件，都存放了該頁面對應的代碼文件：

– Js

– Json

– Wxml

– Wxss

溫馨提示：如果之前沒有接觸過三種文件語言的語法語義，不用糾結，先按著英文單詞的意思去理解即可。

另外，在WXML文件中定義了不少組件，對于組件的標簽如果不理解的，可以參考下面鏈接中對組件的定義：

如果對js中定義的API不了解的，可以參考下面鏈接中對個API的詳細解釋：

3 云開發數據庫的操作

之前提到，接下來要開發的會議室預定系統需要用到云數據庫進行數據存儲管理。所以本階段再更深入看看這塊的內容，確保能滿足我們的需求。

云開發的基礎文檔可以通過以下鏈接查看。

數據庫的基本數據類型如下：

權限控制方式如下,可以在進入云開發的數據庫-權限設置進行修改:

另外云數據支持兩種方式進行編輯與訪問：

1. 使用數據庫API在小程序或者云函數中進行
2. 控制器后臺中直接編輯與查看

再看看開頭創建的Demo程序中數據庫的操作：

1. 點擊“前端操作數據庫”

2. 根據提示去云開發后臺新增數據庫合集-此時對應的操作方式為第二種。所謂的集合你可以理解為在電腦硬盤中創建一個文件夾，方便你進行不同類型的數據集合進行存放。

3. 刪除頁面中的注釋代碼，在剛剛創建的合集中新增一條數據庫記錄-此時對應的操作方式為第一種

所以總的來說，云開發中的數據庫操作很簡便，不僅可以滿足需求，還能夠大大簡化我們的數據操作。

另外，在搜索一些線上課程的時候，發現有個免費的課程，適合基礎入門，有興趣的可以看看。https://www.imooc.com/video/19371