前段时间稍微涉猎了微信小程序开发,踩了一些坑,在此总结出来,希望能为小伙伴们提供一点帮助。

页面跳转

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

微信小程序开发常见坑的更多相关文章

  1. 微信小程序开发填坑指南V1

    近期用了一星期的时间,开发了一个小程序.小程序名称是:小特Jarvis,取自钢铁侠的管家. 后台采用C#编写,WebAPI接口.其实开发时间并不多,小程序本身提供的API,相比公众号的API来说,已经 ...

  2. 微信小程序开发踩坑记

    前言 微信小程序自去年公测以来,我司也申请了一个帐号开发,春节前后开始开发,现在终于告一个段落了.谨以此文记录下踩过的坑. 坑1:scroll-view与onPullDownRefresh冲突 由于有 ...

  3. 微信小程序开发踩坑日记

    2017.12.29  踩坑记录 引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5  踩坑记录 微信小程序设置元素满屏,横向直接w ...

  4. 微信小程序开发踩坑与总结 -

    原文链接:https://segmentfault.com/a/1190000008516296 前段时间把公司小程序项目开发完成了,所以来写写自己开发过程中碰到的问题和解决方法,以及用到的提高效率的 ...

  5. 微信小程序开发-踩坑

    异步请求处理 详情描述: 微信小程序的wx.request({})请求时异步处理,以下代码 wx.reuest({ url:"https://XXXA", method:" ...

  6. 微信小程序开发填坑

    1.模拟器和真机的差异 在开发的过程中,在模拟器上表现得好好的,在真机上却出问题的例子数不胜数.譬如动画的使用,cover-view上面使用定位,在模拟器好好的,在真机却错乱等等等等.造成这些错乱主要 ...

  7. 踩一踩微信小程序开发的坑---tabBar

    最近忙于开发视频直播的项目,小程序学习也放置了两三个星期了,web开发者工具更新到新版,发现上个版本做的demo不显示了

  8. [转]微信小程序开发踩坑记录

    本文转自:http://www.cnblogs.com/NKnife/p/6283605.html 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app. ...

  9. 微信小程序开发踩坑记录

    1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function() ...

随机推荐

  1. restTemplate源码解析(一)构造restTemplate的Bean实例

    所有文章 https://www.cnblogs.com/lay2017/p/11740855.html 正文 构造一个restTemplate的Bean实例很容易,只需这样配置 @Bean publ ...

  2. docker系列之六容器数据卷

    docker之容器数据卷 一.容器数据卷 docker容器运行的时候,会产生一系列的文件,那么我们希望容器产生的数据能提供给其他的容器使用,也就是说怎么实现容器间的数据的共享呢?这就需要用到我们所提到 ...

  3. CritterAI 翻译 Configuration Parameters

    翻译自: http://www.critterai.org/projects/nmgen_study/config.html 参考: http://blog.csdn.net/kun1234567/a ...

  4. Python 3.7的新特性

    Python 3.7为数据处理.脚本编译和垃圾收集优化以及更快的异步I/O添加了许多新类.python是一种旨在简化复杂任务的语言.python 3.7的最新版本已经正式休闲鹿进入beta发布阶段.P ...

  5. 【转载】salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句

    salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句 salesforce如果简单的说可以大概分成两个部分:Apex,VisualForce Page. 其中Apex ...

  6. drunk_admin_hacking_challenge靶机之旅?

    注:  只是记录本人玩的时候发现的新奇点  如果你也想玩且看了这篇文章还是不会,请联系gg 靶机下载地址 https://www.vulnhub.com/entry/drunk-admin-web-h ...

  7. Codeforces 853A Planning

    题意 给出飞机单位晚点时间代价和原定起飞时间,现在前k分钟不能起飞,求付出的最小代价和起飞顺序 思路 构造两个优先队列q1,q2,q1按时间顺序,q2按代价顺序,初始将所有飞机入q1,将时间在k前的飞 ...

  8. 主板(motherboard)

    若转载请于明显处标明出处:http://www.cnblogs.com/kelamoyujuzhen/p/8979262.html 整台PC都是围绕主板(motherboard)构建的,它是PC中最重 ...

  9. python3 虚拟环境

    一.python中的虚拟环境 1.虚拟环境:局部的,独立的python环境,完全模拟系统全局python环境的使用 二.安装 http://virtualenv.pypa.io/en/latest/u ...

  10. ndk学习之c++语言基础复习----C++容器、类型转换、异常与文件流操作

    继续来复习C++,比较枯燥,但是这是扎实掌握NDK开发的必经之路,不容小觑. 容器: 容器,就是用来存放东西的盒子. 常用的数据结构包括:数组array, 链表list, 树tree, 栈stack, ...