mpvue開發小記


1、組件嵌套組件時,子組件作用域bug

組件A內的slot包含子組件B的話,無法正常使用變量(這種情況下,B組件的template錯誤地使用了A的作用域)。
我的解決方案:減少一層組件提煉,即這種情況下,將A和B合並成新組件C,可配合使用mixin解決部分代碼冗余問題。

2、上傳圖片到阿里雲oss

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

3、頁面onUnload后,頁面vue實例的數據不清空

我的解決方案:Object.assign(this.$data, this.$options.data()),能清空所有初始化時定義的數據,前提是data屬性是以函數的形式定義的。否則需要將data的屬性一個一個地‘清空’。

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

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

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

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

6、所有頁面的created鈎子在onLaunch后就執行了

頁面初始化執行的函數寫在onReady或onLoad里,created一般情況下不使用。

7、設置小程序開發工具

開發前先設置好開發工具,否則會出現各種問題!
設置:

8、小程序參數獲取

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

9、刷新當前頁面(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 })


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM