簡介：零基礎開發你自己的支付寶小程式，教程在手不迷路，從入門到精通，還有詳細程式碼在裡面哦~
《15分鐘打造你自己的小程式》獨家電子書上線啦！零基礎開發你自己的支付寶小程式，手把手教你從入門到精通的寶典。ToDo待辦事項小程式、個人相簿小程式、花唄支付小程式、運動步數小程式、雲筆記小程式，五大實操小程式雲讓你更懂雲上生活~
PC端開啟 https://developer.aliyun.com/topic/download?id=149 可直接下載！
目錄
精彩導讀
什麼是小程式雲？
小程式雲是阿里雲面向小程式場景提供的一站式雲服務，幫助開發者實現一雲多端的業務戰略。開發者可透過小程式雲支撐各類小程式前端，在一朵雲內實現統一的資源管理、統一的資料運營和統一的業務設計。
小程式雲提供小程式 Serverless 和小程式雲應用服務，幫助小程式開發者降低研發和運維成本。
試讀：個人相簿小程式開發
本教程介紹如何使用小程式Serverless服務開發一款簡單的個人相簿小程式。圖片儲存，是所有應用開發裡最常見的場景之一。藉助小程式雲開發能力，可以提升功能開發效率，提高資料隱私保護能力。
步驟一：開發支付寶小程式
請參考以下步驟，開發支付寶小程式專案：
- 開啟小程式開發者工具。
- 在左側導航欄選擇支付寶 > 小程式。
- 單擊模板選取，然後單擊開放能力頁籤，選擇個人相簿模板並單擊下一步。
- 設定專案名稱和路徑，然後單擊完成。
- 開啟手機支付寶App掃描彈出的登入二維碼。登入後，選擇已建立的支付寶小程式應用完成關聯，然後單擊確定。
- 當提示繫結阿里雲賬號時，單擊前往繫結阿里雲賬號，然後在開啟的驗證頁面選擇一種賬號驗證方式並完成驗證。或右鍵單擊左側的server|未關聯目錄，然後選擇關聯Serverless。
說明：確保您要繫結的阿里雲賬號已關聯支付寶賬號。如果尚未關聯，在阿里雲賬號頁面，單擊第三方賬號繫結繫結支付寶。
- 在專案檔案列表中找到app.js檔案，配置以下資訊，然後儲存。
- appId是小程式的ID。您可以在螞蟻金服開放平臺的支付寶小程式頁面檢視App ID。
- spaceId、clientSecret和endpoint在小程式Serverless控制檯建立服務空間後可以獲得。
步驟二：除錯小程式
開啟小程式模擬器，在彈出的服務授權框中仔細閱讀《使用者授權協議》後選擇同意。
小程式Serverless程式碼詳解
- 初始化
在使用小程式Serverless服務前，需要您在小程式中安裝小程式Serverless客戶端SDK並初始化。小程式Serverless客戶端SDK的更多資訊請參見安裝客戶端SDK2.2版本。
// client/app.js
import MPServerless from '@alicloud/mpserverless-sdk';
const mpserverless = new MPServerless({
uploadFile: my.uploadFile,
request: my.request,
getAuthCode: my.getAuthCode,
}, {
appId: ' ', // 小程式應用標識
spaceId: ' ', // 服務空間標識
clientSecret: ' ', // 服務空間 secret key
endpoint: ' ' // 服務空間地址，從小程式Serverless控制檯處獲得
}); - 頁面載入時新增授權
在呼叫小程式Serverless服務前，需要先呼叫authorize介面請求授權，支付寶小程式的授權請求引數authProvider應為alipay_openapi， 更多authorize介面資訊請參見authorize。
// client/app.js
async onSubmit() {
await mpserverless.user.authorize({
authProvider: 'alipay_openapi',
// authType: 'anonymous'
})
}, - 全域性使用serverless
在小程式Serverless客戶端SDK初始化完成後，可以將例項化的mpserverless物件放入App全域性物件中，這樣SDK就可以全域性使用了。
// client/app.js
App({
mpserverless,
}); 當需要使用SDK時只需從全域性物件中獲取mpserverless，就可以呼叫了。
以下示例實現了在其他檔案中呼叫小程式Serverless的資料庫服務，向files集合中插入了一條資料。
// 其他檔案呼叫
const { mpserverless } = getApp()
// 新增檔案資料
mpserverless.db.collection('files').insertOne( { name: '資料表名稱', userId: '資料表ID' }) - 讀取檔案資料
以下程式碼實現了在頁面載入完成後，呼叫find介面請求資料庫，查詢當前使用者下的相簿資訊，更多find介面資訊請參見find。
async onReady() {
const result = await mpserverless.db.collection('files').find({ userId: '使用者id' })
this.setData({
files: result.result || [],
})
}, - 選擇本地圖片
以下程式碼實現了呼叫小程式的my.chooseImage介面拍照或從本地相簿中選擇圖片，然後呼叫file.uploadFile介面將圖片上傳至小程式Serverless的檔案服務中。更多資訊請參見my.chooseImageuploadFile。
attach() {
// 選取照片
my.chooseImage({
chooseImage: 1,
success: res => {
const path = res.apFilePaths[0];
const options = {
filePath: path,
headers: {
contentDisposition: 'attachment',
},
};
// 上傳圖片
mpserverless.file.uploadFile(options).then((image) => {
const { imgs } = this.data
imgs.push(image.fileUrl)
this.setData({
imgs,
});
}).catch(console.log);
},
});
}, - 將圖片儲存到資料庫
以下程式碼實現了將包括圖片的上傳路徑、圖片描述等圖片資訊儲存到雲資料庫photos集合中。
async submit() {
const obj = { urls: '圖片路徑', details: '圖片描述', fileId: '檔案id' }
await mpserverless.db.collection('photos').insertOne(obj)
my.navigateBack()
},版權宣告：本文內容由阿里雲實名註冊使用者自發貢獻，版權歸原作者所有，阿里雲開發者社群不擁有其著作權，亦不承擔相應法律責任。具體規則請檢視《阿里雲開發者社群使用者服務協議》和《阿里雲開發者社群智慧財產權保護指引》。如果您發現本社群中有涉嫌抄襲的內容，填寫侵權投訴表單進行舉報，一經查實，本社群將立刻刪除涉嫌侵權內容。
