微信小程序 - 核心
1、Web頁面
2、項目結構
Ps1：應用程序的三個文件app.js、app.json、app.wxss在整個小程序中是唯一的，是全局的；頁面級別的會覆蓋全局的樣式和json（配置）,就近原則。
Ps2：project.config.json是自動生成的, 老版沒有，不需要改；utils文件是幫助文件、pages（可改名字）下放頁面文件；目錄結構中可增減文件。
Ps3：小程序規定pages數組下第一個元素代表你要啓動顯示的第一個頁面，每新建一個頁面，則在 pages 下注冊添加路徑目錄。
Ps4：因爲app.json全局配置類型很多，但是普通的頁面配置只針對「window」，所以可以省略「window」字。
3、頁面層級
Ps：小程序頁面層級限定根據小程序現狀而定（推薦不要超過5級）。
4、緩存
微信小程序緩存最大10M 需要用戶自己清除。
5、頁面生命週期
page生命週期：
執行順序：onload（頁面初始化）——onshow（頁面顯示）——onready（頁面渲染完成）——onhide(頁面隱藏)——onunload（頁面關閉）。
JS文件結構：小程序的所有腳本都需要放在page結構體系裏面完成。
6、初級數據綁定
6.0、語法：{{數據綁定}}
6.1、小程序沒有dom節點，也不需要獲取dom可以直接做數據綁定。
6.2、小程序的數據綁定使用{{ }}，單向數據綁定。
6.3、從服務器上請求的數據放在onload裏面，加上 this.setData(接收服務器數據的變量。名)，相當於把數據寫入data{}裏面，然後只需要將對應的數據變量用{{ }}綁定到wxml文件中相應位置即可。
6.4、綁定的數據是放到標籤的屬性裏面的話，應該有引號，例如src="{{}}"； 如果是綁定在標籤內容裏的話，如text元素，則不需要引號。
6.5、如果面向布爾值時，如果是「true」的話，無所謂，但如果是「false」的話，必須要加「{{}}」，因爲小程序解析的true或false時，是看是否有值，所以這裏的「true」也可以寫成「任意字符，甚至是false都可以」。
6.6、控制標籤元素的顯示和隱藏 wx:if="{{true/false}}";也可設置成wx:if="{{變量名}}"，從腳本文件js控制 變量名:true/false 來動態變化 (這裏true/false爲布爾值，不加引號)，但如果該變量沒有定義，就是false的效果。
6.7、能進行字符串運算{{「hello」+ date}}，數值運算{a+b+c}（a:1,b:2,c:3==>6）。
6.8、如果{{img.pic1}}，則需要在var變量裏面定義img{pic1:…,pic2:…}。
6.9、循環列表
6.9.1、把數據整合成數組，var post_content=[{},{}]
6.9.2、this.setData{{post_key:posts_content}}
6.9.3、<block wx:for="{{post_key}}" wx:for-item="item" wx:for-index="idx"></block>整體中間的代碼視爲一個整體，爲for循環。
6.9.4、wx:for-item="item"指代子元素，代碼中可加可不加，小程序默認是item，使用時用item.xxx。形如{{...item}}中的三個點表示數據平鋪，即之後調用其屬性不必是item.attr而可以直接attr，類似Java中的靜態引入。
6.9.5、 wx:for-index="idx" 指代子元素的索引，小程序默認是index， 使用時用 {{idx}}。
6.10、多參數綁定語法：{{a:b, c:d}}
7、事件機制
7.0、bind/catch
7.1、從啓動頁跳轉到文章列表：點擊事件和導航API。
7.2、tap事件，但是要寫成bindtap或者catchtap，默認規定。
7.3、bug：點擊一次執行事件兩次，解決方法：關閉程序重新打開即可。
7.4、wx.navigateTo({ url: '../posts/post', })是跳到下一子級的頁面，有對應的返回按鈕，當前頁面觸發的是onHide（）事件。（限制五級跳轉！！！）
7.5、wx.redirectTo({ url: '../posts/post', })是平行頁面跳轉（關閉當前頁面），無返回按鈕，觸發的是onUnload（）事件。
7.6、冒泡 & 非冒泡
冒泡：子節點觸發事件時，父節點也觸發自身事件。
非冒泡：子節點觸發事件時不牽涉父節點。
bind綁定：允許冒泡。
catch綁定：不允許冒泡。
Ps：可以在每個img中添加catch，但可以運用冒泡機制，直接在父組件swiper中添加catch。
8、模板化 & 模塊化
8.1、業務與數據分離，從業務中訪問數據，理解數據綁定的生命週期，對以後做複雜的業務邏輯處理是很有幫助的。將業務中的數據分離到單獨的數據文件中，數據放在data/data-json.js中，是js文件不是json文件。
8.2、this.data做數據綁定的方法已經失效，請在以後所有數據綁定的地方，使用this.setData,
如：
this.setData({
posts_key:postsData.postList
});
8.4、小程序總會去訪問js文件中的data對象，而且這個訪問動作是在onLoad()方法後執行的。
8.5、數據分離讀取流程
在數據文件中，使用module.exports作爲出口對象，然後在需要用到數據的js文件中使用require函數接收該對象並獲取數據。
數據文件中：
module.exports = {a : data};
其中data是數據，將其作爲一個屬性賦值給module.exports對象。
require方法加載js模塊文件：
var data = require("....");
var postsData = reuqire('../../data/posts-data.js') ,只能是相對路徑。
執行之後，data對象即是前面的module.exports對象，於是，使用data.a即可獲取數據。
8.6、template模板化使用
8.6.0、小程序使用的template模板化技術，而不是組件化技術。
8.6.1、template文件只需要wxml、wxss文件即可
8.6.2、temp.wxml下，創建模板<template name="postItem（模板名字）"></template>
8.6.3、post.wxml中，引用模板：<import src="文件路徑（絕對或相對）" />,
在具體地方引用：<template is="模板名字（name)" data="{{item（數據傳遞）}}" />，形如{{...item}}中的三個點表示數據平鋪，即之後調用其屬性不必是item.attr而可以直接attr，類似Java中的靜態引入。
8.6.4、post.wxss中，樣式引入：@import "相對路徑";
8.6.5、js不支持template 模板化。
8.6.6、模板嵌套中的樣式引用：由裏至外，在上一級中逐層 @import 下一級的樣式。
8.6.7、在模板嵌套中，常用前綴控制樣式的區分。
9、組件自定義屬性及獲取屬性
template只是個佔位符，提高了代碼的複用性，但是在程序編譯之後的代碼中是不包含template標籤的。所以不能再template標籤加上響應屬性。在<template />上綁定事件是不行的，他只是一個佔位符，想要綁定事件，在<template>外面包一層<view catchtap="onPosttap"></view>。
自定義屬性： data-開頭，後加字母和"-"符號的組合。
例如： data-custom-data
點擊事件發生後，自定義屬性可以在事件對象中找到，event.currentTarget.dataset.customData
event：事件對象；currentTarget：當前點擊的對象；dataset：所有自定義屬性的集合
注意，前面是data-custom-data，但在後面data-沒了，先把「-」分割後的單詞全部變爲小寫，並且後面的"-"也沒了而且「-」後的首字母變成大寫。
10、數據傳遞（一）
1、列表頁跳轉鏈接綁定id，url:"路徑？XXX"+postId
2、接收postId參數
onLoad:function (option) {
var postId= option.XXX;
})
3、詳情頁獲取數據，引用數據文件
var postsData = require('../../../data/posts-data.js');
4、獲取postId對應的文章數據
var postData=postsData.postList[postId];
（這裏不能寫成postsData[postId]，爲undefined,postsData.postList纔是數組）
5、AppData可以查看所有數據綁定的情況
6、綁定數據統一使用this.setData({postData:postData})可忽視同步異步差別，而且在新版本中this.data已失效
10、數據傳遞（二）
在html的屬性中添加 data-xxx="yyy" ，則xxx將會是一個值爲yyy的變量，通過事件傳遞給邏輯層,然後邏輯層用event.currentTarget.dataset.xxx來獲取。
11、緩存
小程序的緩存上限不能超過10MB，緩存不清除，將永久存在。
在Storage頁面查看緩存的情況。
共有4類操作，8種方法，每類操作，同時具有同步和異步兩種方法，
1.設置緩存：setStorageSync(key,value);
2.獲取緩存：getStorageSync(key);
3.刪除緩存：removeStorageSync(key);
4.清除所有緩存：clearStorageSync();
同步後綴Sync，如clearStorage()異步，clearStorageSync()同步。
12、同步 & 異步
簡單來說，success，fail，complete裏面有this基本要換成that代替，因爲這裏的this上下文環境變了。緩存能用同步最好用同步的方法.異步的選擇最好根據業務的邏輯來選擇，契合業務來寫代碼，雙耦合。
（1）同步的缺陷是如果在這裏執行不了，整個UI會在此處卡住，後面的代碼走不了，這段時間耗時會非常長；
（2）在小程序中，能用同步用同步，儘量少用異步；
（3）京東訂單系統用的是異步操作。
13、音樂播放器
13.1、關於調用音樂的組件方法其音樂和封面的圖片需要用網絡地址來調用。
13.2、進入頁面監聽音樂播放事件：
wx.onBackgroundAudioPlay(function callback) wx.onBackgroundAudioPause(function callback) 重新播放會繼續上次暫停的時刻 wx.onBackgroundAudioStop(function callback) 重新播放會真的從頭開始
13.3、BUG：在模擬器上暫停監聽——重新播放時會從頭開始，但是真機上是正常的，會在上次暫停的時刻開始。
14、事件驅動思想
14.1. 事件驅動思想, 使用事件驅動來實現模塊之間傳遞參數與解耦.比如在A模塊發射一個事件，在B模塊監聽這個事件，中間使用數據來進行傳遞即可，像這裏就是在總模塊裏面監聽子模塊裏面的音樂播放狀態；
14.2. 數據優先思想, 改變UI, 只需要改變該數據綁定的對應的數據就可以. 這點和angular，iOS中的RAC, 響應式編程思想類似；
14.3.數據綁定優勢還有，一個數據可以綁定多個事件，這樣只需要在js文件裏面寫上對應的多個事件即可，不用像jQuery一樣要獲取多個dom元素才能進行多個事件描述；
14.4.可能利於做單元測試。
15、APP生命週期
15.1、app.js裏面定義全局變量和方法，格式爲App({});
15.2、全局變量字段globalData
15.3、App只有三個生命週期函數
onLaunch(啓動)，onShow(啓動後和隱藏後的顯示)，onHide(後臺隱藏)
其他函數onError
15.4、page.js 中獲取app.js：getApp()
16、taget & currentTarget
taget指的是當前點擊的組件，例如swiper裏的image，而currentTarget指的是事件捕獲的組件，例如整個swiper滾動條，而swiper裏並不存在id，所以程序並不能得到一個id參數，無法顯示頁面和數據。
17、路由
跳轉到一個帶tab選項卡的頁面，必須使用wx.switchTab這個方法，但要跳轉到一個不帶tab選項卡的頁面，也還是需要redirect或者navigate。如果使用navigate,redirect則頁面跳轉不了。
18、tabBar
如果你想讓哪個頁面出現tabBar，那麼這個頁面的頁面文件路徑，必須把它放到list數組下面成爲list的子元素。
19、前端 & 後端銜接
19.1、wx.request
請求中header一定要填寫，但是「content-type」後面不能寫「application/json」和空字符串。建議寫成「content-type」：「json」，這並不是小程序的問題，可能是該api對應的服務器的問題。
20、高級數據綁定
var obj={
a=1,
b=2
}
this.setData(obj)與this.setData({
objData:obj
})的區別：
第一種的結果就相當於直接平鋪
data:{
a:1,
b:2
}
第二種相當於給data對象新增一個key,結果是
data:{
objData:{
a:1,
b:2
}
}
上面動態綁定數據結構，可以理解爲
readyData[settedkey] = { movies:movies },
等價與
{
inTheaters ：{movies(字符串):movies(數據結構)}，
comingSoon ：{movies(字符串):movies(數據結構)}，
top250：{movies(字符串):movies(數據結構)}
}
21、異步函數回調
22、等待加載
wx.showNavigationBarLoading(Object object) // 代碼執行前
wx.hideNavigationBarLoading(Object object) // 代碼執行完
23、下拉刷新
page.json 配置"enablePullDownRefresh":"true"
scroll-view組件不能和onPullDownRefresh同時使用，上拉加載可使用onReachBottom頁面上拉觸底事件的處理函數。改用view 替換scroll-view，默認頁面方法：
onPullDownRefresh 下拉刷新
onReachBottom 觸底加載更多
（下拉刷新的時候，記得先清空數據，不然邏輯上會合並數據）
Ps：json文件裏面配置的background-color是最低層的，就是下拉刷新露出來的那部分背景。
24、圖片預覽功能
24.1、在圖片上增加綁定事件：data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg"
24.2、在js中調用api：
/*查看圖片*/
viewMoviePostImg: function (e) {
var src = e.currentTarget.dataset.src;
wx.previewImage({
current: src, // 當前顯示圖片的http鏈接
urls: [src] // 需要預覽的圖片http鏈接列表
})
}
25、登錄授權獲取用戶信息
wx.login:不需要授權，靜默登陸，登陸狀態有時效性，多久失效由微信服務器決定；
wx.checkSession：可查看是否失效；
wx.getUserInfo：獲取用戶信息（明文信息，加密信息）；
加密信息：包含unionID（可判斷在同一主體下的公衆號、服務號、企業號、小程序中用戶是否時同一個人）；
用戶拒絕授權之後下次登陸不會彈出授權框，可主動引導用戶到授權頁。
26、用戶設置界面
API：wx.openSetting
如果獲取用戶信息第一次拒絕過，再點擊獲取用戶信息就直接失敗，解決方案：通過用戶設置界面，可以重新設置用戶權限
27、動態設置分享按鈕