mpvue開發小記

一、組件嵌套組件時,子組件做用域bug

組件A內的slot包含子組件B的話,沒法正常使用變量(這種狀況下,B組件的template錯誤地使用了A的做用域)。
個人解決方案:減小一層組件提煉,即這種狀況下,將A和B合併成新組件C,可配合使用mixin解決部分代碼冗餘問題。html

二、上傳圖片到阿里雲oss

咱們採用了‘服務端簽名後直傳’方案,即在服務端經過完成簽名,而後前端直傳數據到OSS,這樣,AccessKey就不會暴露在前端頁面了,並且對服務器的壓力比較小。
咱們從服務器拿到簽名後,須要按必定格式傳遞數據到阿里雲oss服務器(坑),文檔地址:PostObject,上傳完成後,圖片的網絡地址須要咱們根據上傳時的文件名和域名等拼合在一塊兒得出。前端

三、頁面onUnload後,頁面vue實例的數據不清空

個人解決方案:Object.assign(this.$data, this.$options.data()),能清空全部初始化時定義的數據,前提是data屬性是以函數的形式定義的。不然須要將data的屬性一個一個地‘清空’。vue

四、不支持在組件上使用 Class 與 Style 綁定(官方文檔內有標明)

<my-component :class="myClass"></my-component> // 不支持

五、不支持在 template 內使用 methods 中的函數(官方文檔內有標明)。

<p>時間{{formatTime(time)}}</p> // 不支持

六、全部頁面的created鉤子在onLaunch後就執行了

頁面初始化執行的函數寫在onReady或onLoad裏,created通常狀況下不使用。小程序

七、設置小程序開發工具

開發前先設置好開發工具,不然會出現各類問題!
設置:
服務器

八、小程序參數獲取

  • 獲取小程序在 page onLoad 時候傳遞的 options: this.$root.$mp.query
  • 獲取小程序在 app onLaunch/onShow 時候傳遞的 options:this.$root.$mp.appOptions

九、刷新當前頁面(hack)

先獲取當前頁的url(包括query),而後重定向:網絡

let pagesStack = getCurrentPages()  // eslint-disable-line
let activePage = pagesStack[pagesStack.length - 1]
let pageParams = activePage.options
let url = (function () {
  let base = './main'
  for (let i in pageParams) {
    base += '&' + i + '=' + pageParams[i]
  }
  let result = base.replace('&', '?')
  return result
})()
wx.redirectTo({ url: url })
相關文章
相關標籤/搜索