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

页面跳转

对于页面跳转,可能习惯性想到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. puml 用于代码注释

    notebook 笔记本 @startuml rectangle sql_decode.py{ object SQLDataset object Name SQLDataset : meta = &q ...

  2. ConfigParser读取配置文件时报错:ConfigParser.MissingSectionHeaderError

    使用ConfigParser来读取配置文件,经常会发现经过记事本.notepad++修改后的配置文件读取时出现下面的问题: ConfigParser.MissingSectionHeaderError ...

  3. CentOS 7安装VMware Tools

    1.启动centos,在此虚拟集中点击VMware Workstation中的虚拟机菜单,点击安装VMware Tools,如果已经安装过点击重新安装VMware Tools 2.查看/dev目录下文 ...

  4. ln -s vs mount --bind

    First ,Symlinks and bind mounts are a whole different ballgame. ln -s you create a symbolic link,whi ...

  5. 实现LAMP架构

    LAMP介绍 LAM(M)P: L: linux A: apache (httpd) M: mysql, mariadb M:memcached P: php, perl, python WEB资源类 ...

  6. 3.Vue过滤器

    1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...

  7. idou老师教你学Istio 20 : Istio全景监控与拓扑

    根据Istio官方报告,Observe(可观察性)为其重要特性.Istio提供非侵入式的自动监控,记录应用内所有的服务. 我们知道在Istio的架构中,Mixer是管理和收集遥测信息的组件.每一次当请 ...

  8. TCP的三次握手与四次挥手的理解

    本文经过借鉴书籍资料.他人博客总结出的知识点,欢迎提问    序列号seq:占4个字节,用来标记数据段的顺序,TCP把连接中发送的所有数据字节都编上一个序号,第一个字节的编号由本地随机产生:给字节编上 ...

  9. Vue入门到出门

    原来微信小程序的js跟这个差不多啊.这个也不像jQuery那种完全是为了方便写js的感觉,难道算前端框架?还不太了解,总之要先看看,然后用HBuilder快点上手做点东西…… ------------ ...

  10. vue开发记录

    vue开发过程中遇到的一些小问题.小技巧等,会不断更新~ 记录不详细处,欢迎留言