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

页面跳转

对于页面跳转,可能习惯性想到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. 在函数作用域嵌套下使用this

    var myObj = {    specialFunction: function () {        console.log("specialFunction.");   ...

  2. HotSpot JVM目录

    一.知识结构整理 jvm体系大体分四大块: 类的加载机制 jvm内存结构 GC算法 垃圾回收 GC分析 命令调优 二.运行时JVM结构组成及作用 http://www.cnblogs.com/imxi ...

  3. class类 - static

    不需要实例化类,即可直接通过该类来调用的方法,即称之为"静态方法".将类中的方法设为静态方法也很简单,在方法前加上static关键字即可.这样该方法就不会被实例继承! class ...

  4. Point to class member

    #include <iostream> using namespace std; class Student { public: Student(string n, int nu):nam ...

  5. 异常-ERROR yarn.ApplicationMaster: User class threw exception: java.sql.SQLException: Communications link failure

    1 详细异常信息 ERROR yarn.ApplicationMaster: User class threw exception: java.sql.SQLException: Communicat ...

  6. Kubernetes 的 Client Libraries 的使用

    说明 kubernetes 估计会成为 linux 一样的存在,client-go 是它的 go sdk,client-go/examples/ 给出了一些用例,但是数量比较少. api Resour ...

  7. 全文检索引擎在Django中的使用

    Haystack 1.什么是Haystack Haystack是django的开源全文搜索框架(全文检索不同于特定字段的模糊查询,使用全文检索的效率更高 ),该框架支持Solr,Elasticsear ...

  8. Linux命令——diff、patch

    简介 diff以行为单位比较不同ASCII文件差异,可以输出一组指令,用于指导如何更改一个文件使其与第二个文件相同.diff在软件开发时多用于比较新旧版本代码,和patch连用可以将文件间区别做成补丁 ...

  9. MySQL在使用group_concat()函数数据被截取

    遇到问题: 项目中有个需求,MySQL中存储的是树状的数据.现在给出一个节点,需要从Mysql数据库中取出这个节点下所有的节点.采用MySQL的函数. 函数如下: CREATE DEFINER=`ro ...

  10. idou老师教你学Istio 29:Envoy启动流程

    1. 功能概述 Envoy启动时,会启动一个进程,并在这个进程中启动很多线程,这样,可以启动很多worker线程,一般worker线程数与核心数相同,每个worker线程处理所有已配置的listene ...