微信小程序入门笔记（下）

经过了两个多月，项目完成上线。在这过程遇到了更多的坑，总结如下：

微信的坑

• bindlongtap与bindtap同时有的时候，longtap会触发tap事件。但是从某个版本开始可以使用longpress，它不会触发tap事件。
• wx.showToast字数限制，大概不能超过7、8个字。仔细想一下也是可以理解的，因为toast是几秒之后自动消失的，文字太多用户也读不过来。
• wx.showModal按钮字数限制4个字，这个估计是样式考虑。
• wx.showModal在iOS下的内容是可以被编辑的！好大的坑！！！

• 时间选择控件<picker mode='date'></picker>中的start与end属性如果时间写错了，iOS时间限制失效，但是安卓闪退！
• 由于微信出于性能考虑，限制最多5个页面，在项目中一不小心页面就超标，然后点击就没反应了。大坑！！！感觉也没什么很好的解决方法，避免方式就是避免有闭环的操作，其他的一一检查过来。

自己的坑

开始过程中，由于自己的粗心大意，踩了一点小坑。

• onPullDownRefresh问题：页面不在顶部的时候，下拉操作竟然触发了onPullDownRefresh问题，有点懵。最后发现原因竟然是，我用一个view包了一个view，最外面的view高度设置为100%。。。
• 按钮的圆角问题：微信小程序的组件自带一些样式，比如button自带样式，它的border属性在::after伪元素里面写，border-radius属性两者都有。然后我需要设置按钮样式成我们视觉想要的效果，我就不假思索地在::after里面写border-radius，结果按钮出现了缺角的情况。正确的操作是，两个属性都直接在元素上设置。

button {    position:relative;    display:block;    margin-left:auto;    margin-right:auto;    padding-left:14px;    padding-right:14px;    box-sizing:border-box;    font-size:18px;    text-align:center;    text-decoration:none;    line-height:2.55555556;    border-radius:5px;    -webkit-tap-highlight-color:transparent;    overflow:hidden;    color:#000000;    background-color:#F8F8F8;}button::after {    content:" ";    width:200%;    height:200%;    position:absolute;    top:0;    left:0;    border:1px solid rgba(0, 0, 0, 0.2);    -webkit-transform:scale(0.5);    transform:scale(0.5);    -webkit-transform-origin:0 0;    transform-origin:0 0;    box-sizing:border-box;    border-radius:10px;}

• 图片设置问题：微信提供image组件，其中有个看起来比较好用的属性mode，它可以用来设置图片的裁剪缩放模式。但要避免不必要的缩放，特别是很长的下拉列表。因为快速下拉的时候，微信小程序可能还来不及计算好图片的尺寸，就显示了。结果就会经历图片尺寸从默认设置的width:320px; height:240px;闪变到最后想要的尺寸。

兼容性的坑

• display设为flex元素内部的元素如果设置绝对定位，在iOS显示有问题。当然，本来绝对定位的元素语义上不应该这么写。但这个小问题可以暴露出来微信开发者，安卓，iOS三个的渲染引擎是不一致的。
  
• iOS最底部的元素会被忽略margin-bottom属性，解决办法大家应该都知道的。

我的疑问

• 页面刷新机制：小程序有几个生命周期函数，常用的有第一次加载时触发onLoad函数，每次页面显示触发的onShow函数。问题是数据刷新机制怎么设置比较合理呢？每次onShow都刷新？还是只在onLoad里面刷新，如果获取失败再在下一次的onShow中刷新？还是onLoad刷新结合下拉刷新？
• 字体大小问题：小程序提供了rpx的单位来支持屏幕自适应问题，规定屏幕为750rpx。比如iphone6，屏幕宽度为375px/375pt，750个物理像素，正好1rpx = 0.5px = 1物理像素。视觉稿最好给出的就是750px宽度的。那么问题来了，rpx于pt之间是怎么换算的呢？好像很简单2rpx = 1px = 1pt。事实上下图中左边商品标题字体大小为24rpx，右边字体大小为12pt：
  
  两个字体竟然不一样大，我又有点懵了（原谅我的无知）。直到我看到一篇讲关于dpi的文章之后（参见延伸阅读），才有点明白。看一下iPhone6 字体对比图：
  
  所以，发现96px = 72pt即12px = 9pt，而在iphone6的屏幕中12px=24rpx，所以9pt = 24rpx。你会发现两者之间的关系是随着手机屏幕尺寸的不同发生变化的。那么问题来了，字体大小如何进行自适应？我看一般的建议是字体保持绝对大小，但在小屏中会不会破坏整体布局呢？
• 五个页面限制：是否存在好的方式，能解决页面限制带来的问题？

延伸阅读

• CSS长度单位 px和pt的区别

附上二维码，欢迎买猪肉，也欢迎提Bug（还存在很多优化点，请轻喷）。

本文首发知乎野草。如有不当之处，欢迎指正。