微信小程式開發常見坑

清暉發表於2017-12-18
微信小程式
前段時間稍微涉獵了微信小程式開發，踩了一些坑，在此總結出來，希望能為小夥伴們提供一點幫助。

頁面跳轉

對於頁面跳轉，可能習慣性想到wx.navigateTo，但是在跳轉到目標頁面是一個tab時，此介面就不起作用了，但也不會報出任何錯誤。此時應使用wx.switchTab，詳見連結描述

區分幾種導航介面：
wx.navigateTo是保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。wx.redirectTo關閉當前頁面，跳轉到應用內的某個頁面。wx.reLaunch關閉所有頁面，開啟到應用內的某個頁面。

switchTab後tab不重新整理

場景：不同賬號有不同許可權，首頁展示不同模組，在退出賬號一改用賬號二登陸後，首頁展示的模組與賬號二的許可權不一致。
問題分析：登陸頁面是在首頁基礎上新開了一個頁面，在登陸成功後呼叫switchTab跳轉到首頁，看起來並沒有任何問題。關鍵在於switchTab跳轉後並不重新整理頁面，
，所以用賬號二重新登陸後到達的首頁仍是賬號一的首頁。所以需要用下面的方法來重新整理登陸後的頁面：

wx.switchTab({
    url: `/pages/xx/index`,
    success: function (e) {  
      let page = getCurrentPages().pop()
      if (page == undefined || page == null) return
      page.onLoad()
    }
})

text-align:justify不起作用

在涉及文字兩端對齊時，理所當然的想到使用text-align:justify，但發現不起作用，經查詢，發現MDN上是這麼寫的：

justify
The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

也就是說，text-align:justify只對非最後一行起作用，只有一行文字時也算最後一行，對，就是這麼坑。當然這不僅僅是對於微信小程式而言。
於是找到text-align-last:justify

The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.

微信開發環境上試試看，謝天謝地，搞定！但是，圖樣圖森破，微信一掃，還是依舊。哦到開，text-align-last有相容性問題。

看來還是得看text-align，它是針對非最後一行的，那麼我們可以嘗試把一行文字偽裝成非最後一行，比如通過新增一個空內聯塊狀元素或者使用偽元素。可參考連結描述

相關文章