課程簡(jiǎn)介
小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶(hù)掃一掃或者搜一下即可打開(kāi)應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶(hù)不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。應(yīng)用將無(wú)處不在，隨時(shí)可用，但又無(wú)需安裝卸載。
本課程從零基礎(chǔ)開(kāi)發(fā)，詳細(xì)介紹小程序開(kāi)發(fā)時(shí)的，環(huán)境搭建、組件、API的使用，以及開(kāi)發(fā)完成后，部署上線的全部?jī)?nèi)容。
目標(biāo)收益
?學(xué)習(xí)小程序開(kāi)發(fā)的全部功能。
?學(xué)會(huì)如何在微信中運(yùn)用小程序框架開(kāi)發(fā)應(yīng)用。
?掌握在頁(yè)面中使用小程序中重要組件和API的功能開(kāi)發(fā)。
?了解通過(guò)小程序中Video元素基本使用功能。
?理解小程序中本地?cái)?shù)據(jù)存儲(chǔ)的方法與技巧。
培訓(xùn)對(duì)象
?正在從事傳統(tǒng)PC端Web頁(yè)面的技術(shù)開(kāi)發(fā)人員。
?希望從事移動(dòng)端WebApp應(yīng)用開(kāi)發(fā)的技術(shù)人員。
?對(duì)前端技術(shù)感興趣，希望從事這方面工作的人員。
?掌握一些傳統(tǒng)的前端開(kāi)發(fā)技術(shù)，想進(jìn)一步學(xué)習(xí)移動(dòng)端應(yīng)用開(kāi)發(fā)的人員。
課程大綱
| 前期準(zhǔn)備 |
1.1.下載開(kāi)發(fā)工具 1.2.準(zhǔn)備登錄帳號(hào) 1.3.申請(qǐng)小程序開(kāi)發(fā)帳號(hào) 1.4.開(kāi)通服務(wù)端的接口網(wǎng)站 1.5.解決https和TSL版本過(guò)低的原因 |
| flex布局 |
2.1.flex布局的定義 2.2.容器和項(xiàng)目的屬性 2.3.案例一：使用flex實(shí)現(xiàn)骰子和網(wǎng)格布局 2.4.案例二：使用flex實(shí)現(xiàn)新聞頁(yè)的反向隨機(jī)布局 |
| 組件使用 |
3.1.雙大括號(hào)綁定數(shù)據(jù)的方式 3.2.Block遍歷綁定API數(shù)組 3.3.Swipe組件的使用方法 3.4.模板組件的語(yǔ)法與使用 3.5.sroll-view組件的上拉與下刷事件 3.6.video組件的注意事項(xiàng) 3.7.案例三：動(dòng)畫(huà)制作推出點(diǎn)評(píng)框，彈出鍵盤(pán)輸入窗口 3.8.案例四：動(dòng)畫(huà)制作旋轉(zhuǎn)、彈出、居中效果 |
| 重要API說(shuō)明 |
4.1.如何POST提交數(shù)據(jù) 4.2.調(diào)用封裝后的方法與屬性 4.3.全局變量的定義與使用 4.4.案例五：使用本地存儲(chǔ)定時(shí)緩存API接口數(shù)據(jù) 4.5.案例六：頁(yè)面跳轉(zhuǎn)過(guò)程中的傳值與接收 |
| 交互API使用 |
5.1.信息提示功能 5.2.導(dǎo)航與信息置頂 5.3.掃碼與手機(jī)振動(dòng) 5.4.案例七：查看商品的二維碼 5.5.案例八：顯示手機(jī)中的聯(lián)系人信息 |
| 其他API使用 |
6.1.設(shè)備信息顯示 6.2.音頻播放功能 6.3.地理定位顯示 6.4.案例九：通過(guò)經(jīng)緯度查找用戶(hù)坐標(biāo) 6.5.案例十：頁(yè)面的上拉刷新加載更多內(nèi)容 |
| 自定義組件與插件 |
7.1.聲明自定義組件 7.2.編寫(xiě)組件模版 7.3.自定義組件的構(gòu)造器 7.4.組件的引用和配置 7.5.組件在其他頁(yè)面中的調(diào)用 7.6.第三方插件的調(diào)用方式 7.7.常用第三方插件的推薦 |
| 注意事項(xiàng) |
8.1.網(wǎng)絡(luò)請(qǐng)求異常的解決方案 8.2.圖片元素加載時(shí)的無(wú)初始化 8.3.事件冒泡現(xiàn)象的解決方案 8.4.Scrollview組件滾動(dòng)時(shí)注意事項(xiàng) 8.5.wxml模板不生效的原因 8.6.video標(biāo)簽的適配問(wèn)題 |
| 界面UI與設(shè)計(jì)方案 |
9.1.小程序界面設(shè)計(jì)標(biāo)準(zhǔn)和要求 9.2.WeUI 前端框架 9.3.Sketch 源文件 9.4.圖標(biāo)與布局 9.5.菜單與面板 |
| 案例實(shí)戰(zhàn)——?jiǎng)赢?huà)展示 |
10.1.項(xiàng)目功能需求分析 10.2.項(xiàng)目功能界面效果展示 10.3.調(diào)用API接口更新?tīng)顟B(tài) 10.4.以動(dòng)畫(huà)方式彈出禮品 |
| 案例實(shí)戰(zhàn)——地理查詢(xún) |
11.1.頁(yè)面功能需求分析 11.2.業(yè)務(wù)邏輯分析 11.3.獲取經(jīng)緯度并在地圖中繪點(diǎn) 11.4.根據(jù)繪點(diǎn)調(diào)用API返回商家信息 11.5.將商家繪制在地圖上 |
| 小程序云端開(kāi)發(fā) |
12.1.云開(kāi)發(fā)介紹 12.2.構(gòu)建數(shù)據(jù)庫(kù) 12.3.云函數(shù) 12.4.云開(kāi)發(fā)控制臺(tái) |
| 數(shù)據(jù)集合操作 |
13.1.創(chuàng)建第一個(gè)集合 13.2.插入數(shù)據(jù) 13.3.讀取數(shù)據(jù) 13.4.更新和刪除數(shù)據(jù) |
|
前期準(zhǔn)備 1.1.下載開(kāi)發(fā)工具 1.2.準(zhǔn)備登錄帳號(hào) 1.3.申請(qǐng)小程序開(kāi)發(fā)帳號(hào) 1.4.開(kāi)通服務(wù)端的接口網(wǎng)站 1.5.解決https和TSL版本過(guò)低的原因 |
|
flex布局 2.1.flex布局的定義 2.2.容器和項(xiàng)目的屬性 2.3.案例一：使用flex實(shí)現(xiàn)骰子和網(wǎng)格布局 2.4.案例二：使用flex實(shí)現(xiàn)新聞頁(yè)的反向隨機(jī)布局 |
|
組件使用 3.1.雙大括號(hào)綁定數(shù)據(jù)的方式 3.2.Block遍歷綁定API數(shù)組 3.3.Swipe組件的使用方法 3.4.模板組件的語(yǔ)法與使用 3.5.sroll-view組件的上拉與下刷事件 3.6.video組件的注意事項(xiàng) 3.7.案例三：動(dòng)畫(huà)制作推出點(diǎn)評(píng)框，彈出鍵盤(pán)輸入窗口 3.8.案例四：動(dòng)畫(huà)制作旋轉(zhuǎn)、彈出、居中效果 |
|
重要API說(shuō)明 4.1.如何POST提交數(shù)據(jù) 4.2.調(diào)用封裝后的方法與屬性 4.3.全局變量的定義與使用 4.4.案例五：使用本地存儲(chǔ)定時(shí)緩存API接口數(shù)據(jù) 4.5.案例六：頁(yè)面跳轉(zhuǎn)過(guò)程中的傳值與接收 |
|
交互API使用 5.1.信息提示功能 5.2.導(dǎo)航與信息置頂 5.3.掃碼與手機(jī)振動(dòng) 5.4.案例七：查看商品的二維碼 5.5.案例八：顯示手機(jī)中的聯(lián)系人信息 |
|
其他API使用 6.1.設(shè)備信息顯示 6.2.音頻播放功能 6.3.地理定位顯示 6.4.案例九：通過(guò)經(jīng)緯度查找用戶(hù)坐標(biāo) 6.5.案例十：頁(yè)面的上拉刷新加載更多內(nèi)容 |
|
自定義組件與插件 7.1.聲明自定義組件 7.2.編寫(xiě)組件模版 7.3.自定義組件的構(gòu)造器 7.4.組件的引用和配置 7.5.組件在其他頁(yè)面中的調(diào)用 7.6.第三方插件的調(diào)用方式 7.7.常用第三方插件的推薦 |
|
注意事項(xiàng) 8.1.網(wǎng)絡(luò)請(qǐng)求異常的解決方案 8.2.圖片元素加載時(shí)的無(wú)初始化 8.3.事件冒泡現(xiàn)象的解決方案 8.4.Scrollview組件滾動(dòng)時(shí)注意事項(xiàng) 8.5.wxml模板不生效的原因 8.6.video標(biāo)簽的適配問(wèn)題 |
|
界面UI與設(shè)計(jì)方案 9.1.小程序界面設(shè)計(jì)標(biāo)準(zhǔn)和要求 9.2.WeUI 前端框架 9.3.Sketch 源文件 9.4.圖標(biāo)與布局 9.5.菜單與面板 |
|
案例實(shí)戰(zhàn)——?jiǎng)赢?huà)展示 10.1.項(xiàng)目功能需求分析 10.2.項(xiàng)目功能界面效果展示 10.3.調(diào)用API接口更新?tīng)顟B(tài) 10.4.以動(dòng)畫(huà)方式彈出禮品 |
|
案例實(shí)戰(zhàn)——地理查詢(xún) 11.1.頁(yè)面功能需求分析 11.2.業(yè)務(wù)邏輯分析 11.3.獲取經(jīng)緯度并在地圖中繪點(diǎn) 11.4.根據(jù)繪點(diǎn)調(diào)用API返回商家信息 11.5.將商家繪制在地圖上 |
|
小程序云端開(kāi)發(fā) 12.1.云開(kāi)發(fā)介紹 12.2.構(gòu)建數(shù)據(jù)庫(kù) 12.3.云函數(shù) 12.4.云開(kāi)發(fā)控制臺(tái) |
|
數(shù)據(jù)集合操作 13.1.創(chuàng)建第一個(gè)集合 13.2.插入數(shù)據(jù) 13.3.讀取數(shù)據(jù) 13.4.更新和刪除數(shù)據(jù) |
近期公開(kāi)課推薦
