微信小程序开发常见坑
前段时间稍微涉猎了微信小程序开发,踩了一些坑,在此总结出来,希望能为小伙伴们提供一点帮助。
页面跳转
对于页面跳转,可能习惯性想到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,它是针对非最后一行的,那么我们可以尝试把一行文本伪装成非最后一行,比如通过添加一个空内联块状元素或者使用伪元素。可参考链接描述
微信小程序开发常见坑的更多相关文章
- 微信小程序开发填坑指南V1
近期用了一星期的时间,开发了一个小程序.小程序名称是:小特Jarvis,取自钢铁侠的管家. 后台采用C#编写,WebAPI接口.其实开发时间并不多,小程序本身提供的API,相比公众号的API来说,已经 ...
- 微信小程序开发踩坑记
前言 微信小程序自去年公测以来,我司也申请了一个帐号开发,春节前后开始开发,现在终于告一个段落了.谨以此文记录下踩过的坑. 坑1:scroll-view与onPullDownRefresh冲突 由于有 ...
- 微信小程序开发踩坑日记
2017.12.29 踩坑记录 引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5 踩坑记录 微信小程序设置元素满屏,横向直接w ...
- 微信小程序开发踩坑与总结 -
原文链接:https://segmentfault.com/a/1190000008516296 前段时间把公司小程序项目开发完成了,所以来写写自己开发过程中碰到的问题和解决方法,以及用到的提高效率的 ...
- 微信小程序开发-踩坑
异步请求处理 详情描述: 微信小程序的wx.request({})请求时异步处理,以下代码 wx.reuest({ url:"https://XXXA", method:" ...
- 微信小程序开发填坑
1.模拟器和真机的差异 在开发的过程中,在模拟器上表现得好好的,在真机上却出问题的例子数不胜数.譬如动画的使用,cover-view上面使用定位,在模拟器好好的,在真机却错乱等等等等.造成这些错乱主要 ...
- 踩一踩微信小程序开发的坑---tabBar
最近忙于开发视频直播的项目,小程序学习也放置了两三个星期了,web开发者工具更新到新版,发现上个版本做的demo不显示了
- [转]微信小程序开发踩坑记录
本文转自:http://www.cnblogs.com/NKnife/p/6283605.html 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app. ...
- 微信小程序开发踩坑记录
1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function() ...
随机推荐
- pytorch入门1——简单的网络搭建
代码如下: %matplotlib inline import torch import torch.nn as nn import torch.nn.functional as F from tor ...
- VBA Excel宏(二)
在本章中,我们来学习如何逐步编写一个简单的宏. 第1步 - 首先,在Excel 2016中启用“开发者”菜单.要完成这个设置,请点击左上角菜单:文件 -> 选项.如下图所示 - 第2步 - 点击 ...
- js通俗易懂的&&与||或运算
使用&&将返回第一个条件为假的值. 如果每个操作数的计算值都为true, 则返回最后一个计算过的表达式. let one = 1, two = 2, three = 3;console ...
- 【Salesforce】入门篇
Salesforce.com 一开始是一个云端的销售自动化(Sales Force Automation, SFA)以及客户关系管理工具(Customer Relationship Managemen ...
- centos根目录扩容,home目录减小容量
参考: https://blog.csdn.net/evandeng2009/article/details/49814097 主要命令: 15 cd / 16 ll 17 mkdir backup ...
- 【leetcode】302.Smallest Rectangle Enclosing Black Pixels
原题 An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel. The bl ...
- spring-boot-actuator 常用配置
management: endpoints: web: base-path: "/" exposure: include: "*" endpoint: heal ...
- python网络爬虫第三弹(<爬取get请求的页面数据>)
一.urllib库 urllib是python自带的一个用于爬虫的库,其主要作用就是通过代码模拟浏览器发送请求,其常被用到的子模块在 python3中的为urllib.request 和 urllib ...
- 用js刷剑指offer(用两个栈实现队列)
题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 牛客网链接 js代码 let stack1 = [] let stack2 = [] function ...
- ndk学习之c++语言基础复习----面向对象编程
关于面向对象编程对于一个java程序员那是再熟悉不过了,不过对于C++而言相对java还是有很多不同点的,所以全面复习一下. 类 C++ 在 C 语言的基础上增加了面向对象编程,C++ 支持面向对象程 ...