1 微信小程式是什麼?
2 什麼應用適合做成微信小程式
小程式性(Hybrid)能上優於webapp 劣於IOS ANDROID 原生應用
3 商業+產品
4 小程式特點
小程式不支援webview
小程式生命週期
分為頁面生命週期 和 元件生命週期
頁面生命週期
元件生命週期
傳送請求
wx.request 在4XX狀態碼下不會執行fail函式 同樣執行success函式 只有當網路中斷時才會執行fail函式 小程式中的wx.request 是非同步的,不能修改
component元件中JS屬性
properties 元件的屬性列表 接收從父元件或者頁面傳遞下來的資料
data 元件的初始資料 不能被外部直接設定
資料更新 使用 setData複製程式碼
元件的Behavior行為
建立一個JS通過Behavior關鍵字
然後在元件內引入這個模組 ,通過 behaviors:[classicBeh]來實現繼承
發生多繼承時,properties data method 等會被子類或者最後一個父類覆蓋,而生命週期這些不會被覆蓋,會依次執行每一個父類和子類的生命週期
小程式設定和獲取快取
wx:if VS hidden
元件之間通訊
父元件向子元件傳遞資料 通過 properties
子元件向父元件傳遞資料 通過事件 triggerEvent
this.triggerEvent('eventName',{data},{})
第一個引數為觸發頁面的自定義事件名稱,第二個事件引數為傳遞過去的引數,第三個事件引數
父元件還可以通過 this.selectComponent 方法獲取子元件例項物件,這樣就可以直接訪問元件的任意資料和方法
設定插槽需要在元件中 開啟 multipleSlot:true 屬性
options:{
multipleSlots:true
}複製程式碼
列表渲染
wx:for
wx:key 當需要渲染大量資料時 加上以後會提升效能
遍歷的列表下面的元素是 object wx:key = 'id'不重複 數字或者字串
遍歷的列表下面的元素是 數字或者字串 wx:key='*this'
元件引數傳遞
元件屬性 properties ----- js
slot ----- html/wxml
外部樣式 externalClass ----- css/wxss
WXS
可以參考ES5語法
小程式跳轉頁面
const bid = this.properties.book.id
wx.navigateTo({
url: `/pages/book-detail/book-detail?bid=${bid}`
})
}
複製程式碼
小程式載入時 loading
wx.showLoading() 開啟
wx.hideLoading() 關閉
並行請求和序列請求
當並行請求時 多個promise例項 可以進行合併
Promise.all([]).then() 會等待所有的請求返回了結果再執行then()裡面的方法
元件和頁面 以及Model 應該在哪裡傳送http請求(重點)
如果編寫的元件是為了方便很多專案使用,為了增加元件的複用性,不要講http放在元件中傳送,應該編寫在model中 在頁面中進行呼叫傳送http請求, 如果是複雜元件 只用於單個專案中,不追求複用性,只需要完成程式碼的分離,可以複雜元件中進行呼叫傳送http請求
注意setData與直接賦值的區別
當資料在WXML中進行繫結時 需要更新資料達到 頁面即時更新的效果時就需要使用 setData
如果資料只是用來在JS中作邏輯判斷用,不需要更新頁面時 就可以直接賦值
小程式之間的跳轉
小程式之間要發生跳轉,需要進行關聯,進行關聯的話需要繫結到同一個公眾號或者訂閱號,在公眾號後臺裡面去設定
微信小程式backgroundAudioManager的Android與iOS不同之處
src:背景音訊的路徑
iOS:路徑不可帶中文,空格,條件相對嚴格;除了給src賦值,必須要給title也賦值才能開始播放音訊
Android:路徑中帶上中文與空格也能解析,相對寬鬆的條件;給src賦值後即開始播放音訊
title:音訊標題
iOS:如果不給背景音訊賦值title,音訊將無法播放
Android:即使沒有title值,也可以正常播放音訊
未完待續