支付寶小程序指南 詳解Todo示例

完成入駐與小程序創(chuàng)建后，開(kāi)始正式開(kāi)發(fā)小程序，本文檔主要以 Todo 示例 為例詳細(xì)講解文件結(jié)構(gòu)。

前端

下載并安裝小程序開(kāi)發(fā)者工具

小程序開(kāi)發(fā)者工具是輔助開(kāi)發(fā)支付寶小程序的本地應(yīng)用工具，包含本地調(diào)試、代碼編輯、真機(jī)預(yù)覽、發(fā)布等功能，覆蓋了應(yīng)用開(kāi)發(fā)的完整流程。請(qǐng)點(diǎn)此 下載 。

請(qǐng)根據(jù)操作系統(tǒng)選擇對(duì)應(yīng)的開(kāi)發(fā)工具：Windows 64 位或 MacOS。其它操作系統(tǒng)下暫時(shí)未提供開(kāi)發(fā)工具。

創(chuàng)建并體驗(yàn) Todo App 小程序

1. 打開(kāi)小程序開(kāi)發(fā)者工具，模板選取中選擇 todo 小程序。

1. 填寫(xiě) 項(xiàng)目名稱、項(xiàng)目路徑 ，點(diǎn)擊 完成 。

1. 關(guān)聯(lián)小程序。由于每個(gè)賬號(hào)可以擁有多個(gè)小程序的開(kāi)發(fā)權(quán)限，因此需要關(guān)聯(lián)后臺(tái)具體的小程序，才能決定本地代碼的上傳位置。

1. 在開(kāi)發(fā)者工具右側(cè)模擬器預(yù)覽小程序效果。至此第一個(gè)小程序已創(chuàng)建完成。

編寫(xiě)代碼

本節(jié)以 Todo App 模板小程序?yàn)槔?，介紹支付寶小程序的文件結(jié)構(gòu)，以及每種文件類(lèi)型在小程序中的作用。Todo App 是一個(gè)簡(jiǎn)單的待辦事項(xiàng)管理小程序，實(shí)現(xiàn)了用戶登錄、新增自定義待辦事項(xiàng)、劃除或恢復(fù)待辦事項(xiàng)的功能。

全局配置

• app.json 是小程序的全局配置，用于配置小程序的頁(yè)面列表、默認(rèn)窗口標(biāo)題、導(dǎo)航欄背景色等。更多配置請(qǐng)參見(jiàn) 小程序全局配置介紹。
• app.acss 定義了全局樣式，作用于當(dāng)前小程序的所有頁(yè)面。
• app.js 用于注冊(cè)小程序應(yīng)用，可配置小程序的生命周期，聲明全局?jǐn)?shù)據(jù)，調(diào)用豐富的 API，如獲取用戶授權(quán)及獲取用戶信息 API 等。

小程序頁(yè)面

此示例中有兩個(gè)頁(yè)面，Todos 頁(yè)面和 Add Todo 頁(yè)面，都位于 pages 目錄下。小程序的所有頁(yè)面路徑必須在 app.json 中申明，路徑從項(xiàng)目根目錄開(kāi)始且不能包括后綴名，pages 的第一個(gè)頁(yè)面就是小程序的首頁(yè)。

每一個(gè) 頁(yè)面由同路徑下的四種類(lèi)型文件組成，即 .json 后綴的配置文件，.axml 后綴的模版文件，.acss 后綴的樣式文件，.js 后綴的邏輯腳本文件。

todos 頁(yè)面

• todos.json：用于配置當(dāng)前頁(yè)面的窗口表現(xiàn)。此處定義了使用一個(gè)自定義組件 add-button ，指定它的組件名稱及對(duì)應(yīng)的路徑。自定義組件詳情請(qǐng)參見(jiàn) 自定義組件介紹。 頁(yè)面配置文件不是必須的。當(dāng)存在頁(yè)面配置文件時(shí)，各個(gè)頁(yè)面配置項(xiàng)會(huì)優(yōu)先于 app.json 中 window 的同名配置項(xiàng)。當(dāng)不存在頁(yè)面配置文件，則直接使用 app.json 中的默認(rèn)配置。因此，Todo List 頁(yè)面的標(biāo)題為 app.json 中指定的 defaultTitle ，即 Todo App。
• todos.axml：為頁(yè)面結(jié)構(gòu)模版文件。使用 view/、image/、text/、button/、label/、checkbox/，來(lái)搭建頁(yè)面結(jié)構(gòu)以及通過(guò) Mustache 語(yǔ)法兩對(duì)大括號(hào)（{{}}）綁定 todos 數(shù)據(jù)。
  • 綁定數(shù)據(jù)詳情請(qǐng)參見(jiàn) 數(shù)據(jù)綁定。
  • 綁定事件詳情請(qǐng)參見(jiàn) 事件介紹。
• todos.js：頁(yè)面的邏輯腳本文件，小程序頁(yè)面的邏輯代碼必需包含在 Page({}) 中?？蓪?shí)現(xiàn)
  • 監(jiān)聽(tīng)并處理頁(yè)面的生命周期函數(shù) onShowonLoad；
  • 獲取小程序?qū)嵗约捌渌?yè)面實(shí)例 getAppgetCurrentPages；
  • 聲明并處理數(shù)據(jù) data；
  • 響應(yīng)頁(yè)面交互事件，調(diào)用 API 等；
  • 這里需要注意的是 app.todos 是來(lái)自 app.js 中全局的變量定義。
