微信小程序笔记
2017-05-16 本文已影响185人
By_syk
单位 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吧。