• 第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章 屬於你的支付寶小程序發布與上線

  大家如果是從頭到現在一直跟下來的，相信大家已經開發出了一款屬於自己的支付寶小程序了， 接下來本章為大家講解小程序如何發布與上線，如何避免審核的坑，以及審核方面的各個流程和註意點，如何設置體驗版，最終發布上線。讓大家真正擁有一款高質量的線上作品。...

• 第14章 課程總結

  恭喜大家，堅持到了最後，本章我將和大家一起對整個實戰做總結和回顧。最後期待大家將自己的作品發布上線，等待你們的好消息。

  下載地址：百度網盤

全網首發 商業級支付寶小程序入門與實戰