• todos.acss：定義頁(yè)面局部樣式。指定 todos.axml 中不同元素的樣式，包括位置、背景顏色、字體、字體顏色等。 詳情請(qǐng)參見(jiàn) ACSS 語(yǔ)法參考。頁(yè)面的 .acss 文件不是必須的，但對(duì)于相同選擇器，頁(yè)面局部樣式會(huì)覆蓋 app.acss 全局樣式。

Add Todo 頁(yè)面

• add-todo.json 聲明自定義組件名稱和路徑；

• add-todo.axml 為頁(yè)面結(jié)構(gòu)模版文件；

此頁(yè)面的兩個(gè)核心功能為：

• 使用`` 組件接收用戶輸入。
• <add-button>是一個(gè)自定義組件，可將一些功能完整的代碼封裝為自定義組件，便于在其他地方復(fù)用。

• add-todo.js：為頁(yè)面邏輯代碼；

• add-todo.acss：同 todos.acss 用法一致，不再贅述。完成入駐與小程序創(chuàng)建后，正式開(kāi)發(fā)小程序之前需要完成以下準(zhǔn)備。

在手機(jī)上預(yù)覽小程序

1. 使用手機(jī)支付寶掃碼登錄開(kāi)發(fā)者工具，并允許關(guān)聯(lián)支付寶小程序。

1. 點(diǎn)擊開(kāi)發(fā)者工具右上角工具欄上的 預(yù)覽 按鈕，可選擇 掃碼預(yù)覽 或 自動(dòng)預(yù)覽，即可在手機(jī)上運(yùn)行和預(yù)覽小程序。

后端

在前面的 demo 中，我們開(kāi)發(fā)的小程序其實(shí)是“靜態(tài)的”，即無(wú)論用戶在 Todo App 里面添加了多少條代碼，不管完成了多少個(gè)事項(xiàng)，一旦刷新頁(yè)面就會(huì)恢復(fù)成初始狀態(tài)，不會(huì)有任何變化。

如果想要開(kāi)發(fā)“動(dòng)態(tài)”的小程序，將用戶的每一次操作進(jìn)行保存，就需要將小程序接入后端服務(wù)。

后端服務(wù)需要自行搭建，支付寶提供了 小程序云 服務(wù)可以大大降低后端的搭建成本。

自行搭建后端服務(wù)

一般來(lái)說(shuō)用戶可以通過(guò)市面上有的云服務(wù)供應(yīng)商，自行購(gòu)買(mǎi)云服務(wù)，來(lái)實(shí)現(xiàn)后端接口。

這里需要注意的是，當(dāng)后端應(yīng)用開(kāi)發(fā)完畢，需要在小程序后臺(tái)配置好 服務(wù)器域名白名單，才能夠在小程序中調(diào)用接口，如下圖。

小程序云

小程序云 是阿里云面向小程序場(chǎng)景提供的一站式云服務(wù)，幫助開(kāi)發(fā)者實(shí)現(xiàn)一云多端的業(yè)務(wù)戰(zhàn)略。開(kāi)發(fā)者可通過(guò)小程序云支撐各類(lèi)小程序前端，在一朵云內(nèi)實(shí)現(xiàn)統(tǒng)一的資源管理、統(tǒng)一的數(shù)據(jù)運(yùn)營(yíng)和統(tǒng)一的業(yè)務(wù)設(shè)計(jì)。

小程序云現(xiàn)有兩種方案供您選擇：Serverless（推薦） 和 小程序云應(yīng)用。

Serverless

阿里云小程序 Serverless 提供包括云函數(shù)、數(shù)據(jù)存儲(chǔ)、文件存儲(chǔ)等一整套后端服務(wù)。開(kāi)發(fā)者通過(guò) API 方式即可獲取云函數(shù)、數(shù)據(jù)存儲(chǔ)、文件存儲(chǔ)、音視頻、圖像處理等服務(wù)，不需要關(guān)心服務(wù)器或底層運(yùn)維設(shè)施，可以更專(zhuān)注于代碼和業(yè)務(wù)本身。

云應(yīng)用

小程序云應(yīng)用是面向小程序應(yīng)用場(chǎng)景，為開(kāi)發(fā)者提供的一鍵構(gòu)建后端應(yīng)用運(yùn)行環(huán)境、后端服務(wù)部署、運(yùn)維監(jiān)控等能力的一站式小程序部署服務(wù)。 小程序云應(yīng)用是小程序云的一個(gè)重要組成部分。小程序云是阿里云面向小程序場(chǎng)景提供的一站式云服務(wù)，幫助開(kāi)發(fā)者實(shí)現(xiàn)一云多端的業(yè)務(wù)戰(zhàn)略。開(kāi)發(fā)者可通過(guò)小程序云支撐各類(lèi)小程序前端，在一朵云內(nèi)實(shí)現(xiàn)統(tǒng)一的資源管理、統(tǒng)一的數(shù)據(jù)運(yùn)營(yíng)和統(tǒng)一的業(yè)務(wù)設(shè)計(jì)。