小程序筆記

本文純屬總結筆記，均來源於網絡

官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

1、經常使用知識點

一、框架包含配置(json)、邏輯層(js、API)、視圖層(wxml,WXSS,組件)組成；框架的核心是一個響應的數據綁定系統（狀態模式-單向數據流，只要對象狀態發送變化，就通知頁面更新視圖元素)。視圖上的數據都必須用過事件傳遞給對象，只有用戶操做視圖，才能獲取到數據，並更新對象狀態。 事件是視圖層到邏輯層的通信方式。

二、冒泡事件：touchstart touchmove touchcancel touchend tap（在touchend 後觸發） longtap（touchend 前觸發）在 ;bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。

三、事件對象：type：表明事件的類型;timeStamp:頁面打開到觸發事件所通過的毫秒數;target:觸發事件的源組件[id,tagName,dataset{書寫方式： 以data-開頭，多個單詞由連字符-連接，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.target.dataset 中會將連字符轉成駝峯elementType}];currentTarget:事件綁定的當前組件;touches:[Touch {pageX, pageY,clientX, clientY}];detail:自定義事件所攜帶的數據

四、wx:key 的值以兩種形式提供：字符串（表明在 for 循環的 array 中 item 的某個 property）、 *this （表明在 for 循環中的 item 自己）

五、WXML 提供兩種文件引用方式import和include；import能夠在該文件中使用目標文件定義的template（僅限目標文件中的）,使用data來向模板中傳遞綁定數據；include能夠將目標文件除了<template/>的整個代碼引入，至關因而拷貝到include位置，使用：src="item.wxml"

六、rpx：能夠根據屏幕寬度進行自適應，1rpx=1px/pixelRatio[能夠經過api:wx.getSystemInfo({success: function(res) {res.pixelRatio}})來獲取], iPhone6 上1rpx = 0.5px = 1物理像素

七、生命週期：
  應用生命週期：用戶首次打開小程序，觸發 onLaunch（全局只觸發一次）=>小程序初始化完成後，觸發onShow方法，監聽小程序顯示（後轉前時也觸發)
  頁面生命週期：onLoad(首次初始化時頁面加載,一個頁面只會調用一次)=>onShow: 頁面顯示=>onReady: 頁面初次渲染完成(一個頁面只會調用一次) onHide: 頁面隱藏(當navigateTo或底部tab切換時調用) onUnload: 頁面卸載(當redirectTo或navigateBack的時候調用)
  應用與頁面：當小程序進入到後臺，先執行頁面onHide方法再執行應用onHide方法；當小程序從後臺進入到前臺，先執行應用onShow方法再執行頁面onShow方法

八、數據綁定：　　
　WXML 中的動態數據均來自對應 Page 的 data。 Mustache 語法（雙大括號）將變量包起來，可做用於內容、組件屬性、控制屬性、關鍵字；能夠在{{}} 內進行簡單的運算，支持三元運算、算數運算、邏輯判斷、字符串運算、數據路徑運算、組合、對象；也能夠用擴展運算符 ... 來將一個對象展開；可是若有存在變量名相同的狀況，後邊的會覆蓋前面。

九、

2、細節整理

一、經常使用快捷鍵：代碼格式化：Shift+Alt+F 代碼行縮進：Ctrl+[ 上移動一行：Alt+Up 向上複製一行：Shift+Alt+Down 選中光標當前行：Ctrl+i  選擇從光標到行尾：Shift+End 選中全部匹配：Ctrl+Shift+L 打開或者隱藏模擬器：Ctrl + m 關閉當前文件：Ctrl +w

二、小程序默認首頁：app.json中pages的第一個頁面

三、自動生成默認page:在app.json中pages中添加新page的路徑元素後點擊Ctrl + S保存後自動生成相應的目錄及文件

四、<block/> 並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性

五、iPhone6的分辨率（750x1334）爲基準劃分的

六、引入樣式：@import ‘相對路徑’

七、當 wx:if 的條件值切換時，框架有一個局部渲染的過程

八、模板template中data只能使用變量，模板擁有本身的做用域，只能使用data傳入的數據，咱們能夠對is 屬性使用 Mustache 語法，來動態決定具體須要渲染哪一個模板，從而實現局部渲染

九、

3、填坑之路

一、tabBar不顯示：檢查app.json中配置的pagePath是否正確

二、bug：首次進入頁面，若是頁面不滿一屏時會觸發 onReachBottom，手指上拉，會觸發屢次 onReachBottom ，應爲一次上拉，只觸發一次；

三、樣式圖片用網絡圖片或base64格式化下，Base64格式：data:[][;charset=][;base64],

四、頁面傳值並局部刷新能夠考慮用通知（訂閱，發佈）的形式,見：https://github.com/icindy/WxNotificationCenter
    所有刷新：能夠用頁面生命週期,結合本地緩存來進行頁面間的傳值

五、開發者寫的全部代碼最終將會打包成一份 JavaScript，並在小程序啓動的時候運行，直到小程序銷燬

六、