微信小程序中沒有dom結構，所以操作dom元素從而改變樣式，進行邏輯操作也無從談起，小程序巧妙使用的“數據綁定”/數據驅動，這種思想也是我們學習微信小程序的原因； ->所謂dom結構，即html元素,小程序中使用的wxml,wxss.wxs,js;

1、數據渲染 ->?雙大括號插值語法 -> 標簽內容，屬性值中都可使用，{{}}中也可進行基本操作；

<view>{{message}}</view>

<image src="{{}}"/>;//屬性值中使用必須加引號(補充：vue中不能識別，其必須使用v-bind綁定屬性)

<view>{{a + b}} + {{c}} + d</view>;//簡單運算

<view hidden="{{flag ? true : false}}"></view>;//三目運算

<view wx:if="{{length > 5}}"></view>;//邏輯判斷

<view>{{ "hello" + name}}</view>;//字符串運算

數據路徑運算：

2、條件渲染：?

(1).wx:if=“{{}}”, wx:elif="{{}}", wx:else;//條件渲染的基礎使用；<block>標簽其不是組件，也沒有實際意義，最終也不會渲染到頁面上，其可將多個組件進行包裹，節省代碼的書寫，提高開發效率；(補充：vue中使用的是<template>標簽)；-> <block/> 只接受控制屬性

(2).wx:if;wx:elif;wx:else;切換過程中會進行銷毀和重新渲染，hidden;//組件都會被渲染，只是控制顯示和隱藏(display:none/block;); ->?頻繁切換使用hidden,?運行條件不經常改變，使用wx:if系列更nice;

3、列表渲染 -> wx:for="{{array}}",其遍歷渲染數組，若遍歷字符串、數字，系統會將其轉換為數組然后進行遍歷渲染；

(1).wx:for="{{array}}",標簽內直接使用{{item}},{{index}}即可，其也可通過wx:for-index="xxx",wx:for-item="xxx",進行修改；<block>標簽的使用同“條件渲染”中提到的相同；

(2).wx:key="";//其搭配wx:for="",系統渲染過程中可識別組件，不會反復創建，提高列表渲染時的效率；即使不使用wx:key,也并不影響程序正常運行，只會有“警告信息”而已；->wx:key=""，確認屬性值的兩種情況(直接寫wx:key="0",警告信息也會消失，建議使用下述兩種方式)

[1].遍歷后item為對象類型，item具有唯一標識的那個屬性值(不能動態改變)，例如wx:key="id";

[2].遍歷后item為數字/字符串，wx:for="*this",

4、請求數據接口：wx:request({ url:'', success:function(data){ console.log(data) }})

5、生命周期函數、頁面相關事件處理函數

(1).生命周期函數：onLoad -> onShow -> onReady

onLoad(){};//監聽頁面加載，其是最先觸發的; ->?往往請求數據在此函數中執行；

onShow(){};//頁面顯示/切入前臺時觸發，頁面顯示的時刻觸發；

onReady(){};//監聽頁面初次渲染完成；

onHide(){};//監聽頁面隱藏/切入后臺; ->?例如wx.navigateTo({ url: }),其跳轉到新頁面會保留之前頁面，當前頁面隱藏時觸發該函數；

onUnload(){};//監聽頁面卸載; ->例如wx.redirectTo({});其跳轉到新頁面會關閉當前頁面，之前的頁面被卸載掉了，此時其會觸發該函數；

(2).頁面相關事件處理函數：

onPullDownRefresh(){};//監聽用戶下拉動作；

onReachBottom(){};//頁面上拉觸底事件觸發；

onShareAppMessage(){};//用戶點擊右上角分享時觸發；

6、交互操作接口; ->?wx.showLoading和wx.showToast不能同時使用(也沒什么實際意義，功能重復了)，wx.showLoading();與wx.hideLoading();配合使用，要不然不能關閉；

wx.showModal({});//模態對話框

wx.showToast({});//消息提示框 -> 其有保持時間，不調用wx.hideToast()也可關閉

wx.showLoading({});//顯示loading提示框 ->相比于消息提示框有多種icon選擇,其更加具體，只能顯示loading圖標，并且其需調用wx.hideLoading()才能關閉

wx.showActionSheet({});//顯示操作菜單

7、巧妙利用事件對象e.currentTarget來傳遞數據；(e.target接收也OK,兩者都有數據，建議第一種)

補充：小程序中的e.currentTarget與e.target的區別 ->主要應用場景便是“事件冒泡”，子元素事件觸發冒泡從而觸發父元素事件處理函數，父事件對象e.target指向為子元素，而e.currentTarget依舊是本身 -> e.currentTarget永遠都指向本身，e.target若是冒泡，指向源對象(往往與事件委托結合使用)

8、實現“分享”功能 -> button組件的open-type屬性(微信開放能力)

