微信小程序笔记

单位 rpx

rpx类似于 Android 中dp，具有设备独立性，最大屏幕宽度为750rpx。

字体加粗

/* normal, 400, bold, 700 */
font-weight: normal;
/*font-style: bold;*/

单位 vw wh

vw、vh是 CSS3 中的新单位，是一种视窗单位，也是相对单位。

width: 100vw;
height: 100vh;
/*height: 100%;*/

与 % 的区别？
% 是相对于父元素的大小设定的比率，vw 是视窗大小决定的。

文本溢出

width: 86vw; /* 文本的宽度须指定 */

white-space: nowrap; /* 文本不换行 */
text-overflow: ellipsis; /* 文本溢出显示省略号 */
overflow: hidden; /* 隐藏溢出的部分 */

强大的 flex

display flex 是 CSS3 的特性，火力强大。微信小程序完整支持。

display: flex;

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow:  || ;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

参考：
微信小程序布局 display flex 布局介绍

图片模糊效果

filter: blur(10px);
-webkit-filter: blur(10px);

参考：CSS3 filter(滤镜) 属性

长按事件 longtap

小程序的长按事件有一个特点，事后总会继续触发短按事件tap。如果要阻断tap该怎么做呢？

首先分析小程序的事件逻辑。事件分为冒泡事件和非冒泡事件。

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

而触摸类则属于前者，触发顺序为：
单击：touchstart > touchend > tap
长按：touchstart > longtap > touchend > tap
双击：touchstart > touchend > tap > touchstart > touchend > tap

笔者的解决思路为设置长按标志变量。关键代码：

var imgLongTapLock = false;

Page({
  onImgTap: function (event) {
    if (imgLongTapLock) {
      imgLongTapLock = false;
      return;
    }
    console.log('onImgTap');
  },

  /**
   * 长按事件
   */
  onImgLongTap: function (event) {
    imgLongTapLock = true;
    console.log('onImgLongTap');
  },
})

页面间传值

wx.navigateTo({
  url: 'test?id=1&data=' + JSON.stringify(obj)
})

//test.js
Page({
  onLoad: function(options) {
    console.log(options.id);
    console.log(JSON.parse(options.data));
  }
})

上面展示了如何传递简单值或对象。那么问题来了，对象里的值含?就完蛋了，其后部分会被丢弃而导致无法还原。如：

test?id=1&data={url:"http://a.b.com/c?xx=xx"}

变成了

test?id=1&data={url:"http://a.b.com/c

这或许是一个BUG吧。