微信小程序开发常见坑

2024年2月13日 168次阅读 来源: 清晖 
前段时间稍微涉猎了微信小程序开发，踩了一些坑，在此总结出来，希望能为小伙伴们提供一点帮助。

页面跳转

对于页面跳转，可能习惯性想到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，它是针对非最后一行的，那么我们可以尝试把一行文本伪装成非最后一行，比如通过添加一个空内联块状元素或者使用伪元素。可参考链接描述

    原文作者：清晖
    原文地址: https://segmentfault.com/a/1190000012465370
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