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

页面跳转

对于页面跳转,可能习惯性想到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. Docker启动Elasticsearch报错vm.max_map_count

    报错信息如下 max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144] 临 ...

  2. VBA if...elseif...else语句

    一个If语句,后面可以跟一个或多个由布尔表达式组成的elseif语句,然后是一个默认的else语句,当所有条件变为false时执行else语句块. 语法 以下是VBScript中If...Elseif ...

  3. 关于将多个json对象添加到数组中的测试

    如果用数组push添加不到数组中的,这个我也不知道是为什么?然后我选择了另一种发放就是从数组出发,逆向添加 最后的数组是这样的: data1=['公司1','公司2','公司3','公司4']; ar ...

  4. zabbix-自定义监控项

    一.自定义一个监控项 模板虽好,但是不能解决所有的监控,有些需要的监控项在模板中并没有,需要我们自己定义一个监控项,如何定义一个监控项呢?大概的流程是这样的几步 .在插件配置文件中定义一个key/va ...

  5. 第五章、Celery分布式系统

    Celery 官方 Celery 官网:http://www.celeryproject.org/ Celery 官方文档英文版:http://docs.celeryproject.org/en/la ...

  6. 微信企业红包api接入

    项目描述:基于微信浏览器的H5页面,接入微信支付接口和微信红包接口 一.接入前准备条件 1.微信公众号 需要基于已认证的微信公众号承载该H5页面.该条件默认已具备,本文重点为红包接口. 2.微信支付商 ...

  7. AWD模式搅屎模式

    AWD模式搅屎模式 ###0x01 出题思路 ####1:题目类型 1-出题人自己写的cms,为了恶心然后加个so. 2-常见或者不常见的cms. 3-一些框架漏洞,比如ph师傅挖的CI这种 #### ...

  8. Linux常用命令及文件管理

    Linux上的文件管理类命令都有哪些,其常用的使用方法及其相关示例演示. 目录解释: .代表此层目录:  .. 代表父目录:-代表前一个目录:~代表是家目录. (1)ls命令(显示) -a:列出所有文 ...

  9. tiny4412 串口驱动分析九 --- shell终端

    作者:彭东林 邮箱:pengdonglin137@163.com 开发板:tiny4412ADK+S700 4GB Flash 主机:Wind7 64位 虚拟机:Vmware+Ubuntu12_04 ...

  10. 说一下 runnable 和 callable 有什么区别?(未完成)

    说一下 runnable 和 callable 有什么区别?(未完成)