最近學(xué)習(xí)小程序，記錄一下（2018.4.6）

目錄結(jié)構(gòu)
1.為了方便開發(fā)者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。

配置
2.app.json文件用來對微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等
3.pages數(shù)組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數(shù)組進(jìn)行修改。（在小程序工具里建好頁面文件夾，然后再pages數(shù)組里配置好并保存，就可以自動生成頁面文件）
4.navigationStyle 只在 app.json 中生效
5.tabBar 中的 list 是一個數(shù)組，只能配置最少2個、最多5個 tab，tab 按數(shù)組的順序排序。

邏輯層
6.由于框架并非運(yùn)行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。
7.增加 getApp 和 getCurrentPages 方法，分別用來獲取 App 實例和當(dāng)前頁面棧。通過 getApp() 獲取實例之后，不要私自調(diào)用生命周期函數(shù)。

轉(zhuǎn)發(fā)
8.現(xiàn)在通過調(diào)用 *wx.showShareMenu* 并且設(shè)置 *withShareTicket* 為 *true* ，當(dāng)用戶將小程序轉(zhuǎn)發(fā)到任一群聊之后，可以獲取到此次轉(zhuǎn)發(fā)的 *shareTicket*，此轉(zhuǎn)發(fā)卡片在群聊中被其他用戶打開時，可以在App.onLaunch()* 或 App.onShow 獲取到另一個 *shareTicket*。這兩步獲取到的 *shareTicket* 均可通過 wx.getShareInfo() 接口可以獲取到相同的轉(zhuǎn)發(fā)信息。*
9.只有轉(zhuǎn)發(fā)到群聊中打開才可以獲取到 shareTickets 返回值，單聊沒有 shareTickets

注冊程序
10.當(dāng)小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）
11.當(dāng)用戶點擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進(jìn)入了后臺；
當(dāng)再次進(jìn)入微信或再次打開小程序，又會從后臺進(jìn)入前臺
12.只有當(dāng)小程序進(jìn)入后臺一定時間，或者系統(tǒng)資源占用過高，才會被真正的銷毀。

場景值
13.由于Android系統(tǒng)限制，目前還無法獲取到按 Home 鍵退出到桌面，然后從桌面再次進(jìn)小程序的場景值，對于這種情況，會保留上一次的場景值。

頁面棧
14.頁面重定向：當(dāng)前頁面出棧，新頁面入棧
頁面返回：頁面不斷出棧，直到目標(biāo)返回頁，新頁面入棧
Tab 切換：頁面全部出棧，只留下新的 Tab 頁面
重加載：頁面全部出棧，只留下新的頁面
15.getCurrentPages() 函數(shù)用于獲取當(dāng)前頁面棧的實例，以數(shù)組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當(dāng)前頁面。
16.不要嘗試修改頁面棧，會導(dǎo)致路由以及頁面狀態(tài)錯誤。
17.navigateTo, redirectTo 只能打開非 tabBar 頁面。
switchTab 只能打開 tabBar 頁面。
reLaunch 可以打開任意頁面。
18.調(diào)用頁面路由帶的參數(shù)可以在目標(biāo)頁面的onLoad中獲取。（路由帶參可以形如
/pages/life/life?id=1
路徑+‘?' + 參數(shù)）

事件
19.冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。
非冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞
20.* key 以*bind*或*catch*開頭，然后跟上事件的類型，如*bindtap*、*catchtouchstart*。自基礎(chǔ)庫版本 1.5.0 起，*bind*和*catch*后可以緊跟一個冒號，其含義不變，如*bind:tap*、、*catch:touchstart*。
21.bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡
22.需要在捕獲階段監(jiān)聽事件時，可以采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。

注冊頁面
23.onTabItemTap 怎么用？
24.onLoad,onReady 一個頁面只會調(diào)用一次，除非被unload
onShow 頁面每次打開都調(diào)用
onHide 在navigateTo跳轉(zhuǎn)或tab跳轉(zhuǎn)時候調(diào)用
onUnload 在redirectTo重定向或者navigateBack退回前一個頁面的時候調(diào)用
25.route 字段可以獲取到當(dāng)前頁面的路徑。（通過this.route獲取)
26.setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時改變對應(yīng)的 this.data 的值（同步）。
27.其中 key 可以非常靈活，以數(shù)據(jù)路徑的形式給出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中預(yù)先定義。（不需要定義？ 刺激）
28.單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)。
29.請不要把 data 中任何一項的 value 設(shè)為 undefined ，否則這一項將不被設(shè)置并可能遺留一些潛在問題。

模塊化
30.不同的文件中可以聲明相同名字的變量和函數(shù)
31.通過全局函數(shù) *getApp()* 可以獲取全局的應(yīng)用實例，如果需要全局的數(shù)據(jù)可以在 *App()* 中設(shè)置
32.exports 是 module.exports 的一個引用，因此在模塊里邊隨意更改 exports 的指向會造成未知的錯誤。所以更推薦開發(fā)者采用 module.exports 來暴露模塊接口
33.小程序目前不支持直接引入 node_modules , 開發(fā)者需要使用到 node_modules 時候建議拷貝出相關(guān)的代碼到小程序的目錄中。

