第一章：什麼是微信小程式
1-1 開篇及課程特色介紹
1、老師id:小樓昨夜又秋風：https://zhuanlan.zhihu.com/oldtimes ，知乎id：七月在夏天。
2、實踐式學習小程式開發：官方api文件
1-2 直觀感受一下微信小程式
1、小程式的特點：
（1）小程式適合做簡單的，用完即走的應用。
（2）小程式適合低頻的引用。
（3）小程式適合效能要求不高的應用。
2、哪些型別的應用適合小程式：
（1）知乎-社群型應用，不適合用小程式。知乎會有訊息推送，小程式不支援。
閱讀類的，網頁載入不適用小程式。
（2）鬥魚-不適用。小程式效能不夠，小程式直接寄託於app，而不是原生系統。
（3）手遊，陰陽師-不適用。小程式可以用休閒式遊戲，不適合專業遊戲。
（4）餓了麼-適用。
（5）貓眼電影-適用。
（6）滴滴打車-適用。
（7）豆瓣-對於這種大型app，可以將部分功能移到小程式。
（8）美團。
（9）招商銀行。
3、微信小程式不支援webview。
1-3 小程式適合做什麼樣的應用

1、什麼是微信小程式：
（1）不需要下載安裝及可使用。下載安裝包-安裝軟體-使用。小程式允許的體積很小，安裝速度很快，所以大家感覺不出來安裝了，實際上是有安裝過程的。
（2）使用者“用完即走”，不用關心是否安裝太多應用。
（3）應用將無處不在，隨時可用。
1-4 對開發者的影響
1、小程式不可以使用現在已經存在的javascript元件庫。小程式是資料優先的。
2、開發環境和開發邏輯及其簡單，非常適合新手。
第2章 小程式環境大件與開發工具介紹
1、原始檔樹狀管理器

2、debugger
斷點除錯F10: F10單步執行,不進入呼叫的其它函式, F11除錯,單步執行,進入呼叫的其它函式
跳到下一個斷點F8(沒有的話,直接執行到結束)
3、清除資料快取，清除的是appdata
清除檔案快取，清除的是檔案的快取。
第3章 從一個簡單的“歡迎”頁面開始小程式之旅
3-1、3-2 本章內容簡介、官方種子專案介紹及小程式的檔案結構
1、編寫第一個小程式頁面
（1）小程式檔案型別與目錄結構
（2）註冊小程式頁面，view、image、text等元件的基本用法。
（3）flex彈性盒子模型
（4）移動端解析度及小程式自適應單位rpx
3-3、3-4 新建我們自己的專案：readerMovie、開始製作專案啟動頁
1、只有才能在小程式中長按選中
2、微信小程式的邏輯解析度：px，物理解析度：rpx
3-5、3-6 製作專案啟動頁（上）之自適應單位：rpx，製作專案啟動頁（中）之樣式與彈性盒子模型
3-7、3-8 製作專案啟動頁（下）之小程式app.json基礎配置
1、移動裝置的解析度與rpx
學習一定要掌握基礎原理性的東西。
2、移動裝置的解析度與rpx

ppi=（320的平方+480的平方），開分號，除以3.5
邏輯解析度pt，物理解析度px。
3-9
1、pt也稱為邏輯解析度。
2、pt的大小和螢幕尺寸有關係，簡單可以理解為長度和視覺單位。
3、px指物理解析度，和螢幕尺寸沒有關係。有幾個物理點，但是不能說點有多長。
4、1個pt可以有1個px構成，也可以有2個，還可以是3個甚至更多。
5、iphone6下2個px才構成一個pt。
6、如何做不同解析度裝置的自適應。
（1）以iphone6的物理畫素750*1334為視覺稿進行設計。
（2）iphone6一下1px=1rpx=0.5pt
（3）使用rpx，小程式會自動在不同的解析度下進行轉換，而使用px為單位不會。
7、iphone6下1px=1rpx;iphone6plus下1px=0.6rpx
3-10
第4章 第二個頁面：新聞閱讀列表
4-1、4-2 第四章課程簡介及小程式開發者後臺簡介
1、編寫新聞閱讀列表
（1）資料繫結（核心知識）
（2）資料繫結的運算及邏輯
（3）appData區域介紹
（4）事件與事件物件
（5）快取
（6）列表渲染（核心知識）
（7）template模板的使用（核心知識）
4-3 使用swiper元件構建輪播圖
4-4 構建新聞列表（上）
4-5 構建新聞列表（下）
1、如果是控制元素水平方向上的間距，建議用rpx，如果是豎直方向上的間距，建議用px。具體情況具體分析。
4-6、4-7、4-8 js檔案結構與page頁面的宣告週期（資料繫結）基礎、（資料繫結）擴充套件
1、微信小程式：單向資料繫結，資料向wxml傳遞時，可以在js直接賦值，通過{{}}將數值傳遞到wxml。wxml資料改變時，js不會自動改變。
4-9 使用列表渲染wx-for改寫新聞列表
1、文字繫結不需要加引號，屬性繫結需要加引號
如下,src屬性用“”，及“{{author_img}}”,text裡的文字繫結不需要加引號，{{date}}

