開發環境搭建

使用自己的AppID新建小程序項目，后端服務選擇小程序·云開發，點擊新建，完成項目新建。

新建成功后跳轉到開發者工具界面

新建后，微信端為我們提供了一個參考的模板程序，這里我們自己來創建各個所需的文件與代碼，所以刪除所有不需要的文件，刪除cloudfunctions、miniprogram/images、miniprogram/pages文件下所有文件，同時也刪除style文件和刪除app.json中原始的頁面配置。

此時編譯下方控制臺會報“VM8100:5 appJSON["pages"] 需至少存在一項”錯誤，因為app.json中未配置任何頁面路徑，下面我們來對app.json進行配置。

{ "cloud": true, "pages": [ "pages/index/index", "pages/detonation/detonation", "pages/user/user" ],

“cloud”: true表示讓云能力可以在所有基礎庫中使用，在頁面路徑列表pages下加入三個Tab頁面路徑，在window中設置全局的默認窗口樣式，通過tabBar設置底部tab欄的樣式，配置完成后點擊編譯，開發工具會自動生成三個頁面的文件夾以及相關文件。

"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#FF3333", "navigationBarTitleText": "我要點爆", "navigationBarTextStyle": "white", "backgroundColor": "#FF3333" }, "tabBar": { "backgroundColor": "#F2F2F2", "color": "#6B6B6B", "selectedColor": "#FF0000", "list": [  {  "pagePath": "pages/index/index",  "text": "世界",  "iconPath": "/images/shi.png",  "selectedIconPath": "/images/shi1.png"  },  {  "pagePath": "pages/detonation/detonation",  "text": "點爆",  "iconPath": "/images/bao2.png",  "selectedIconPath": "/images/bao1.png"  },  {  "pagePath": "pages/user/user",  "text": "我的",  "iconPath": "/images/wo1.png",  "selectedIconPath": "/images/wo.png"  } ] }, "sitemapLocation": "sitemap.json"}

配置成功后頁面結構與效果

創建數據庫環境

設置環境名稱，環境名稱可以根據自己需求設置，這里設置與項目名相同dbx，下方的環境ID會自動生成，無需修改，點擊確定完成創建。

創建成功后跳轉云開發控制臺頁面