近期，小程序雲開發已正式支持 CMS 內容管理系統（點此回顧），下面就以簡易商城項目為例，幫助開發者更好地了解和應用此項能力。
資源准備
進行商城搭建前，你需要了解：
技術棧
- 雲開發 CloudBase：雲原生一體化應用開發平台
- Taro：一套遵循 React 語法規范的 多端開發 解決方案
開發工具
建議提前安裝好
- 微信開發者工具
- Node LTS 版本
- VS Code 編輯器
- CloudBase VS Code 插件
需求分析
簡易商城功能包括：
- 商品列表與下單：展示商品信息，創建訂單
- 訂單列表：展示訂單列表
多端支持 - 跨平台
- 小程序
- Web
配置流程
1. 在微信開發者工具中開通雲開發，並選擇按量付費
如果你的環境是預付費，請到設置中，將支付方式轉換為按量付費。
2. 安裝 CMS 系統
（1）在更新到最新的 微信開發工具 Nightly 版本中，點擊雲開發控制台，在頂部 Tab 欄中，點擊「更多」-「內容管理」。
（2）點擊開通，勾選同意協議后，點擊確定。
（3）開通內容管理需要填寫管理員賬號，填寫賬號后，點擊「確定」完成。
（4）開通拓展需要一定時間，請耐心等待。
（5）完成后，點擊「更多」-「內容管理」，即可看到內容管理的入口和相關信息。點擊訪問地址，即可在彈出的窗口中進行內容管理的相關配置。
3. 登錄 CMS 系統，創建資源
CloudBase CMS 已經部署在當前環境下的靜態網站托管中，訪問地址的格式如下：雲開發靜態托管默認域名/部署路徑，例如：
https://envid.ap-shanghai.app.tcloudbase.com/tcb-cms/（結尾有 / 符號）。默認域名可以訪問控制台查看。
打開 CloudBase CMS 后，你需要先登錄，賬號密碼為安裝時設置的管理員賬號和密碼。
在開始管理內容數據前，我們需要先創建一個項目。CloudBase CMS 使用項目划分不同類的內容，便於區分內容數據用途，進行權限管理。
首先，我們需要點擊新建項目下方的創建新項目按鈕，創建一個名為小商店，Id 為 shop 的項目。
創建完項目后，點擊項目卡片，進入項目的管理頁面，我們會看到項目的歡迎頁面。
創建商品類型，管理商品信息：
創建一個名稱為商品的內容模型，數據庫名為 goods，即將商品數據存儲到 goods 數據集合中。如果新建內容的時候指定的集合不存在，CloudBase CMS 會自動新建集合。
在創建完內容模型后，我們會得到一個空的內容模型。
接下來，需要為商品添加商品名稱，商品圖片，價格，庫存數量等字段。
為商品添加商品名稱屬性時，由於商品名稱通常是比較短的文字，所以可以選擇單行字符串字段，點擊右側的單行字符串卡片，填寫商品名稱的字段信息。
除了基本的名稱、數據庫字段名之外，還可以為此字段添加其他的限制，如限制填寫商品名稱時的最大長度、創建商品時是否必需填寫等。
類似的，我們可以創建數字類型的價格字段以及庫存數量，圖片類型的商品圖片字段。在創建圖片字段時，考慮到商品的圖片可能有多張，我們可以打開“允許多個內容”按鈕，表明可以上傳多張圖片。
創建的 goods 數據庫集合的結構如下：
同上，類似的創建一個名稱為訂單列表，數據庫集合名為 order 的內容模型，來管理訂單信息。創建的 order 數據庫集合的結構如下：
添加一個商品：
創建項目
1、拉取模板
# 安裝 taro cli 工具
npm install -g @tarojs/cli@2.2.7
# 拉取模板
git clone https://github.com/TencentCloudBase/cloudbase-minishop.git
使用微信開發者工具導入項目，進入 client 目錄，安裝依賴：
npm i
項目目錄 cloud/functions 包含寫好的微信支付的兩個雲函數， pay 和接收支付消息推送的 pay-callback 雲函數。使用時需使用微信開發者工具上傳這兩個雲函數。
2、項目目錄
.
├── client // 小程序源碼
│ ├── config
│ └── src
│ ├── assets
│ ├── components
│ └── pages
│ ├── index
│ └── order-list
└── cloud // 雲開發相關源碼
│ └── functions
│ ├── pay
│ └── pay-callback
├── cloudbaserc.json // 雲開發配置
├── project.config.json // 小程序配置
調用微信支付實現下單
完成項目創建后，借助雲開發調用微信支付能力，來實現商城的下單流程。
- 小程序調用雲函數，在雲函數中調用統一下單接口，參數中帶上接收異步支付結果的雲函數名和其所在雲環境 Id
const cloud = require("wx-server-sdk");
const res = await cloud.cloudPay.unifiedOrder({
envId: '',
subMchId: '',
body: "商品名",
totalFee: 100,
outTradeNo: '訂單號',
spbillCreateIp: "127.0.0.1",
functionName: "pay-callback"
});
// 返回 res.payment
支付結果回調的雲函數必須返回如下一個對象，否則會視為回調不成功，雲函數會收到重復的支付回調。
{
errcode: '',
errmsg: '',
}
- 統一下單接口返回的成功結果對象中有 payment 字段，該字段即是小程序端發起支付的接口 wx.requestPayment 所需的所有信息
- 小程序端拿到雲函數結果，調用 wx.requestPayemnt 發起支付
wx.requestPayment({
...payment,
success (res) { },
fail (res) { }tt
})https://docs.cloudbase.net/
- 支付完成后，在統一下單接口中配置的雲函數將收到支付結果通知。
產品介紹
雲開發（Tencent CloudBase，TCB）是騰訊雲提供的雲原生一體化開發環境和工具平台，為開發者提供高可用、自動彈性擴縮的后端雲服務，包含計算、存儲、托管等serverless化能力，可用於雲端一體化開發多種端應用（小程序，公眾號，Web 應用，Flutter 客戶端等），幫助開發者統一構建和管理后端服務和雲資源，避免了應用開發過程中繁瑣的服務器搭建及運維，開發者可以專注於業務邏輯的實現，開發門檻更低，效率更高。