open-data头像如何设置样式
-
设置成 { display: block; overflow: hidden; } 就可以正常设置样式了,包括圆形头像等
小程序中使用Promise
-
引用npm中的es6-promise即可;
-
使用下面的函数包裹微信API即可将其转为Promise方式调用:
function promise(fn) {
return function (obj = {}) {
return new Promise((resolve, reject) => {
obj.success = res => resolve(res);
obj.fail = res => reject(res);
fn(obj);
})
}
}
...
调用方式:
utils.promise(wx.request)({ url: ... }).then(response => { ... }) ...
纯CSS方式给元素添加半透明背景
.elem { /* 元素本身添加样式 */
position: relative; /* 为了后面的伪元素以本元素为定位基准 */
z-index: 10; /* 渲染在伪元素之上 */
/* 其它样式,大小,字体等 */
}
.elem::after { /* 给元素添加::after伪元素并设置为半透明:*/
content: "";
position: absolute;
left: 0;
background-color: white;
opacity: 0.2;
/* 其它样式,大小应和主元素一致 */
}
开发阶段给所有元素添加虚线边框
-
小程序WXSS似乎不支持"*"选择器,因此只能用以下笨办法:
/* 仅供测试,发布版请删除 */
view,icon,text,rich-text,progress,image,button,textarea,open-data,navigator,canvas,checkbox,form,input,label,picker,radio,slider,switch {
outline: 1px dashed lightblue;
}
渐变背景
-
为了在开发工具生效,需要使用"-webkit-"前缀:
.mainbg {
background: -webkit-linear-gradient(left,#18b6ff,#aa29ff);
background: linear-gradient(left,#18b6ff,#aa29ff);
}
占据垂直方向的剩余空间
{ height: calc(100vh - 300rpx); }
让小程序支持服务端Session
-
主要就是要添加Cookie支持,可以包装一下wx.request方法实现
1) 解析response的Set-Cookie应答头,并将cookie保存在本地
2) 以后每次请求把本地保存的cookie放到Cookie请求头中
点击用户头像跳转页面
-
open-data上面不能绑定事件,简单实现可以用navigator包裹open-data,不用写js代码即可实现点击跳转页面;
-
navigator相当于html的a元素,默认为inline,可修改display样式为block