第1章 課程導學與准備工作
本章主要介紹為何學習支付寶小程序,以及開發支付寶小程序能為我們帶來哪些收獲。之后會為大家介紹本課程內容具體安排,最后給出如何學好這門課程的一些學習建議。希望大家都能通過這門課程,學有所成,學有所歸。
- 1-1 課程導學
第2章 初識支付寶小程序
本章首先會為大家介紹如何配置開發環境,如何使用螞蟻開發者工具,隨后我們會一起開發第一個hello world小例子,通過對開發工具以及基本文件類型的介紹,讓大家快速熟悉支付寶小程序。為后面技術的學習,項目的開發做好基本准備。大家加油。...
- 2-1 創建小程序,申請appId,設置團隊開發者
- 2-2 開發環境搭建&開發者工具介紹
- 2-3 開發第一個支付寶小程序hello world
- 2-4 四種基本文件類型與page樣式
第3章 支付寶小程序基礎架構
本章首先會講解app的基本文件類型以及頁面路由配置,包括小程序項目的生命周期以及頁面的生命周期,隨后會一起學習如何配置全局常量、對象、函數以及全局樣式。此外我們會通過全局配置來設置標題欄、tab選項卡以及導航組件和api。讓大家掌握小程序開發的基礎架構開發。 ...
- 3-1 app的三種文件類型與路徑配置管理
- 3-2 結合生活實例講解與演示app生命周期
- 3-3 頁面的生命周期 - 上
- 3-4 頁面的生命周期 - 下
- 3-5 全局常量、對象、自定義函數的使用
- 3-6 全局樣式的使用和重寫
- 3-7 全局與私有標題欄的配置
- 3-8 tab選項卡介紹與模塊頁面的創建
- 3-9 tab選項卡的配置與顯示
- 3-10 導航組件頁面跳轉
- 3-11 導航api與章節回顧
第4章 支付寶小程序flex布局精講與實戰
本章首先會學習什么是flex布局,什么是flex模型。隨后會對flex拆分為容器和元素進行逐一講解。最后進行一個骰子練習,通過flex布局與css的配合實現骰子的6個點數,以此來加固flex的學習。(對於界面的開發,這部分知識非常重要)...
- 4-1 flex布局的概念與模型
- 4-2 flex-direction 水平軸與交叉軸的排列方向
- 4-3 flex-warp 換行屬性以及flex-flow的結合
- 4-4 justify-content在水平軸與交叉軸的對齊方式
- 4-5 align-items元素在交叉軸的對齊方式
- 4-6 align-content基於多軸線的對其方式
- 4-7 flex設置元素的排序、拉伸與縮放
- 4-8 flex設置元素的固定占比與重寫對齊方式
- 4-9 模擬骰子1點數進行flex布局演練
- 4-10 模擬骰子2點數進行flex布局演練
- 4-11 模擬骰子3點數進行flex布局演練
- 4-12 模擬骰子4-6點數進行flex布局演練
第5章 支付寶小程序視圖層與基礎語法精講
本章主要學習數據綁定,涉及到變量渲染,條件渲染以及列表渲染,另外對於view和block的區別會通過代碼演示來理解。隨后會講解用戶事件類型以及dataset綁定數據。最后我們會學習rpx自適應像素,來實現響應式布局,以此來實現多手機不同屏幕的自適應。...
- 5-1 數據綁定與渲染
- 5-2 ifelse條件渲染
- 5-3 for循環列表渲染
- 5-4 view與block的區別
- 5-5 6種不同的事件類型
- 5-6 dataset自定義數據的使用
- 5-7 使用rpx響應式像素實現自適應拉伸_音頻.mp4
第6章 支付寶小程序首頁模塊開發
本章主要開發支付寶小程序首頁模塊,首先我們會學習圖片組件以及13種模式,隨后配合輪播圖組件實現首頁輪播圖,同時我們搭配rpx實現自適應。接下來會對滾動視圖組件進行學習並完成橫向滑動的推薦商品列表。最后學習網絡請求api實現本地調用在線接口,獲取真實數據並且渲染整個首頁。...
- 6-1 圖片組件的使用
- 6-2 圖片的4種縮放模式與9種裁剪模式講解
- 6-3 輪播圖組件的使用與屬性講解
- 6-4 scroll-view組件的使用
- 6-5 開發首頁輪播圖
- 6-6 flex二級嵌套開發商城特色一欄_x264
- 6-7 可滾動視圖組件開發推薦商品
- 6-8 完成縱向新品列表
- 6-9 發送httpRequest獲取輪播圖數據
- 6-10 首頁輪播圖動態渲染
- 6-11 網絡請求獲取推薦商品以及新品列表數據
- 6-12 推薦商品以及新品列表數據渲染展示
- 6-13 下拉實現首頁數據刷新
第7章 商品分類、列表、詳情模塊開發
本章首先通過flex布局實現商品分類,並且實現自適應。隨后可以通過搜索查詢商品並且跳轉到商品列表以及詳情頁。最后通過模板來實現代碼的公用。對於商品詳情我們通過json對象的解析來渲染。
- 7-1 開發分類頁面 - 固定搜索欄
- 7-2 開發分類頁面 - 顯示每一個分類元素
- 7-3 鍵盤回車觸發confirm事件獲取搜索框的值
- 7-4 頁面帶參與debugger調試
- 7-5 使用導航組件帶參
- 7-6 根據不同參數發起網絡請求查詢商品列表
- 7-7 使用交互api提高用戶體驗
- 7-8 查詢結果文字動態數據綁定與顯示
- 7-9 使用模板實現商品列表代碼公用
- 7-10 httpRequest請求商品詳情
- 7-11 開發商品詳情頁 - 封面圖
- 7-12 開發商品詳情頁 - 基本信息渲染 上
- 7-13 開發商品詳情頁 - 基本信息渲染 下
- 7-14 開發商品詳情頁 - json解析渲染商品介紹
- 7-15 開發商品詳情頁 - 固定底部操作欄
- 7-16 完善首頁商品導航跳轉_x264
- 7-17 完善首頁輪播圖跳轉
第8章 購物車模塊開發
本章主要講解購物車模塊開發,首先我們會實現用戶點擊購物車動畫效果,隨后學習本地緩存api,通過緩存貫穿整個購物車業務,最后在購物車頁面,我們實現自定義checkbox組件來替換原生,從而達到整體項目的配色一致,同時也會動態計算合計金額以及購買件數。 ...
第9章 訂單模塊開發
本章主要講解訂單業務處理流程,首先會根據流程圖來理解整個流程,隨后理解每個節點的訂單狀態。之后開發訂單結算頁面並且渲染購物車提交的商品數據,作為訂單數據,我們會構建預處理訂單,以此來實現需要預先准備給提交到后端的數據。...
第10章 地址管理模塊開發
本章主要講解地址管理相關業務,用戶可以對地址進行增加、修改以及刪除,在地址列表,用戶可以設置默認地址也可以選擇地址,並且列表頁面的選中效果我們會實現信封風格樣式。操作地址的時候會涉及到表單組件以及自定義組件,最后通過開發自定義的城市選擇組件以此實現組件通用化。...
第11章 個人信息頁面開發與登錄授權api講解
本章主要講解個人頁面的開發,首先我們會講解支付寶授權登錄,熟悉他的整個處理流程,本頁面的歷史訂單數據用於提供給用戶查看不同狀態的訂單,當然用戶可以處理不同的訂單,比如重新支付、取消訂單、確認收貨等。最后通過交互api實現用戶的退出。授權登錄的審核注意點我們也會提前在這里講解噢!...
第12章 支付寶收銀台支付模塊開發
本章主要講解支付寶授權支付,實現喚起收銀台進行支付,同時對於整個支付的業務處理會詳細講解。當用戶支付完畢后可以在個人頁面看到歷史訂單,針對不同訂單會涉及到不同的訂單狀態,通過本章的學習,可以打通支付的整套環節。...
第13章 屬於你的支付寶小程序發布與上線
大家如果是從頭到現在一直跟下來的,相信大家已經開發出了一款屬於自己的支付寶小程序了, 接下來本章為大家講解小程序如何發布與上線,如何避免審核的坑,以及審核方面的各個流程和注意點,如何設置體驗版,最終發布上線。讓大家真正擁有一款高質量的線上作品。...