<image class="post-author" src="{{author_img}}"></image>
        <text class="post-date">{{date}}</text>

4-10、4-11 小程式的事件機制（冒泡與非冒泡）（上）、小程式的事件機制（冒泡與非冒泡）（下）
1、wx.navigatorTo() 頁面之間父級跳到子級
wx.redirectTo() 頁面之間平行跳轉
2、當頁面被關閉和解除安裝的時候執行，onUnload()，當頁面被隱藏的時候，執行onHide()
3、bindtap:冒泡事件，catchtap:捕獲事件
第5章 小程式的模板化與模組化
5-01、5-02、5-03 將業務中的資料分離到單獨的資料檔案中、使用require方法載入js模組檔案、template模組的使用
1、格式化程式碼樣式快捷鍵：alt + shift + f。
2、小程式總是會讀取data物件來做資料繫結，這個動作我們稱為動作A，而這個動作A的執行，是在onload事件執行之後發生的。在onload裡進行了非同步操作，需要用this.setData（{postList:postsData.postList}）,而不能是直接寫this.data.postList=postsData.postList.
3、template是一個模板，view，text叫元件。
如果以一個模板方式引入的話，指令碼檔案是無效的。
第06章 構建新聞詳情頁面
6-01、6-02、6-03 從文章列表跳轉到新聞詳情頁面、先靜後動，構建新聞詳情頁面樣式、配置全域性導航欄顏色
1、data={…item}相當於直接對陣列物件進行平鋪和展開，template在引用是可以不用{{item.title}}，而是直接用{{title}}。
2、只有連字元的第一個字母會是大寫，其他的都是小寫，data-postId-num，會變成postidNum，取值的時候dataset.postidNum，而不是postIdNum
3、前端開發，先靜後動，先樣式再資料。
6-04、6-05、6-06 使用資料填充新聞詳情頁面，快取storage的基本用法，使用快取實現文章收藏功能
1、微信小程式快取的上限最大不能超過10M
2、快取
（1）快取的設定

//非同步
 wx.setStorage({
    key: '',
    data: '',
 });
 //同步
wx.setStorageSync('key', '頭腦風暴');
wx.setStorageSync('key', {
    game: "風暴英雄",
    developer: "暴雪"
});

（2）快取的取值，分同步非同步

var game = wx.getStorageSync('key');

（3）快取的清除，同樣有同步和非同步

wx.removeStorageSync('key');
wx.clearStorageSync();//清除所有快取