數(shù)據(jù)綁定
34.數(shù)據(jù)都要放到雙引號里，并用{{}}包括
35.data屬性中的對象可以隨意組合，但是如有存在變量名相同的情況，后邊的會覆蓋前面
36.花括號和引號之間如果有空格，將最終被解析成為字符串
例如

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

列表渲染
37.使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，
使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名
38.將 wx:for 用在<block/>標(biāo)簽上，以渲染一個包含多節(jié)點的結(jié)構(gòu)塊
39.wx:key 的值以兩種形式提供
1)字符串，代表在 for 循環(huán)的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數(shù)字，且不能動態(tài)改變。
2)保留關(guān)鍵字 *this 代表在 for 循環(huán)中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數(shù)字
40.當(dāng) wx:for 的值為字符串時，會將字符串解析成字符串?dāng)?shù)組
條件渲染
41.<block/> 并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
42.wx:if 如果為false 則不渲染
hidden 先渲染，如果為false 則隱藏
如果頻繁切換，則使用hidden
如果不過多改變，則使用wx:if

模板
43.模板擁有自己的作用域，只能使用 data 傳入的數(shù)據(jù)以及模版定義文件中定義的 <wxs /> 模塊

引用
44.import 有作用域的概念，即只會 import 目標(biāo)文件中定義的 template，而不會 import 目標(biāo)文件 import 的 template。
45.include 可以將目標(biāo)文件除了 <template/> <wxs/> 外的整個代碼引入，相當(dāng)于是拷貝到 include 位置

WXS模塊
46.每個 wxs 模塊均有一個內(nèi)置的 module 對象。
47.wxs文件引入方式：

<wxs src="./../tools.wxs" module="tools" />

48.wxs 模塊均為單例，wxs 模塊在第一次被引用時，會自動初始化為單例對象。多個頁面，多個地方，多次引用，使用的都是同一個 wxs 模塊對象。
49.module 屬性是當(dāng)前 <wxs> 標(biāo)簽的模塊名。在單個 wxml 文件內(nèi)，建議其值唯一。有重復(fù)模塊名則按照先后順序覆蓋（后者覆蓋前者）。不同文件之間的 wxs 模塊名不會相互覆蓋。

WXSS
50.rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
51.開發(fā)微信小程序時設(shè)計師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)。
52.使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束。(導(dǎo)入外部的UI庫)

組件模板
53.在組件模板中可以提供一個 <slot> 節(jié)點，用于承載組件引用時提供的子節(jié)點。
54.在組件定義時的選項中啟用多slot支持

Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啟用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

55.可以在這個組件的wxml中使用多個slot，以不同的 name 來區(qū)分。
使用時，用 slot 屬性來將節(jié)點插入到不同的slot上。

1)組件和引用組件的頁面不能使用id選擇器（#a）、屬性選擇器（[a]）和標(biāo)簽名選擇器，請改用class選擇器。
2)組件和引用組件的頁面中使用后代選擇器（.a .b）在一些極端情況下會有非預(yù)期的表現(xiàn)，如遇，請避免使用。
3)子元素選擇器（.a>.b）只能用于 view 組件與其子節(jié)點之間，用于其他組件可能導(dǎo)致非預(yù)期的情況。
4)繼承樣式，如 font 、 color ，會從組件外繼承到組件內(nèi)。
5)除繼承樣式外， app.wxss 中的樣式、組件所在頁面的的樣式對自定義組件無效
57.組件希望接受外部傳入的樣式類（類似于 view 組件的 hover-class 屬性）。此時可以在 Component 中用 externalClasses 定義段定義若干個外部樣式類。

Component構(gòu)造器
58.properties ，組件的對外屬性，是屬性名到屬性設(shè)置的映射表，屬性設(shè)置中可包含三個字段， type 表示屬性類型、 value 表示屬性初始值、 observer 表示屬性值被更改時的響應(yīng)函數(shù)
59.在 properties 定義段中，屬性名采用駝峰寫法（propertyName）；在 wxml 中，指定屬性值時則對應(yīng)使用連字符寫法（component-tag-name property-name="attr value"），應(yīng)用于數(shù)據(jù)綁定時采用駝峰寫法（attr="{{propertyName}}"）。
組件事件
60.自定義組件觸發(fā)事件時，需要使用 triggerEvent 方法，指定事件名、detail對象和事件選項
behaviors
61.每個 behavior 可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法，組件引用它時，它的屬性、數(shù)據(jù)和方法會被合并到組件中，生命周期函數(shù)也會在對應(yīng)時機(jī)被調(diào)用。每個組件可以引用多個 behavior 。 behavior 也可以引用其他 behavior 。
62.behavior 需要使用 Behavior() 構(gòu)造器定義。
63.wx://form-field 代表一個內(nèi)置 behavior ，它使得這個自定義組件有類似于表單控件的行為。
組件間關(guān)系
64.父子組件有相互間的關(guān)系，相互間的通信往往比較復(fù)雜。此時在組件定義時加入 relations 定義段，可以解決這樣的問題（通過relation來告訴組件他的父節(jié)點是誰 或者 他的子節(jié)點是誰）
65.relations中type選項：目標(biāo)組件的相對關(guān)系，可選的值為 parent 、 child 、 ancestor 、 descendant

