小程式學習總結

Leon Aries發表於2018-10-29

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.setStorageSync(key, value)
   wx.getStorageSync(key)

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值,也可以正常播放音訊

未完待續