6-07、6-08、6-09 互動反饋，操作反饋，互動反饋
1、showToast():自動消失
showModal()：不會自動消失
2、this指的是函式呼叫的上下文環境
3、收藏是一件成本較低的事件，不需要用wx.showModal()，可以用showToast;
4、小程式不具有媒體性質，現在無法實現分享功能。(後來版本更新，可以分享了)
5、微信開發者工具放大字型：滑鼠滾輪，不能用鍵盤放大。
6-10、6-11、6-12 同步非同步方法對比、playBackgroundAudio音樂播放基本實現、加入不同的音樂，個性化音樂播放
6-13、6-14 監聽播放事件完善音樂播放、應用程式生命週期
1.由框架呼叫自己的程式碼，在node.js中大量使用。
事件驅動思想。
node.js、angular.js
（1）angularJs兩個模組之間的引數傳遞：①services。②事件驅動的方式傳參，比較提倡。a模組傳送一個事件，b模組接收。
2、資料繫結利於單元測試，jquery不利於單元測試。jquery對ui的限制比較高。
3、學的東西不再多而在於精。
6-15、6-16、6-17 繼續完善音樂播放、音樂播放最終章、真機如何清楚快取與template內路問題
1、template裡的相對路徑要改成絕對路徑，以適用於不同路徑的頁面。
第7章 開始製作電影資訊頁面
7-01 banner輪播圖跳轉文章詳情
1、target指的是當前點選的元件，currentTarget指的是事件捕獲的元件
2、練習：①banner用template實現。②自己的檢視數view用快取寫，檢視一次數值+1。
7-02、7-03 補充內容：tab選項卡課前準備，給專案加入tab選項卡
1、把頁面放到app.json的list下面，才會有tabbar
7-04、7-05、7-06 完善tab選項卡、補充：為什麼redirectTo不出現選項卡、電影頁面巢狀template分析
1、如果有tabbar，則點選事件不能是跳到tabbar的某一個。即如果能通過tabbar跳過去的頁面，就不通過navigateTo()跳轉。
2、小程式新建檔案：4個配套的wxml,wxss,js,json，在app.json中寫好路徑，就會自動建立相應的檔案。
7-07 3個巢狀template標籤實現
1、快速搜尋豆瓣的電影資訊：
百度搜索“豆瓣api”，下拉選擇“電影api”，點選進去後選擇電影條目資訊，“Required Scope”是“movie_basic_r”的是能用的，如果是“movie_advance_r”就是不能用的。
7-08 stars template的樣式實現
1、movie裡引用movie-list，可以直接引用movie-list，而不需要去關注movie-list的細節，所以movie-list引用moive,movie引用stars，而不是movie直接引用movie-list,movie,stars。
2、完成一個專案，和寫好一個專案還是有很大區別的。最重要的是思路。
7-09、7-10 movie template的樣式實現、movie-list template的樣式實現
1、如果用了display:flex，則vertical-align:middle；就不起作用了。
7-11、RESTful api簡介及呼叫豆瓣api
1、RESTful api:
（1）微博開放平臺：http://open.weibo.com/wiki/首頁
①可以用RESTful api獲取資料，也可以獲取html，可以獲取很多種資料型別的資料。
②RESTful 的特點：介面的url可以自描述，不需要介面說明文件。
（3）github
2、（1）返回400，請求已經成功，返回了object，走的是success。返回400，是因為沒有寫header。
400表示引數錯誤。
（2）網斷了，請求超時了，會走fail函式。
3、（1）學習的方法：多試。
（2）不要放過一些細節，這樣才能構建自己的知識樹。
7-12 獲取正在熱映，即將上映和top250的資料
1、快捷鍵
（1）command+shift+f：全域性搜尋
（2）command+p：①面板中是開啟指定檔案。②控制檯輸入也是開啟指定檔案。
2、java是強語言型別，在編譯階段就能指出錯誤。
3、非同步，返回的資料不一定是頁面方法執行的順序。正在熱映，top250等獲取到的先後順序不一定。
7-13 電影頁面資料繫結（上）
1、編寫template時自下而上，資料傳遞時自上而下。
7-14 電影頁面資料繫結（下）
7-15 星星評分元件的實現
1、如果movies.js不寫

data: {
 inTheaters: {},
 comingSoon: {},
 top250: {}
 },

而資料載入是非同步的，不寫就會{{inTheaters}}取值取不到，會報錯。
7-16 更換電影分類標題
第08章 更多電影及電影搜尋頁面的實現
8-01 更多電影頁面的編寫思路
1、頁面之間傳值方式：
①url（推薦）：more-movie/more-movie？category=category
②全域性
③快取：sessionStorage
④類似於angularJs的發射事件，接收事件方式
8-02 動態設定導航欄標題
1、onLoad:生命週期函式–監聽頁面載入(頁面初始化，頁面還沒有生成)
2、onReady:生命週期函式–監聽頁面初次渲染完成
3、onShow:生命週期函式–監聽頁面顯示
顯示onLoad，然後是onShow，再是onReady.
4、

wx.setNavigationBarTitle({
            title: '',
            success: function (res) {

            }
        })

