单位 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: <flex-direction> || <flex-wrap>;
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;
图片模糊效果
filter: blur(10px);
-webkit-filter: blur(10px);
长按事件 longtap
小程序的长按事件有一个特点，事后总会继续触发短按事件tap。如果要阻断tap该怎么做呢？
首先分析小程序的事件逻辑。事件分为冒泡事件和非冒泡事件。
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
而触摸类则属于前者，触发顺序为：
单击：touchstart > touchend > tap
长按：touchstart > longtap > touchend > tap
双击：touchstart > touchend > tap > touchstart > touchend > tap
笔者的解决思路为设置长按标志变量。关键代码：
<image id="img3d" class="img" src="{{url3d}}" mode="aspectFill"
bindtap="onImgTap" bindlongtap="onImgLongTap"></image>
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吧。