插件
66.插件是對一組 js 接口或自定義組件的封裝，用于提供給第三方小程序調(diào)用。插件必須嵌入在其他小程序中才能被用戶使用。

分包加載
67.首頁的 TAB 頁面必須在 app（主包）內(nèi)

多線程worker
68.一些異步處理的任務(wù)，可以放置于 Worker 中運(yùn)行，待運(yùn)行結(jié)束后，再把結(jié)果返回到小程序主線程。Worker 運(yùn)行于一個單獨的全局上下文與線程中，不能直接調(diào)用主線程的方法。 Worker 與主線程之間的數(shù)據(jù)傳輸，雙方使用 Worker.postMessage() 來發(fā)送數(shù)據(jù)，Worker.onMessage()* 來接收數(shù)據(jù)，傳輸?shù)臄?shù)據(jù)并不是直接共享，而是被復(fù)制的*。

1） Worker 最大并發(fā)數(shù)量限制為 1 個，創(chuàng)建下一個前請用 Worker.terminate() 結(jié)束當(dāng)前 Worker
2）Worker 內(nèi)代碼只能 require 指定 Worker 路徑內(nèi)的文件，無法引用其它路徑
3）Worker 的入口文件由 wx.createWorker() 時指定，開發(fā)者可動態(tài)指定 Worker 入口文件
4）Worker 內(nèi)不支持 *wx* 系列的 API
5）Workers 之間不支持發(fā)送消息

兼容
70.可以通過 *wx.getSystemInfo* 或者 *wx.getSystemInfoSync* 獲取到小程序的基礎(chǔ)庫版本號。
也可以通過 wx.canIUse 詳情 來判斷是否可以在該基礎(chǔ)庫版本下直接使用對應(yīng)的API或者組件

運(yùn)行機(jī)制
71.假如用戶已經(jīng)打開過某小程序，然后在一定時間內(nèi)再次打開該小程序，此時無需重新啟動，只需將后臺態(tài)的小程序切換到前臺，這個過程就是熱啟動；冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況，此時小程序需要重新加載啟動。（熱啟動，打開過，一段時間內(nèi)再次打開
冷啟動，第一次打開，或者銷毀后再打開）
72.小程序冷啟動時如果發(fā)現(xiàn)有新版本，將會異步下載新版本的代碼包，并同時用客戶端本地的包進(jìn)行啟動，即新版本的小程序需要等下一次冷啟動才會應(yīng)用上。（如果第一次打開，就是直接下載新版本。
如果以前打開過，就先用老包，然后后臺異步下載新包，再次冷啟動后時替換）
73.（只有銷毀后才算真正的關(guān)閉小程序，下次打開就時冷啟動）
1）小程序沒有重啟的概念
2）當(dāng)小程序進(jìn)入后臺，客戶端會維持一段時間的運(yùn)行狀態(tài)，超過一定時間后（目前是5分鐘）會被微信主動銷毀
3）當(dāng)短時間內(nèi)（5s）連續(xù)收到兩次以上收到系統(tǒng)內(nèi)存告警，會進(jìn)行小程序的銷毀
74.再次打開邏輯
可以設(shè)置打開上次的頁面，
也可以設(shè)置打開直接到首頁[about 7 hours ago]
使用wx.reLaunch 打開指定頁面
https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html#wxrelaunchobject[about 7 hours ago]

優(yōu)化建議
75.用戶傳輸?shù)臄?shù)據(jù)，需要將其轉(zhuǎn)換為字符串形式傳遞，同時把轉(zhuǎn)換后的數(shù)據(jù)內(nèi)容拼接成一份 JS 腳本，再通過執(zhí)行 JS 腳本的形式傳遞到兩邊獨立環(huán)境。
76.數(shù)據(jù)到達(dá)視圖層并不是實時的。
77.常見的setData操作錯誤
1） 頻繁的去 setData
2）每次 setData 都傳遞大量新數(shù)據(jù)
3）后臺態(tài)頁面進(jìn)行 setData
78.建議開發(fā)者盡量減少使用大圖片資源
79.有必要盡量減少代碼包的大小，因為代碼包大小直接影響到下載速度，從而影響用戶的首次打開體驗
80.控制代碼包內(nèi)圖片資源。GZIP 對基于文本資源的壓縮效果最好，在壓縮較大文件時往往可高達(dá) 70%-80% 的壓縮率，而如果對已經(jīng)壓縮的資源（例如大多數(shù)的圖片格式）則效果甚微。
81.及時清理沒有使用到的代碼和資源

發(fā)起請求
82.最終發(fā)送給服務(wù)器的數(shù)據(jù)是 String 類型，如果傳入的 data 不是 String 類型，會被轉(zhuǎn)換成 String

小問題記錄
Q:justify-content: space-evenly真機(jī)調(diào)試樣式出不來?
手機(jī)上的截圖：

image

工具上的截圖：

image

image.png