這句需要放在onReady或onReady後的函式中執行
8-03 更多電影頁面載入資料
8-04 實現movie-grid template
1、flex佈局對scroll-view標籤是無效的
8-05 實現上滑載入更多資料
1、api文件是供大家來查閱的，不是供大家來學習的。
8-06、8-07 設定loading狀態，實現下拉重新整理資料
1、方法越小越靈活，可以減少很多重複程式碼。
2、scroll-view不支援下拉重新整理，需要更改程式碼。
8-08 backgroundColor
1、winodow的backgroundColor是下拉重新整理後的背景色。
2、基於java的搜尋框架：分散式搜尋引擎 ElasticSearch
官網：http://www.elasticsearch.org/
ElasticSearch就是一款基於Lucene框架的分散式搜尋引擎，並且也是一款為數不多的基於JSON進行索引的搜尋引擎。ElasticSearch特別適合在雲端計算平臺上使用。
3、vsCode編輯器和微信小程式編輯器很像，可以用vsCode編寫小程式程式碼（都可以將小程式程式碼部署到自己的程式）
第9章 構建電影詳情頁面
9-01、9-02 電影搜尋頁面構建（上），電影搜尋頁面構建（下）
1、122100版本開始，新增bindconfirm事件，專門用來響應鍵盤的“完成”按鍵，建議此處使用“onconfirm”.
2、如果是一個好的前端，是會非常注重細節的，1px，bindChange，bindBlur等的區別，這些都會影響到程式碼的bug。
9-03、9-04、9-05 tabbar的圖片路徑不要使用絕對路徑、修復音樂播放完成後圖示狀態、編寫電影詳情頁面（上）
1、app.json裡的list裡的圖片路徑不要用絕對路徑，將最前面的“/”去掉就行了。早期版本如果是絕對路徑，釋出預覽時會出現錯誤：缺少檔案：錯誤資訊：error:iconPath=/images/tab/yuedu,file not found，我在寫專案時發現絕對路徑也能預覽了。
2、bindconfirm不能寫成“bindConfirm”,這樣寫會使事件失效。
3、小程式電影播放，停止時圖示未停止。如果小程式突然發現bug，先看官網是否有可以解決的api。
9-06 編寫電影詳情頁面（下）
9-07 圖片的縮放與裁剪
1、只有定高或定寬，裁剪才是有意義的。
9-08、9-09 新版本更新後的補充章節、編寫電影詳情頁面骨架
1、縱使秋風起，人生不言棄。
2、程式設計是一件很有創造力的事情。
9-10 完成電影詳情頁面（上）
1、vsCode支援wxss，能夠高亮顯示步驟：
①找到vsCode安裝目錄。②resources-app-extensions-css-package.json-extinsions，加上wxss。
2、實現模糊效果時，要儘量顏色少一點，所以取圖片的一部分，保持較為單一的顏色，然後進行模糊。
3、圖片裁剪或者縮放，只能使用一種。
4、webstorm中，選中程式碼，按住command+shift+l，直接跳轉到safari進行搜尋。
9-11、9-12 完成電影詳情頁面（下），小程式Q&A
第10章 form表單類元件與map地圖元件
10-01 form之switch元件
1、switch的開關：checked=”{{false}}”
取值：event.detail.value;
10-02、10-03、10-04、10-05 form之slider元件、form之radio元件、form之checkbox元件、form表單提交
1、slider的min,max,step。
2、checkbox選中的值得到的是個陣列（event.detail.value）
3、表單一次性獲取所有的值，
4、傳統html的值的傳輸
（1）js/jquery獲取dom節點的value的值，然後拼成js物件
（2）form表單
5、小程式
form包裹程式碼，提交時獲取所有的表單元素的值。

<form catchsubmit="formSubmit" catchreset="formReset">
    <view class="btn-area"><button formType="submit"></button><button formType="reset"></button></view>
</form>

6、提高效率最重要。
7、能解決問題，就是一個好的技術。
10-06 map元件
1、pc模擬機上很多功能都看不了，要在真機上看。
2、wx.openLocation({})能開啟微信的內建地圖。
3、地圖框架（開源框架）推薦看一下：openlayers，將javascript的面向物件做到了極致。openlayers1推薦看，完全沒有使用其他庫，不依賴其他框架，全都是純javascript。
第11章 小程式常見問題與es6
11-01 小程式常見問題
1、養成自己發現問題，解決問題的習慣。
2、wx.switchTab只能跳轉到帶tab的頁面。
3、下拉載入，上滑載入更多。不用scroll-view，用view，就能用下拉重新整理，利用微信提供的onReachBottom事件來實現上滑載入更多。
11-02 小程式中的es6 class
1、es6中重要的部分：class, module , promise, =>（箭頭函式）
11-03 使用Module和class提取封裝一個Movie物件
1、class類命名：java,c#強調一個檔案放一個類。函式式指令碼語言:python，js，的class類是作為一個module（模組）出現的。
11-04 箭頭函式、致謝與再見
1、this的呼叫與函式的上下文環境相關。
2、箭頭函式=>讓this的環境為當前定義函式的環境，而不是呼叫方的環境。
3、C#、Python、Java：lambda