9、數據緩存接口 ->微信小程序中直接調用接口即可實現數據緩存 ->數據存儲的生命周期與小程序生命周期一致，即用戶手動刪除或超過一定時間被自動清理，否則數據都一直可用，單個key允許存儲最大數據長度為1M，所有數據存儲上限為10M(一般數據緩存不可能超10M)；

(1).wx.setStorage({});//配置項中以對象的形式添加鍵值對來設置緩存，wx.setStorageSync();//其直接添加key、value即可; ->?兩者使用方式上有差異(其它接口也是如此)

(2).wx.setStorage();//異步版本，有sync標識的為同步版本(async:異步) ->?開發過程中建議使用同步

10、頁面之間數據傳遞 ->?wx.navigateTo({})傳遞數據 ->新頁面中使用onLoad(options){},參數接收；

11、代碼冗余度高 ->html、css、js ->?css可提取公共樣式，然后使用@import引入(引入時必須使用相對路徑，而且末尾必須使用分號，否則報錯)；js部分可封裝函數，然后引入；html只能冗余了 ->?后續組件化開發，每個組件都有單獨的html/css/js，這樣組件的復用效率極高，也是開發首選；? ? [補充：引入css,js的過程中必須使用相對路徑，微信小程序中圖片路徑以及路由跳轉中相對路徑、絕地路徑都可識別，建議開發中都采用“相對路徑”，避免出錯]

12、wxs腳本語言 ->?其是小程序自己的腳本語言

(1).其和js語言功能類似，兩者可嵌套在同wxml中使用(不沖突)，其有自己的規范，而且可使用es5.0,但不支持es6.0; ->其做數據預處理較方便，例如后端json數據中的時間，需要前端格式化

(2).頁面嵌入式、外聯式

(3).wxs中的正則表達式使用方法同js中不同 -> js: var reg = /\\n/g;//全局匹配\n,\\匹配到\； wxs中使用getRegExp();函數才OK； ->?首個參數為匹配的元素，第二個參數為屬性

13、swiper輪播圖組件 -> <swiper><swiper-item><image/></swiper-item></swiper>;//圖片，文字都可進行輪播，該組件有很多屬性，詳情可參考文檔；

14、video視頻組件 -> <video src="{{src}}"></video>;//更多屬性查看文檔；->講很常見的一類應用場景：設置視頻封面 ->視頻上覆蓋圖片(動圖)；? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

(1).video組件提供了poster屬性，屬性值為網絡資源地址或云文件ID，而且controls屬性必須為true,false設置無效； ->?即使設置了controls="true",視頻封面依舊不能呈現；->其是微信小程序的bug,至今還沒解決(社區中很多人都遇到該問題了)； ->第(2)種解決方案

(2).直接在<video>標簽之間寫image標簽，固定定位+z-index;即可實現覆蓋; ->?有bug ->微信開發工具中其是覆蓋到視頻上的，但真機預覽中圖片始終在視頻的下方，底層原因：微信小程序中的原生組件的層級是最高的(原生組件有很多限制條件)； ->第(3)種解決方案

(3).使用<cover-view><cover-image>組件，其可覆蓋在部分原生組件上；-> 兩者都可單獨使用，<cover-view>中可嵌套<cover-view>、<cover-image>以及其它組件；(樣式操作同其它組件相同，其就是普通組件)?

- - - - -> <cover-image>組件不能識別.gif動圖格式，即使開發工具中其正常顯示動圖，真機上動圖卻沒效果，解決方案：還是使用image圖片，image和video組件使用wx:if或者hidden屬性來控制顯示、隱藏；

15、audio音頻組件 -> 1.6.0版本開始，該組件不再維護 ->提供了wx.createInnerAudioContext()音頻接口(無控制面板)、wx.getBackgroundAudioManager();背景音頻接口(存在控制面板,方便操作) -> 一般涉及到音頻，也會用到進度條progress組件；

背景音頻接口中若不設置title屬性，報錯信息如下：

progress組件應該可以做“個人技能”掌握情況的進度條

16、添加編譯模式 ->?其可以很便捷的直接展示某頁面，由于項目開發過程中很多都涉及到頁面跳轉，開發中若是進行某頁面的操作，你需要從入口頁面一級一級進行跳轉，影響開發效率； ->?之前介紹過一種方法，app.json文件中操作pages對象中屬性的順序來展示你想要的頁面； ->?添加編譯模式這種方法更加便捷；

添加編譯模式的方法：模式名稱：自己寫就OK；啟動頁面：配置頁面路由；啟動參數：該頁面的特殊標識;(由于頁面之間是相互跳轉進入的，頁面之間需要傳遞數據，否則打開頁面也沒有數據用來展示，所以微信小程序提供了“啟動參數”，很nice的解決方案)